#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.οndragstart=function(){//拖拽开始时执行
$("#one").html("开始");
}
two.οndrag=function(){//拖拽过程中执行
html+="移动";
$("#one").html(html);
}
two.οndragend=function(){//拖拽结束时执行
html+="完成";
$("#one").html(html);
}
----------------------------投放区事件------------------------------------
one.οndragenter=function(e){//投放区进入时触发
e.preventDefault();//阻止浏览器默认行为
}
one.οndragοver=function(e){//投放区移动时触发
e.preventDefault();//阻止浏览器默认行为
}
one.οndragleave=function(e){//投放区离开时触发
e.preventDefault();//阻止浏览器默认行为
}
one.οndrοp=function(e){//放入投放区时时触发
e.preventDefault();//阻止浏览器默认行为
one.appendChild(two);
}
two.οndragstart=function(e){
//拖拽时带入的数据
e.dataTransfer.setData("data","123");
$("#one").html("开始");
}
one.οndrοp=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.οnlοad=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].οndragstart=function () {
this.flag=true;
}
lis[i].οndragend=function () {
this.flag=false;
}
}
box.οndragenter=function (e) {
e.preventDefault();
}
box.οndragοver=function (e) {
e.preventDefault();
}
box.οndragleave=function (e) {
e.preventDefault();
}
box.οndrοp=function (e) {
for (var i=0; i<lis.length; i++) {
if(lis[i].flag){
box.appendChild(lis[i]);
}
}
e.preventDefault();
}
con.οndragenter=function (e) {
e.preventDefault();
}
con.οndragοver=function (e) {
e.preventDefault();
}
con.οndragleave=function (e) {
e.preventDefault();
}
con.οndrοp=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>
})