HTML5拖拽+demo

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

ondragstart，对象是被拖拽元素

ondrag，对象是被拖拽元素

ondragenter，对象是目标元素

ondragover，对象是目标元素

ondragleave，对象是目标元素

ondrop，对象是目标元素

ondragend，对象是被拖拽元素

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

W3C网站对拖放有简单的介绍：http://www.w3school.com.cn/html5/html_5_draganddrop.asp （先阅读）。
可以清楚，获得被拖拽对象是通过event对象的两个方法，如下：

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

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

<div id="left_out">
<div id="header_name">
<h2>拖动客户制定计划</h2>
</div>
<ul>
<li title="拖拽我到右侧">拖拽我1</li>
<li title="拖拽我到右侧">拖拽我2</li>
<li title="拖拽我到右侧">拖拽我3</li>
<li title="拖拽我到右侧">拖拽我4</li>
</ul>
</div>
<div id="right_out">
<div class="weekBox" id="week1"><h2>周一</h2></div>
<div class="weekBox" id="week2"><h2>周二</h2></div>
<div class="weekBox" id="week3"><h2>周三</h2></div>
<div class="weekBox" id="week4"><h2>周四</h2></div>
<div class="weekBox" id="week5"><h2>周五</h2></div>
<div class="weekBox" id="week6"><h2>周六</h2></div>
<div class="weekBox" id="week7"><h2>周日</h2></div>
</div>

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("o
3ff0
ndrop","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.length;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写的有点乱，后面有时间再改吧。