Question

是否可以制作具有固定表面区域的可调整大小且可拖动的div？

示例：我有一个方形div，表面积为10000px²（100 x 100px），然后我将宽度（使用鼠标在角落或边缘上）更改为50px，高度现在应自动更改为200px所以表面积保持在10000px²。

然后我想在页面上拖动它，再次调整大小等等......

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" 

href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-

ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-

ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; border: 

1px solid;}
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable().resizable();
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>


</body>
</html>

好的，所以这里是代码，我有可调整大小和可拖动的div，但现在我需要固定的表面区域（例如10000px²），如前所述...

Answer 1

您可以使用jquery的UI来完成所有这些操作。

使用http://jqueryui.com/draggable/允许拖动，使用http://jqueryui.com/resizable/来调整大小

使用resize event，您可以让jquery修改div，使其符合您想要的任何高度/宽度规则。

Answer 2

试试这个：

(function(draggable) {
    var elm = document.getElementById(draggable);
    elm.onmousedown = drag;

    function stop() {
        document.onmouseup   = null;
        document.onmousemove = null;
    }

    function drag(e) {
        if (e.target == elm) {
            var absX    = e.clientX;
            var absY    = e.clientY;
            var left    = parseInt(getComputedStyle(elm).left, 10);
            var top     = parseInt(getComputedStyle(elm).top, 10);
            var relX    = absX - left;
            var relY    = absY - top;

            document.onmouseup   = stop;
            document.onmousemove = function(e) {
                var absX    = e.clientX;
                var absY    = e.clientY;
                elm.style.left  = absX - relX  + "px";
                elm.style.top   = absY - relY  + "px";
            }
        }
    }
})("box");


(function(resizeable) {
    var elm     = document.getElementById(resizeable);
    var wHandler    = elm.childNodes[1];
    var hHandler    = elm.childNodes[3];
    wHandler.onmousedown    = resizeW;
    hHandler.onmousedown    = resizeH;

    function stop() {
        elm.style.cursor = "";
        document.body.style.cursor = "";
        document.onmouseup   = null;
        document.onmousemove = null;
    }

    var w       = 100;
    var h       = 100;
    var area    = w * h;

    function resizeW(e) {
        elm.style.cursor = "w-resize";
        document.body.style.cursor = "w-resize";
        var left    = parseInt(window.getComputedStyle(elm, null)["left"], 10);

        document.onmouseup   = stop;
        document.onmousemove = function(e) {
            var absX    = e.clientX;
            var width   = absX - left;
            var height  = area / width;
            elm.style.width     = width + "px";
            elm.style.height    = height + "px";
        }
    }

    function resizeH(e) {
        elm.style.cursor = "n-resize";
        document.body.style.cursor = "n-resize";
        var top     = parseInt(window.getComputedStyle(elm, null)["top"], 10);

        document.onmouseup   = stop;
        document.onmousemove = function(e) {
            var absY    = e.clientY;
            var height  = absY - top;
            var width   = area / height;
            elm.style.height    = height + "px";
            elm.style.width     = width + "px";
        }
    }
})("box");

Fiddle

虽然有一个小虫子，但我认为。无法修复它。当您调整宽度时，它没问题，但是当您调整高度，然后移动div时，它会滞后或w / e。检查小提琴。除此之外，它的工作正常。

具有固定表面积的可调整大小和可拖动的div

2 个答案: