移动div代码 - 每次我点击右边的一个，它会自动重新定位到左边

我有一个JavaScript代码，我已经合并为控制两个不同的移动div id。左边的一个很好，因为起点是左上角;然而，每当我尝试移动它时，页面右侧的那个会变得混乱。这是在JavaScript代码中的东西吗？我该如何解决？移动div代码 - 每次我点击右边的一个，它会自动重新定位到左边

HTML

<div id="fm1" style="left: 0; top: 25px;" onMouseDown="dragStart(event, 'fm1')";> 
    <p>Site Editor</p> 
<a href="#">Add a page</a> 
<a href="#">Change page order</a> 
<a href="#">Change colors</a> 
</div> 

<div id="fm2" style="right: 0; top: 25px;" onMouseDown="dragStart(event, 'fm2')";> 
    <p>Page Editor</p> 
<a href="#">Change Layout</a> 
<a href="#">Change Page Name</a> 
<a href="#">Password Protect</a> 
</div>

CSS

#fm1, #fm2 { 
width: 160px; 
position: fixed; 
background-color: #000; 
font-family: Tahoma, Geneva, sans-serif; 
font-size: 14px; 
text-align: center; 
font-weight: bold; 
color: #FFF; 
cursor: move; 
z-index: 999999999; 
} 
#fm1 a, #fm2 a { 
float: left; 
display: block; 
width: 160px; 
height: 25px; 
font-weight: bold; 
text-align: center; 
color: #fff; 
background: #000; 
border-top: 1px solid #fff; 
} 
#fm1 a:hover, #fm2 a:hover { background: #1e7c9a; }

的JavaScript

function getID(id) 
    { 
     return document.getElementById(id); 
    } 
    // Global object to hold drag information. 
    var dragObj = new Object(); 
    function dragStart(event, id) { 
     var x, y; 
     dragObj.elNode = getID(id); 
     // Get cursor position with respect to the page. 
     try { 
     x = window.event.clientX + document.documentElement.scrollLeft 
      + document.body.scrollLeft; 
     y = window.event.clientY + document.documentElement.scrollTop 
      + document.body.scrollTop; 
     } 
     catch (e) { 
     x = event.clientX + window.scrollX; 
     y = event.clientY + window.scrollY; 
     } 
    // Save starting positions of cursor and element. 
    dragObj.cursorStartX = x; 
     dragObj.cursorStartY = y; 
     dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10); 
     dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10); 
     if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0; 
     if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0; 
     // Capture mousemove and mouseup events on the page 
     try { 
     document.attachEvent("onmousemove", dragGo); 
     document.attachEvent("onmouseup", dragStop); 
     window.event.cancelBubble = true; 
     window.event.returnValue = false; 
     } 
     catch (e) { 
     document.addEventListener("mousemove", dragGo, true); 
     document.addEventListener("mouseup", dragStop, true); 
     event.preventDefault(); 
     } 
    } 
    function dragGo(event) { 
    var x, y; 
    // Get cursor position with respect to the page. 
    try { 
     x = window.event.clientX + document.documentElement.scrollLeft 
      + document.body.scrollLeft; 
     y = window.event.clientY + document.documentElement.scrollTop 
      + document.body.scrollTop; 
     } 
     catch (e) { 
     x = event.clientX + window.scrollX; 
     y = event.clientY + window.scrollY; 
     } 
     // Move drag element by the same amount the cursor has moved. 
     var drLeft = (dragObj.elStartLeft + x - dragObj.cursorStartX); 
     var drTop = (dragObj.elStartTop + y - dragObj.cursorStartY); 
     if (drLeft > 0) 
     { 
     dragObj.elNode.style.left = drLeft + "px"; 
     } 
     else 
     { 
     dragObj.elNode.style.left = "0px"; 
     } 
     if (drTop > 0) 
     { 
     dragObj.elNode.style.top = drTop + "px"; 
     } 
     else 
     { 
     dragObj.elNode.style.top = "0px"; 
     } 
     try { 
     window.event.cancelBubble = true; 
     window.event.returnValue = false; 
     } 
     catch(e){ 
     event.preventDefault(); 
     } 
    } 
    function dragStop(event) { 
     // Stop capturing mousemove and mouseup events. 
     try { 
     document.detachEvent("onmousemove", dragGo); 
     document.detachEvent("onmouseup", dragStop); 
     } 
     catch (e) { 
     document.removeEventListener("mousemove", dragGo, true); 
     document.removeEventListener("mouseup", dragStop, true); 
     } 
    }

注意：一旦权重新定位的一个，我有充分的控制，以移动它。我只是不希望它在第一次移动的时候自动跳到页面的左侧。

来源

2013-03-20 kdjernigan

你可以建立一个的jsfiddle？ – 2013-03-20 18:30:23

http://jsfiddle.net/AZk4J/ - 但是，它在jsfiddle中根本没有工作（我从来没有设置过JsFiddle）。它可以随我的网站上的代码移动。唯一的问题是发生在我的问题与正确的div的问题。 – kdjernigan 2013-03-20 18:52:28

<div id="fm2" style="right: 0;

您与right定位您的DIV，所以left是不确定的，style.left是空的。

dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10); 
    if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;

在你的代码只关心left，并因为它是不确定的，你从0开始，

来源

2013-03-20 19:35:28 zeroflagL

移动div代码 - 每次我点击右边的一个，它会自动重新定位到左边

回答

相关问题