Question

我尝试在右键单击保持并拖动时调整div可调整大小。

我想要的是鼠标右键单击以在拖动时更改div的尺寸。

我遇到的问题似乎是div的先前大小没有更新在第二次尝试拖动div时，它从之前的状态开始。

我的代码：

$(document).ready(function() {
  // right click event
  $("#displayWindow")
    // when the mouse is pressed, the div is appended to the displayWindow
    .mousedown(function(e) {
      if (e.button == 2) {
        $('#div1').remove();
        // append the div start at the location that we click
        $("#displayWindow").append("<div id='div1'></div>");
        // get the coordinate where we clicked and set the div begin with that position
        var clickedX = e.pageX;
        var clickedY = e.pageY;
        $('#div1').css('top', clickedY);
        $('#div1').css('left', clickedX);

        // holding on the mouse button, change the size of the div
        $("#displayWindow").on("mousemove", function(e) {
          if (e.button == 2) {
            var mouseOnX = e.pageX;
            var mouseOnY = e.pageY;
            // allow user drag the selection box in 4 different direction
            if (mouseOnX > clickedX && mouseOnY > clickedY) {
              $('#div1').css('top', clickedY);
              $('#div1').css('left', clickedX);
              $('#div1').css('height', mouseOnY - clickedY);
              $('#div1').css('width', mouseOnX - clickedX);
            } else if (clickedX > mouseOnX && mouseOnY > clickedY) {
              $('#div1').css('top', clickedY);
              $('#div1').css('left', mouseOnX);
              $('#div1').css('height', mouseOnY - clickedY);
              $('#div1').css('width', clickedX - mouseOnX);
            } else if (clickedX > mouseOnX && clickedY > mouseOnY) {
              $('#div1').css('top', mouseOnY);
              $('#div1').css('left', mouseOnX);
              $('#div1').css('height', clickedY - mouseOnY);
              $('#div1').css('width', clickedX - mouseOnX);
            } else if (mouseOnX > clickedX && clickedY > mouseOnY) {
              $('#div1').css('top', mouseOnY);
              $('#div1').css('left', clickedX);
              $('#div1').css('height', clickedY - mouseOnY);
              $('#div1').css('width', mouseOnX - clickedX);
            }
          }
        }); // end on, while we move the mouse
        return false;
      }
      return true;
    });

  // when clicked again, the menu fade out, and the div disappear
  $(document).click(function(e) {
    if (e.button == 0) {
      // remove the selection box div
      $('#div1').remove();
    }
  });

  // prevent the default contextmenu on the display window
  document.getElementById('displayWindow').oncontextmenu = function() {
    return false;
  }

}); // end ready

#displayWindow {
  background-color: white;
  border: 1px solid;
  height: 600px;
  width: 800px;
}
#div1 {
  background-color: lightgreen;
  position: absolute;
  opacity: 0.3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="displayWindow">
  <svg height="130" width="150" style="position:absolute; left:200; top:200;" class="ui-widget-content">
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text>
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue">
  </svg>
</div>

Answer 1

只需在if (e.button == 2) {内添加。要重置之前添加的元素。

$('#div1').removeAttr('style').remove();

// right click event
  $("#displayWindow")
    // when the mouse is pressed, the div is appended to the displayWindow
    .mousedown(function(e) {
      if (e.button == 2) {
        $('#div1').removeAttr('style').remove();
        // append the div start at the location that we click
        $("#displayWindow").append("<div id='div1'></div>");
        // get the coordinate where we clicked and set the div begin with that position
        var clickedX = e.pageX;
        var clickedY = e.pageY;
        $('#div1').css('top', clickedY);
        $('#div1').css('left', clickedX);

        // holding on the mouse button, change the size of the div
        $("#displayWindow").on("mousemove", function(e) {
          if (e.button == 2) {
            var mouseOnX = e.pageX;
            var mouseOnY = e.pageY;
            // allow user drag the selection box in 4 different direction
            if (mouseOnX > clickedX && mouseOnY > clickedY) {
              $('#div1').css('top', clickedY);
              $('#div1').css('left', clickedX);
              $('#div1').css('height', mouseOnY - clickedY);
              $('#div1').css('width', mouseOnX - clickedX);
            } else if (clickedX > mouseOnX && mouseOnY > clickedY) {
              $('#div1').css('top', clickedY);
              $('#div1').css('left', mouseOnX);
              $('#div1').css('height', mouseOnY - clickedY);
              $('#div1').css('width', clickedX - mouseOnX);
            } else if (clickedX > mouseOnX && clickedY > mouseOnY) {
              $('#div1').css('top', mouseOnY);
              $('#div1').css('left', mouseOnX);
              $('#div1').css('height', clickedY - mouseOnY);
              $('#div1').css('width', clickedX - mouseOnX);
            } else if (mouseOnX > clickedX && clickedY > mouseOnY) {
              $('#div1').css('top', mouseOnY);
              $('#div1').css('left', clickedX);
              $('#div1').css('height', clickedY - mouseOnY);
              $('#div1').css('width', mouseOnX - clickedX);
            }
          }
        }); // end on, while we move the mouse
        return false;
      }
      return true;
    });

  // when clicked again, the menu fade out, and the div disappear
  $(document).click(function(e) {
    if (e.button == 0) {
      // remove the selection box div
      $('#div1').remove();
    }
  });

  // prevent the default contextmenu on the display window
  document.getElementById('displayWindow').oncontextmenu = function() {
    return false;
  }

#displayWindow {
  background-color: white;
  border: 1px solid;
  height: 400px;
  width: 800px;
}
#div1 {
  background-color: lightgreen;
  position: absolute;
  opacity: 0.3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="displayWindow">
  <svg height="130" width="150" style="position:absolute; left:200; top:200;" class="ui-widget-content">
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text>
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" fill="none" stroke="blue" />
  </svg>
</div>

右键单击保持并拖动更改div大小

1 个答案: