這篇文章主要為大家詳細(xì)介紹了JS HTML5實現(xiàn)拖拽移動列表效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

HTML5拖拽移動列表實現(xiàn)思路：

1.循環(huán)設(shè)置每個子項的draggable屬性，以及設(shè)置拖動標(biāo)記（不會多個或全部子項都移動）

2.每次進(jìn)入投放區(qū)，則檢測時候有拖放標(biāo)記，有則添加dom元素，以此類推

另一種實現(xiàn)思路是：可以利用拖放中DataTransfer對象作為屬性，用setData()和getData()方法傳遞每個拖動的子項的id等數(shù)據(jù)，找到指定的子項進(jìn)行移動….待實驗。。。

HTML：

//空列表

<div id="box"></div>

//內(nèi)容列表

<ul id="con">

 <li>第1項</li>

 <li>第2項</li>

 <li>第3項</li>

 <li>第4項</li>

</ul>

JS：

<script>

function $(id) {

return document.getElementById(id);

}

var con = $("con");

var box = $("box");

var liDoms = document.getElementsByTagName("li");

var i = 0,

len = liDoms.length;

//循環(huán)設(shè)置每個子項的draggable屬性，以及時候拖動標(biāo)記

for (; i < len; i += 1) {

liDoms[i].draggable = 'true';

liDoms[i].flag = false;

liDoms[i].ondragstart = function() {

this.flag = true;

};

liDoms[i].ondragend = function() {

this.flag = false;

};

}

//投放區(qū)事件

$("box").ondragenter = function(e) {

e.preventDefault();

console.log('進(jìn)入');

};

$("box").ondragover = function(e) {

e.preventDefault();

console.log('移動');

};

$("box").ondragleave = function(e) {

e.preventDefault();

console.log('離開');

};

$("box").ondrop = function(e) {

e.preventDefault();

for (var i = 0; i < liDoms.length; i += 1) {

if (liDoms[i].flag) {

box.appendChild(liDoms[i]);

}

}

console.log('成功');

};

//投放區(qū)事件

$("con").ondragenter = function(e) {

e.preventDefault();

console.log('進(jìn)入');

};

$("con").ondragover = function(e) {

e.preventDefault();

console.log('移動');

};

$("con").ondragleave = function(e) {

e.preventDefault();

console.log('離開');

};

$("con").ondrop = function(e) {

e.preventDefault();

for (var i = 0; i < liDoms.length; i += 1) {

if (liDoms[i].flag) { //此時獲得是時box對象下li，而不是原容器的li了

$("con").appendChild(liDoms[i]);

}

}

console.log('成功');

};

</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。