右鍵單擊並更改並拖動div大小

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>