js拖拽功能

html

css*
.mod 
.mod .hd 
.mod .corner 
jsvar mod=document.getelementbyid('mod');
var hd=document.getelementbyid('hd');
var corner=document.getelementbyid('corner');
function
addevent(obj,type,fn)
function
page()
else
if(document.compatmode==='css1compat') 
else
return
}function
move(e)
else
if(left>pagewidth-mod.offsetwidth)
if(top<0)
else
if(top>pageheight-mod.offsetheight)
mod.style.left=left+'px';
mod.style.top=top+'px';
}var
offsetleft,offsettop;
addevent(hd,'mousedown', function
(e) )
});var
cornerleft,
cornertop;
function
cornermove(e)
if(top<=80)
corner.style.left=left+'px';
corner.style.top=top+'px';
mod.style.width=left+20+'px';
mod.style.height=top+20+'px';
}addevent(corner,'mousedown', function
(e) )
});

第二種拖拽

<
div 
class
="dragable"
>
div>
css*
.dragable 
js

function dragdrop()

break;
case "mousemove":
if(draging)
if(left > windowrect().winwidth-draging.offsetwidth)
if(top <= 0)
if(top>=windowrect().winheight-draging.offsetheight)
draging.style.left=left+'px';
draging.style.top=top+'px';
}break;
case "mouseup":
draging=null;
break;}}
return ,
disable: function () }}
function addevent()
dragdrop().enable();
function windowrect()*/
if(document.compatmode=='css1compat')else
return 
}ps:target目標會在移動中從draging變為document物件，需要注意

通過拖拽實現的碰撞檢測 js

window.onload = function
() 
//隨機功能
btn.onclick = function
() );
for(var i = 0; i < htmlarr.length; i++)
return
false
; }
//拖拽
function
dragcollide(dragele) ;
this.style.zindex = '2';
//建立佔位節點
var clone = document.createelement('div');
clone.classname = 'clone';
clone.style.left = this.offsetleft + 'px';
clone.style.top = this.offsettop + 'px';
//記錄初始位置
var oldl =dragele.offsetleft;
var oldt =dragele.offsettop;
document.onmousemove = function
(ev) 
};document.onmouseup = function
() 
else
box.removechild(clone);
document.onmousemove = null
; document.onmouseup = null
; isie &&dragele.releasecapture()
};isie &&dragele.setcapture();
return
false
; }
}//獲取距離最近的元素
function
getcollele(dragele) 
li[i].style.margintop = '';
li[i].style.marginleft = '';
li[i].style.bordercolor = '#ccc';
}return
minele;
}}//
碰撞檢測，並返回中心點距離
function
collide(dragele, testele) 
else
}參考http:

js拖拽功能元件例項

本例子是基於vue編寫，拖拽元件採用的是vue draggable 左側列表不能排序，不接收其它列表資料。右側列表接收左側的拖動資料，並轉殖左側拖動資料的副本到本身列表中。右側列表支援排序 npm install 安裝依賴 npm run serve 啟動服務 貼出 hello.vue fluid ...

使用js實現拖拽功能

通過監聽mousemove和mouseup事件實現拖拽功能 var screenwidth document.documentelement.clientwidth var screenheight document.documentelement.clientheight document mou...

js拖拽功能的實現

如果要設定物體拖拽，那麼必須使用三個事件，並且這三個事件的使用順序不能顛倒。1.onmousedown 滑鼠按下事件 2.onmousemove 滑鼠移動事件 3.onmouseup 滑鼠抬起事件 拖拽的基本原理就是根據滑鼠的移動來移動被拖拽的元素。滑鼠的移動也就是x y座標的變化 元素的移動就是s...