我试图弄清楚如何使用可拖动和可调整大小的 jQuery 库来绘制 div。我找到了this 这非常好，但我真的希望这个功能可以与上述库一起使用。更具体地说，我希望能够创建一个可拖动的元素并一次拖动（调整大小）它。这可能吗？
编辑：当“创建”事件以可拖动或可调整大小发生时，也许我需要做点什么？我需要以某种方式将鼠标放在可调整大小的角落上吗？在您实际抬起鼠标然后在调整大小角上按下并拖动之前，调整大小似乎不会打开。这是我现在拥有的代码：
$('.container').live('mousedown', function(){
$('.container').append('<div class="gen-box"></div>');
$('.gen-box').resizable().draggable();
});
【问题讨论】：
标签： javascript jquery-ui jquery-ui-draggable jquery-ui-resizable
我会以不同的方式处理这个问题——我会使用 jQueryUI selectable 组件之类的东西，它已经提供了装箱方法。它有start 和stop 事件，它们暴露了鼠标坐标。在此基础上，您可以使用所需的鼠标坐标在stop 事件上创建一个 div，然后将 resizable 和 draggable 添加到该 div。
反正我就是这么干的。
您的另一个选择是完全按照您正在做的事情做，并尝试使用 jQuery trigger()，如下所示：
$('.container').live('mousedown', function(){
$('.container').append('<div class="gen-box"></div>');
$('.gen-box').resizable().draggable();
$('.gen-box').trigger('mousedown'); // This may activate the resize ability, but you may need to target the resize handle, instead of the full div.
});
这似乎应该可行，但可能存在一些问题（我从 2008 年遇到了一个线程 here）。不过，这可能有助于您走上正确的道路。祝你好运。
【讨论】：
好吧，我终于想通了。我根据@lunchmeat317 的建议使用了 selectable() 。我能够在可选事件期间捕获鼠标位置：“开始”和“停止”创建一个具有正确宽度、高度和位置的 div。这是jsfiddle
【讨论】：
使用jquery ui library 可以轻松制作拖动和调整大小的 div。
你可以试试这个例子。下载最新的 JQuery 和 JQuery ui 库并调整示例中的源路径。要调整大小，您可以使用 resize 函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<script type="text/javascript" src="/media/js/jquery-latest.js"></script>
<script type="text/javascript" src="/media/js/jquery-ui-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( '#test' ).draggable();
});
</script>
</head>
<body>
<div id="test" style="width: 100px; height: 50px; background-color: red;" >
<p>Drag me</p>
</div>
</body>
</html>
【讨论】：