Fatal编程技术网
  • javascript/
  • Javascript 具有固定表面积的可调整大小和可拖动div

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

javascript jquery html css jquery-ui

Javascript 具有固定表面积的可调整大小和可拖动div,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,是否可以制作具有固定表面积的可调整大小和可拖动的div 示例：我有一个表面积为10000px²（100x100px）的正方形div，然后我将宽度（鼠标在角落或边缘）更改为50px，高度现在应自动更改为200px，以便表面积保持10000px² 然后我想把它拖到整个页面，重新调整大小等等 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQ

是否可以制作具有固定表面积的可调整大小和可拖动的div

示例：我有一个表面积为10000px²（100x100px）的正方形div，然后我将宽度（鼠标在角落或边缘）更改为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>


jQuery UI可拖动-默认功能
#可拖动{宽度：100px；高度：100px；填充：0.5em；边框：
1px固体；}
$（函数（）{
$（“#可拖动”）.draggable（）.resizeable（）；
});
把我拖来拖去
好的，这是代码，我有可调整大小和可拖动的div，但现在我需要固定表面积（例如10000px²），正如我前面提到的…

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

用于允许拖动， 用于允许调整大小

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

尝试以下操作：

(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");

虽然有一个小错误，我想。无法修复它。当您调整宽度时，它是可以的，但是当您调整高度，然后移动div时，它会滞后或w/e。检查小提琴。除此之外，它工作正常。

您没有任何代码？发布一些html或css代码…否则很难帮助您；）我发现了这个，我可以使用它，但我不知道如何指定固定表面积零件。。我没有任何代码，当我发现如何做时，我会写它…你的代码工作正常：@APAD1。。。除了面积保持不变！我认为你应该用一些代码做一个例子。你能给我一个我需要的规则的例子吗？是的，有一个小错误，但它给出了窍门。但是处理程序超过了盒子的大小，不是吗？所以盒子的宽度和高度比我想象的小了3倍。这个盒子正好是100x100px。处理程序位于框内，绝对位于
位置。它们不会影响盒子。你可以改变它们的外观。好的，谢谢你，我把它们（opticaly）放在盒子外面，现在可以了，谢谢你的帮助：）