html5 拖拽demo,HTML5拖拽+demo

有两个星期没写博客了，今天晚上和兄弟出去喝了几杯酒，乘着酒意写下这篇两个星期前一直想写的博客，再坚持一会就双12了，抢个商品，哎不废话了，说正经事。 拖拽事件类似于鼠标的一系列事件，有

ondragstart，对象是被拖拽元素

ondrag，对象是被拖拽元素

ondragenter，对象是目标元素

ondragover，对象是目标元素

ondragleave，对象是目标元素

ondrop，对象是目标元素

ondragend，对象是被拖拽元素

拖拽(拖放)大致分为两个过程，即拖(drag)与放(drop)，所以下文都称为拖放，HTML5的拖放事件用起来简单，主要得益于可以通过event对象获得拖拽的相关数据，即获取到被拖对象和目标位置对象。

ev.dataTransfer.setData("Text",ev.target.id);

ev.dataTransfer.getData("Text");

而获得目标对象是通过ev.target方法，所以认识到了这两点就抓住了拖放的主要内容。 下面是我自己写的一个小demo。 html代码如下：

拖动客户制定计划

• 拖拽我1
• 拖拽我2
• 拖拽我3
• 拖拽我4

周一

周二

周三

周四

周五

周六

周日

css代码如下：

#left_out{

width: 180px;

height: 400px;

float: left;

border: 1px solid #cccccc;

margin-right: 5PX;

}

#header_name{

padding: 10px;

text-align: center;

background: #cccccc;

}

#left_out #header_name h2{

font-weight: 900;

font-size: 16px;

}

#left_out ul{

width: 180px;

height: 400px;

}

#left_out ul li{

margin-top: 3px;

font-size: 14px;

}

#left_out ul li:hover{

background-color: #bababa;

cursor: move;

}

.weekBox{

float: left;

width: 150px;

border: 1px solid #bababa;

height: 400px;

}

#right_out h2{

width:100%;

height: 40px;

line-height: 40px;

font-weight: 900;

text-align: center;

background: #cccccc;

}

js代码如下(得引入jQuery包)：

// 给li元素添加拖拽相关的属性

$("#left_out ul li").attr("draggable","true").attr("ondragstart","drag(event)").each( function (index,ele){

$(this).attr("id",'li'+index);

});

// 给右边目的地添加拖拽相关的属性

$("#right_out .weekBox").attr("ondragover","allowDrop(event)").attr("ondrop","drop(event)");

// 给左边目的地添加拖拽相关的属性

$("#left_out ul").attr("ondragover","allowDrop(event)").attr("ondrop","dropRemove(event)");

// 下面都是原生js

function allowDrop(ev)

{

ev.preventDefault();

ev.stopPropagation();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function dragRemove(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

// enter右边元素时高亮

function dragenter(ev){

// 需判断，如果被拖拽元素来源于左边才高亮

var data=ev.dataTransfer.getData("Text");

console.log(data)

var drapNode=document.getElementById(data);

console.log(drapNode)

var drapNodeId=$(drapNode).attr("id") || "";

console.log(drapNodeId)// getAttribute()这方法谷歌不兼容

if(!(drapNodeId.indexOf("Right")==-1)){

return false

}

$(ev.target).css({

"color":"#FFFFFF", //Object.style这方法火狐不兼容

"backgroundColor":"red"

});

}

// leave右边元素时恢复，不高亮

function dragleave(ev){

$(ev.target).css({

"color":"#000000",

"backgroundColor":"#FFFFFF"

});

}

var index=0;

function drop(ev)

{

// 克隆拖动的元素，如果拖动的元素来源于左边，则添加到右边或替换右边的元素，如果不是，则return false。

ev.preventDefault();

ev.stopPropagation();

var data=ev.dataTransfer.getData("Text");

var drapNode=document.getElementById(data).cloneNode(true);

var drapNodeId=drapNode.id;

if(!(drapNodeId.indexOf("Right")==-1)){

return false

}

// 给准备拖放在右边的元素添加可以拖回左边的属性

drapNode.setAttribute("id",drapNodeId+"Right"+index);

index++;

drapNode.setAttribute("ondragstart","dragRemove(event)")

drapNode.style.cursor="move";

drapNode.title="拖拽我回家"

drapNode.style.border="1px solid #cccccc"

drapNode.style.marginTop="2px"

if(ev.target.id.indexOf("li")==-1){

//添加

ev.target.appendChild(drapNode); // 在目标位置上添加

}else{

//替换

ev.target.parentNode.insertBefore(drapNode,ev.target)

ev.target.parentNode.removeChild(ev.target);

}

var rightList=document.getElementById("right_out").getElementsByTagName("li");

for(var i=0;i

rightList[i].setAttribute("ondragenter","dragenter(event)");

rightList[i].setAttribute("ondragleave","dragleave(event)");

}

}

// 这个函数用于实现将右边的元素拖回左边的功能，判断拖动的元素是否来源于右边，若是则删除拖动的元素，否则返回false。

function dropRemove(ev)

{

ev.preventDefault();

ev.stopPropagation();

var data=ev.dataTransfer.getData("Text");

var drapNode=document.getElementById(data);

var drapNodeId=drapNode.id;

if(drapNodeId.indexOf("Right")==-1){

return false

}

drapNode.parentNode.removeChild(drapNode);

}

效果图如下：

效果为：最左侧的li元素可以拖到右侧的七个div中，还可以进行替换并且高亮，右侧七个div中的li元素可以拖回最左侧进行删除。 感觉js写的有点乱，后面有时间再改吧。