2 回答

TA貢獻1982條經驗 獲得超2個贊
為了實現您的目標,您可以將事件處理程序掛鉤到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>

TA貢獻1780條經驗 獲得超1個贊
我們還可以通過使用項目索引來實現這一點
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);
});
}
});
添加回答
舉報