1轩性、是否可以可以拖拽 element.draggle="true";
2、為可拖拽元素設(shè)置 開始和結(jié)束狀態(tài)
element.ondragestart =funcion(){}開始狀態(tài)
element.ondragend=function(){} 結(jié)束狀態(tài)
3悯嗓、投放區(qū)域的狀態(tài) 分別為 進入 經(jīng)過 離開
targetElement.ondragenter=function(){} 進入狀態(tài)
targetElement.ondragover=function(){} 經(jīng)過狀態(tài)
targetElement.ondragleave=function(){}離開狀態(tài)
4脯厨、投放區(qū)進入的效果 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;
}
}
/*拖拽區(qū)事件*/
/*two.ondragstart=function(e){
two.innerHTML="11123"
};
two.ondragend=function(e){
two.innerHTML="1"
};*/
/*投放區(qū)事件*/
/*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]);
}
}
};/*投放區(qū)事件*/
/*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>
