0

2 つの異なる可動 div ID を制御するために組み込んだ JavaScript コードがあります。開始が左上であるため、左側のものは正常に機能します。ただし、ページの右側にあるものは、移動しようとするたびにめちゃくちゃになります。それは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);
      }
    }

注: 適切な再配置の 1 つが完了したら、完全に制御して移動できます。初めて移動した瞬間にページの左側に自動的にジャンプしたくないだけです。

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 に答える