0
我已經在JS的項目中實現了HTML5的拖放功能。我目前面臨的問題如下:更新基於HTML5和JS的li屬性拖放
我需要更新數據迭代器時,使用我的LI元素的拖放排序。換句話說,當我想將Test 3移動到第一個位置時,數據迭代器應該從3變爲0.我認爲你明白了。
HTML
<ul id="_slides_slideshow_repeat">
<li class="postbox" data-iterator="0" draggable="true">Test</li>
<li class="postbox" data-iterator="1" draggable="true">Test 1</li>
<li class="postbox" data-iterator="2" draggable="true">Test 2</li>
<li class="postbox" data-iterator="3" draggable="true">Test 3</li>
</ul>
JS
function sortable(rootEl, onUpdate) {
var dragEl;
// Making all siblings movable
[].slice.call(rootEl.children).forEach(function (itemEl) {
itemEl.draggable = true;
});
// Function responsible for sorting
function _onDragOver(evt) {
evt.preventDefault();
evt.dataTransfer.dropEffect = 'move';
var target = evt.target;
if (target && target !== dragEl && target.nodeName == 'LI') {
// Sorting
rootEl.insertBefore(dragEl, target.nextSibling || target);
}
}
// End of sorting
function _onDragEnd(evt){
evt.preventDefault();
dragEl.classList.remove('ghost');
rootEl.removeEventListener('dragover', _onDragOver, false);
rootEl.removeEventListener('dragend', _onDragEnd, false);
// Notification about the end of sorting
onUpdate(dragEl);
}
// Sorting starts
rootEl.addEventListener('dragstart', function (evt){
dragEl = evt.target; // Remembering an element that will be moved
// Limiting the movement type
evt.dataTransfer.effectAllowed = 'move';
evt.dataTransfer.setData('Text', dragEl.textContent);
// Subscribing to the events at dnd
rootEl.addEventListener('dragover', _onDragOver, false);
rootEl.addEventListener('dragend', _onDragEnd, false);
setTimeout(function() {
// If this action is performed without setTimeout, then
// the moved object will be of this class.
dragEl.classList.add('ghost');
}, 0)
}, false);
}
// Using
sortable(document.getElementById('_slides_slideshow_repeat'), function (item) {
console.log(item);
});
我不知道哪個JS代碼行我應該修改,所以任何幫助將高度讚賞。
由於更新後的
data-iterator
屬性。它像一個魅力。 :) –