html5拖拽

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

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

$(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();
}

0 0