如何通过拖放 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($ => {&nbsp; $("#app").sortable({&nbsp; &nbsp; stop: () => {&nbsp; &nbsp; &nbsp; $('#app > div').each((i, el) => $(el).data('num', i + 1));&nbsp; &nbsp; }&nbsp; });&nbsp; // only for testing...&nbsp; $('button').on('click', () => {&nbsp; &nbsp; $('#app > div').each((i, el) => console.log(`${el.textContent} - ${$(el).data('num')}`));&nbsp; });});<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">&nbsp; <div data-num="1">One</div>&nbsp; <div data-num="2">Two</div>&nbsp; <div data-num="3">Three</div>&nbsp; <div data-num="4">Four</div></div><button>Test</button>

Answer 2

我们还可以通过使用项目索引来实现这一点jQuery("#app").sortable({&nbsp; &nbsp;update: function(e, ui) {&nbsp; &nbsp; &nbsp; &nbsp;jQuery("#app div").each(function(i, elm) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$elm = jQuery(elm);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var elindex = $elm.index("#app div");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$elm.attr("data-num", elindex+1);&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; }&nbsp; &nbsp;});