1、是否可以可以拖拽 element.draggle="true";
2、为可拖拽元素设置 开始和结束状态
element.ondragestart =funcion(){}开始状态
element.ondragend=function(){} 结束状态
3、投放区域的状态 分别为 进入 经过 离开
targetElement.ondragenter=function(){} 进入状态
targetElement.ondragover=function(){} 经过状态
targetElement.ondragleave=function(){}离开状态
4、投放区进入的效果 ondrop
targetElement.ondrop=function(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#one{
width: 400px;height: 400px;border:1px solid black;
}
#two{
width: 400px;height: 400px;border: 1px solid red;
}
#two li{
background-color: #555555;
border: 1px solid black;
width: 150px;
height: 50px;
}
#one li{
background-color: #555555;
border: 1px solid black;
width: 150px;
height: 50px;
}
</style>
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
</head>
<body>
<div id="one"></div>
<div id="two" draggable="true">
<li>A</li>
<li>B</li>
<li>C</li>
</div>
</body>
<script>
$(document).ready(function(e){
var one=$("#one").get(0);
var two=$("#two").get(0);
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].draggable=true;
/*为可以拖拽的元素添加标记*/
li[i].flag=false;
li[i].ondragstart=function(){
this.flag=true;
};
li[i].ondragend=function(){
this.flag=false;
}
}
/*拖拽区事件*/
/*two.ondragstart=function(e){
two.innerHTML="11123"
};
two.ondragend=function(e){
two.innerHTML="1"
};*/
/*投放区事件*/
/*ondragenter和ondragover可能会受到浏览器默认事件影响，所以要在这两个方法中使用e.preventDefault()来阻止默认事件*/
one.ondragenter=function(e){
e.preventDefault();
};
one.ondragover=function(e){
e.preventDefault();
};
one.ondragleave=function(e){
e.preventDefault();
};
/*投放进去*/
one.ondrop=function(e){
e.preventDefault();
for(var i=0;i<li.length;i++){
if(li[i].flag){
one.appendChild(li[i]);
}
}
};/*投放区事件*/
/*ondragenter和ondragover可能会受到浏览器默认事件影响，所以要在这两个方法中使用e.preventDefault()来阻止默认事件*/
two.ondragenter=function(e){
e.preventDefault();
};
two.ondragover=function(e){
e.preventDefault();
};
two.ondragleave=function(e){
e.preventDefault();
};
/*投放进去*/
two.ondrop=function(e){
e.preventDefault();
for(var i=0;i<li.length;i++){
if(li[i].flag){
two.appendChild(li[i]);
}
}
}
})
</script>
</html>
