Question

我试图弄清楚如何使用可拖动和可调整大小的jQuery库绘制div。我找到了this 这是非常好的，但我真的希望这个功能与上面提到的库一起使用。更具体地说，我希望能够创建一个可拖动的元素，并一次性拖动（调整大小）。这可能吗？

编辑：当'create'事件发生在可拖动或可调整大小时，我可能需要做些什么？我是否需要以某种方式将鼠标放在可调整大小的角落？在您实际抬起鼠标然后按住并调整调整大小角落之前，可调整大小似乎不会打开。这是我现在的代码：

 $('.container').live('mousedown', function(){
    $('.container').append('<div class="gen-box"></div>');
    $('.gen-box').resizable().draggable();
 });

Answer 1

我会以不同的方式处理 - 我会使用类似jQueryUI selectable组件，它已经提供了装箱方法。它有start和stop个事件，可以显示鼠标坐标。基于此，您可以使用所需的鼠标坐标在stop事件上创建div，然后为该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）。不过，这可能有助于您走上正确的道路。祝你好运。

Answer 2

好的，我终于明白了。我根据@ lunchmeat317的建议使用了selectable（）。我能够在可选择的事件中捕捉鼠标位置：'start'和'stop'创建一个具有正确宽度，高度和位置的div。这是jsfiddle

Answer 3

使用jquery ui library可以轻松拖动和调整大小的div。

你可以尝试这个例子。下载最新的JQuery和JQuery ui libs并调整示例中的源路径。要调整大小，可以使用调整大小功能。

<!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>

使用jQuery draggable和resizable来绘制元素

3 个答案: