html5怎么设置li向下移,HTML5 UL LI可拖动

5 个答案:

答案 0 :(得分：15)

属性“draggable”仅启用拖动元素。您需要实现DnD侦听器并实现drop事件以进行所需的更改。

在示例中，他们为列A，B和C实现拖放。用户可以按DnD更改顺序。

答案 1 :(得分：3)

如果您正在使用Firefox进行测试，请注意它还需要在拖动操作中发送一些数据：

function handleDragStart(e) {

e.dataTransfer.effectAllowed = 'move';

e.dataTransfer.setData('text/html', e.target.innerHTML);

}

myLi.addEventListener('dragstart', handleDragStart, false);

否则，您将看不到被拖动内容的重影...

答案 2 :(得分：3)

只需在你的li元素中添加draggable =“true”。

1. List Item 1
2. List Item 2
3. List Item 3

答案 3 :(得分：1)

• List item 1
• List item 2
• List item 3
• List item 4
• List item 5

试试这个js

var dragSrcEl = null;

function handleDragStart(e) {

// Target (this) element is the source node.

this.style.opacity = '0.4';

dragSrcEl = this;

e.dataTransfer.effectAllowed = 'move';

e.dataTransfer.setData('text/html', this.innerHTML);

}

function handleDragOver(e) {

if (e.preventDefault) {

e.preventDefault(); // Necessary. Allows us to drop.

}

e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.

return false;

}

function handleDragEnter(e) {

// this / e.target is the current hover target.

this.classList.add('over');

}

function handleDragLeave(e) {

this.classList.remove('over'); // this / e.target is previous target element.

}

function handleDrop(e) {

// this/e.target is current target element.

if (e.stopPropagation) {

e.stopPropagation(); // Stops some browsers from redirecting.

}

// Don't do anything if dropping the same column we're dragging.

if (dragSrcEl != this) {

// Set the source column's HTML to the HTML of the column we dropped on.

dragSrcEl.innerHTML = this.innerHTML;

this.innerHTML = e.dataTransfer.getData('text/html');

}

return false;

}

function handleDragEnd(e) {

// this/e.target is the source node.

[].forEach.call(cols, function (col) {

col.classList.remove('over');

});

}

var cols = document.querySelectorAll('#parent .parent');

[].forEach.call(cols, function (col) {

col.addEventListener('dragstart', handleDragStart, false);

col.addEventListener('dragenter', handleDragEnter, false)

col.addEventListener('dragover', handleDragOver, false);

col.addEventListener('dragleave', handleDragLeave, false);

col.addEventListener('drop', handleDrop, false);

col.addEventListener('dragend', handleDragEnd, false);

});

答案 4 :(得分：0)

此代码将解决您的问题。 MDN的重做示例

尝试jsfiddle.net

HTML 5

• List item 1
• List item 2
• List item 3
• List item 4
• List item 5

纯JS

let dragged;

let id;

let index;

let indexDrop;

let list;

document.addEventListener("dragstart", ({target}) => {

dragged = target;

id = target.id;

list = target.parentNode.children;

for(let i = 0; i < list.length; i += 1) {

if(list[i] === dragged){

index = i;

}

}

});

document.addEventListener("dragover", (event) => {

event.preventDefault();

});

document.addEventListener("drop", ({target}) => {

if(target.className == "dropzone" && target.id !== id) {

dragged.remove( dragged );

for(let i = 0; i < list.length; i += 1) {

if(list[i] === target){

indexDrop = i;

}

}

console.log(index, indexDrop);

if(index > indexDrop) {

target.before( dragged );

} else {

target.after( dragged );

}

}

});