在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

回答

相关问题