在javascript中拖動並替換DIV

我想在JavaScript中執行DRAG和REPLACE div。例如：我有2個Div。如果我拖動第二個分區並將其放置在第一個分區，則自動將第一個分區替換爲第二個分區。其中我現在有代碼是重疊..在javascript中拖動並替換DIV

我的aspx頁面..

<body> 
<div id="container"> 
    <div id="info"> 
     Start drag process...</div> 
    <div id="square" style="position: relative; width: 60px; height: 60px; background: #990033; 
     border: 2px solid #3399CC;"> 
    </div> 
     <div id="Div1" style="position: relative; width: 60px; height: 60px; background: #efe; 
     border: 2px solid #3399CC;"> 
    </div> 
    <script type="text/javascript"> 

     var square = DragHandler.attach(document.getElementById('square')); 

     var Div1 = DragHandler.attach(document.getElementById('Div1')); 


    </script> 
</div>

我的js文件...

/**

* *跨瀏覽器拖動處理程序 * http://www.webtoolkit.info/ * **/

VAR DragHandler = {

// private property. 
_oElem : null, 


// public method. Attach drag handler to an element. 
attach : function(oElem) { 
    oElem.onmousedown = DragHandler._dragBegin; 

    // callbacks 
    oElem.dragBegin = new Function(); 
    oElem.drag = new Function(); 
    oElem.dragEnd = new Function(); 

    return oElem; 
}, 


// private method. Begin drag process. 
_dragBegin : function(e) { 
    var oElem = DragHandler._oElem = this; 

    if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; } 
    if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; } 

    var x = parseInt(oElem.style.left); 
    var y = parseInt(oElem.style.top); 

    e = e ? e : window.event; 
    oElem.mouseX = e.clientX; 
    oElem.mouseY = e.clientY; 

    oElem.dragBegin(oElem, x, y); 

    document.onmousemove = DragHandler._drag; 
    document.onmouseup = DragHandler._dragEnd; 
    return false; 
}, 


// private method. Drag (move) element. 
_drag : function(e) { 
    var oElem = DragHandler._oElem; 

    var x = parseInt(oElem.style.left); 
    var y = parseInt(oElem.style.top); 

    e = e ? e : window.event; 
    oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px'; 
    oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px'; 

    oElem.mouseX = e.clientX; 
    oElem.mouseY = e.clientY; 

    oElem.drag(oElem, x, y); 

    return false; 
}, 


// private method. Stop drag process. 
_dragEnd : function() { 
    var oElem = DragHandler._oElem; 

    var x = parseInt(oElem.style.left); 
    var y = parseInt(oElem.style.top); 

    oElem.dragEnd(oElem, x, y); 

    document.onmousemove = null; 
    document.onmouseup = null; 
    DragHandler._oElem = null; 
}

}

如何做到這一點...

來源

2012-03-01 RobinHood

這裏是識別部分：

for (var i = 0; i < document.getElementsByClassName("draggable").length; i++) { 
    var elem = document.getElementsByClassName("draggable")[i]; 

    if (elem != oElem) { 

     if (oElem.offsetTop + parseInt(oElem.style.height) > elem.offsetTop 
      && oElem.offsetTop < elem.offsetTop + parseInt(elem.style.height)) { 
      if (oElem.offsetLeft + parseInt(oElem.style.width) > elem.offsetLeft 
       && oElem.offsetLeft < elem.offsetLeft + parseInt(elem.style.width)) { 
       alert("overlapping"); 
      } 
     } 
    } 
}

你的div需要有一個「可拖動「類。演示：http://jsfiddle.net/DqJrV/

來源

2012-03-01 08:39:25

嗨，這個概念很新。請提供我的源代碼格式.. – RobinHood 2012-03-01 08:43:47

您能爲我們創建一個關於http://jsfiddle.net/的工作演示嗎？編輯：Nevermind已經創建了一個，我會看看。 – 2012-03-01 08:46:42

@ elias94xx，這裏是jsfiddle演示http://jsfiddle.net/umeshpatil86/KwB4P/ – 2012-03-01 08:52:07

在javascript中拖動並替換DIV

回答

相關問題