可以拖動的div 實現(xiàn)代碼第1/2頁

2019-11-21 01:18:42

字體：大中小

供稿：網(wǎng)友

要實現(xiàn)div的任意拖動，我們不妨分析一下整個過程。
當鼠標點擊div時，觸發(fā)一個事件，讓div的位置屬性（left，top）隨著鼠標位置變化而變化，當鼠標釋放后，div的位置屬性就用了鼠標釋放時的位置。
鼠標點擊時觸發(fā)事件是很容易做到的，只要在div的標簽里加上onmouseclick就可以了，現(xiàn)在我們要解決的問題是如何讓div的位置隨著鼠標的位置變化而變化。
雖然這可能是一個很簡單的推理過程，不過還是羅嗦點說清楚吧。div的left和top是div左上角的坐標，當我們把鼠標移到div中點擊的時候，無疑鼠標的坐標和div的坐標是不一致的，這時候如果我們簡單的讓div的坐標等于鼠標的坐標，那么看起來的效果就不是那么完美了，所以我們先要得到鼠標的坐標和div坐標的差，然后在鼠標移動到的時候，在鼠標坐標上減去這個差來得到div的坐標（如果不太明白，那就先補習一下網(wǎng)頁的基礎知識）。
接下來的事情就簡單了，當鼠標移動的時候，我們不斷的計算得到div的坐標，并改變，在鼠標釋放的時候，這個事件就被移除。
整個js函數(shù)如下：
function beginDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
document.addEventListener(”mousemove”,moveHandler,true);
document.addEventListener(”mouseup”,upHandler,true);
//document.addEventListener(”mouseout”,upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent(”onmousemove”,moveHandler);
document.attachEvent(”onmouseup”,upHandler);
//document.attachEvent(”onmouseout”,upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e)
{
　　if (!e) e=window.event; //如果是IE的事件對象，那么就用window.event
　　//全局屬性，否則就用DOM二級標準的Event對象。
elementToDrag.style.left=(e.clientX-deltaX)+”px”;
elementToDrag.style.top=(e.clientY-deltaY)+”px”;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener(”mouseup”,upHandler,true);
document.removeEventListener(”mousemove”,moveHandler,true);}
else
{
document.detachEvent(”onmouseup”,upHandler);
document.detachEvent(”onmousemove”,moveHandler);}
}
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}

12 下一頁閱讀全文

上一篇：利用JQuery為搜索欄增加tag提示

下一篇：web 頁面分頁打印的實現(xiàn)