html4拖拽,基于html5的拖拽(及基于html4的拖拽)

效果：

代码：

基于html5的拖拽

*,html,body{border:0;margin:0;padding:0;width:100%;height:100%}

div{

width:150px;height:200px;background:#ABCEDF;float:left;

}

h4{

width:150px;height:40px;text-align:center;vertical-align:middle;line-height:40px;

}

h4:hover{

width:146px;height:36px;background:yellow;border:2px solid #ABCEDF;cursor:pointer

}

span{

width:150px;height:200px;background:#FEDCBA;float:right;

}

拖拽一

拖拽二

拖拽三

拖拽四

拖拽五

window.onload = function(){

var div = document.getElementsByTagName("div")[0];

var span = document.getElementsByTagName("span")[0];

var h4s = div.childNodes;

for(i=0;i

var h4 = h4s[i];

h4.draggable = true;//使h4可拖拽

/*以下是h4的拖拽事件*/

h4.ondragstart = function(e){

console.log("开始"+this.innerHTML);

e.dataTransfer.setData("Text",this.innerText);

console.log(e);

var h4 = e.target;

h4.flag = true;

}

h4.ondrag = function(e){

console.log("移动"+this.innerText);

}

h4.ondragend = function(e){

console.log("结束"+this.innerHTML);

var h4 = e.target;

h4.flag = false;

}

}

/*以下方法用于实现h4放入span中*/

span.ondragenter = function(e){

e.preventDefault();//阻止默认事件

console.log(e.dataTransfer.getData("Text")+"进入");

}

span.ondragover = function(e){

e.preventDefault();//阻止默认事件

console.log("悬浮");

}

span.ondragleave = function(e){

e.preventDefault();//阻止默认事件

console.log("离开");

}

span.ondrop = function(e){

e.preventDefault(); //阻止默认事件

var h4s = div.childNodes;

for(var j=0;j

if(h4s[j].flag==true){

//var span = e.target;

//var span = this;

span.appendChild(h4s[j]);

}

}

console.log(e.dataTransfer.getData("Text")+"落下");

}

/*以下方法用于实现h4放入div中*/

div.ondragenter = function(e){

//e.preventDefault();

}

div.ondragover = function(e){

e.preventDefault();

}

div.ondragleave = function(e){

//e.preventDefault();

}

div.ondrop = function(e){

e.preventDefault();

var h4s = span.childNodes;

for(var k=0;k

if(h4s[k].flag==true){

div.appendChild(h4s[k]);

}

}

}

}

基于html4的拖拽：

基于html4的拖拽

#drag{

width:100px;height:100px;background:#ABCDEF;position:absolute;

display:block;float:left;

text-align:center;vertical-align:middle;line-height:100px;

cursor:pointer;

}

请拖拽我

window.onload = function(){

var drag = document.getElementById("drag");

drag.onmousedown = function(){

drag.onmousemove = function(e){

//console.log(e.clientX+"-"+drag.style.width);

drag.style.left = (e.clientX - 50)+"px";

drag.style.top = (e.clientY - 50)+"px";

}

}

drag.onmouseup = function(e){

drag.style.left = (e.clientX - 50)+"px";

drag.style.top = (e.clientY - 50)+"px";

drag.onmousemove = null;

}

}