html5拖拽

来源:互联网 发布:java搜索历史记录接口 编辑:程序博客网 时间:2024/06/16 01:27

#one{width:300px;height:200px;border: 2px solid red;margin: 20px;}
#two{width:100px; height:50px;border: 1px solid blue;}




<div id="one"></div>

<div id="two" draggable="true">请拖拽我</div>


$(function(){
var html = "移动";
var two = document.getElementById("two");
var one = document.getElementById("one");
$("#sub").click(function(){
alert($("#yanse").val())
})

----------------------拖拽物体时间------------------------------------
two.ondragstart=function(){//拖拽开始时执行

$("#one").html("开始");

two.ondrag=function(){//拖拽过程中执行
html+="移动";
$("#one").html(html);
}
two.ondragend=function(){//拖拽结束时执行
html+="完成";
$("#one").html(html);
}

----------------------------投放区事件------------------------------------

one.ondragenter=function(e){//投放区进入时触发

e.preventDefault();//阻止浏览器默认行为
}
one.ondragover=function(e){//投放区移动时触发
e.preventDefault();//阻止浏览器默认行为

one.ondragleave=function(e){//投放区离开时触发

e.preventDefault();//阻止浏览器默认行为
}
one.ondrop=function(e){//放入投放区时时触发


e.preventDefault();//阻止浏览器默认行为
one.appendChild(two);
}


two.ondragstart=function(e){
//拖拽时带入的数据
e.dataTransfer.setData("data","123");
$("#one").html("开始");

one.ondrop=function(e){//放入投放区时时触发


e.preventDefault();//阻止浏览器默认行为
one.appendChild(two);
var val = e.dataTransfer.getData("data")//接受拖进来的数据
$("#one").append();
}












<style>
 #box{
  width:200px;height:200px;border:1px solid red;
 }
 #con{
 width:200px;height:200px;border:1px solid blue;list-style:none;padding:0;margin:0;
 }
 li{
   width:150px;height:30px;margin:5px 0;background:#ccc;line-height:30px;text-align:center;
list-style:none;
 }
</style>
<script>
  window.onload=function  () {
   var box=document.getElementById("box");
   var con=document.getElementById("con");
   var lis=document.getElementsByTagName("li");
   for (var i=0; i<lis.length; i++) {
    lis[i].draggable=true;
lis[i].flag=false;
lis[i].ondragstart=function  () {
this.flag=true;
}
lis[i].ondragend=function  () {
this.flag=false;
}
   }


   box.ondragenter=function  (e) {
     e.preventDefault();
   }
   box.ondragover=function  (e) {
     e.preventDefault();
   }
   box.ondragleave=function  (e) {
     e.preventDefault();
   }
   box.ondrop=function  (e) {
     for (var i=0; i<lis.length; i++) {
  if(lis[i].flag){
    box.appendChild(lis[i]);
  }
     }
     e.preventDefault();
   }




  con.ondragenter=function  (e) {
     e.preventDefault();
   }
   con.ondragover=function  (e) {
     e.preventDefault();
   }
   con.ondragleave=function  (e) {
     e.preventDefault();
   }
   con.ondrop=function  (e) {
     for (var i=0; i<lis.length; i++) {
  if(lis[i].flag){
    con.appendChild(lis[i]);
  }
     }
     e.preventDefault();
   }
  }
</script>
</head>


<body>
<div id="box">
</div>
<ul id="con">
<li>后盾网php</li>
<li>后盾网js</li>
<li>后盾网html5</li>
<li>后盾网css3</li>
</ul>
</body>
</html>
})

0 0