如何通过拖放 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 3 并将其放在顶部时，它应该将其 data 属性更改data-num="3"为data-num="1"，之后的 div 应data-num=2根据其位置将其 data 属性更改为 等等我正在尝试什么jQuery( "#app" ).sortable({     update: function(a, b) {         parseInt(jQuery(a).attr("data-num"),10) - parseInt(jQuery(b).attr("data-num"),10);    }          }); 

Answer 1

为了实现您的目标，您可以将事件处理程序挂钩到stop可排序的事件。然后您可以循环遍历每个子元素div并#app更新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);

       });

    }   

});