如何通过拖放更改数据属性 Jquery UI？

Question

我制作了一个 jQuery 功能，用户可以在其中拖放 div。但是我想在用户拖放它们时更改它们的数据属性，例如-

<div data-num="1">one</div>
<div data-num="2">Two</div>
<div data-num="3">Three</div>
<div data-num="4">Four</div>

每当用户拖动 div 三个并将其放在顶部时，它应该将其数据属性 data-num="3" 更改为 data-num="1" 并且应该更改其后的 div数据属性为 data-num=2 等等，根据它们的位置

我在尝试什么

jQuery( "#app" ).sortable({ 
    update: function(a, b) { 
        parseInt(jQuery(a).attr("data-num"),10) - parseInt(jQuery(b).attr("data-num"),10);
    }          
});

Answer 1

为了实现您的目标，您可以将事件处理程序挂接到 sortable 的 stop 事件。然后，您可以遍历 #app 中的每个子 div 并更新 data-num 以匹配元素的索引。试试这个：

jQuery($ => {
  $("#app").sortable({
    stop: () => {
      $('#app > div').each((i, el) => $(el).data('num', i + 1));
    }
  });

  // only for testing...
  $('button').on('click', () => {
    $('#app > div').each((i, el) => console.log(`${el.textContent} - ${$(el).data('num')}`));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="app">
  <div data-num="1">One</div>
  <div data-num="2">Two</div>
  <div data-num="3">Three</div>
  <div data-num="4">Four</div>
</div>

<button>Test</button>

Answer 2

我们也可以通过使用项目索引来实现这一点

jQuery("#app").sortable({
   update: function(e, ui) {
       jQuery("#app div").each(function(i, elm) {
           $elm = jQuery(elm);
           var elindex = $elm.index("#app div");
           $elm.attr("data-num", elindex+1);
       });
    }   
});

如何通过拖放更改数据属性 Jquery UI？

How to change data attributes on drag and drop Jquery UI?

javascript

jquery

jquery-ui-sortable