0

我有一个 javascript 代码，我已经合并它来控制两个不同的可移动 div id。左边的那个很好，因为起点在左上角；但是，每次我尝试移动页面右侧的页面时，它都会变得混乱。它是javascript代码中的东西吗？我该如何解决？

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);
      }
    }

注意：一旦正确的重新定位之一，我就可以完全控制它的移动。我只是不希望它在第一次移动时自动跳转到页面的左侧。

4

1 回答 1

0

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

您将 div 定位为right，因此left未定义且style.left为空。

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

在您的代码中，您只关心left它，因为它是未定义的，所以您从 0 开始。

于 2013-03-20T19:35:28.610 回答