這篇文章主要為大家詳細(xì)介紹了JS HTML5實(shí)現(xiàn)拖拽移動列表效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
HTML5拖拽移動列表實(shí)現(xiàn)思路：
1.循環(huán)設(shè)置每個(gè)子項(xiàng)的draggable屬性，以及設(shè)置拖動標(biāo)記（不會多個(gè)或全部子項(xiàng)都移動）
2.每次進(jìn)入投放區(qū)，則檢測時(shí)候有拖放標(biāo)記，有則添加dom元素，以此類推
另一種實(shí)現(xiàn)思路是：可以利用拖放中DataTransfer對象作為屬性，用setData()和getData()方法傳遞每個(gè)拖動的子項(xiàng)的id等數(shù)據(jù)，找到指定的子項(xiàng)進(jìn)行移動….待實(shí)驗(yàn)。。。
HTML：
//空列表
<div id="box"></div>
//內(nèi)容列表
<ul id="con">
<li>第1項(xiàng)</li>
<li>第2項(xiàng)</li>
<li>第3項(xiàng)</li>
<li>第4項(xiàng)</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è)置每個(gè)子項(xiàng)的draggable屬性，以及時(shí)候拖動標(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) { //此時(shí)獲得是時(shí)box對象下li，而不是原容器的li了
$("con").appendChild(liDoms[i]);
}
}
console.log('成功');
};
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。