2

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

编辑：当“创建”事件以可拖动或可调整大小发生时，也许我需要做点什么？我需要以某种方式将鼠标放在可调整大小的角落上吗？在您实际抬起鼠标然后在调整大小角上按下并拖动之前，调整大小似乎不会打开。这是我现在拥有的代码：

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

3 回答 3

4

我会以不同的方式处理这个问题——我会使用 jQueryUIselectable组件之类的东西，它已经提供了装箱方法。它具有暴露鼠标坐标的事件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 年开始在这里遇到一个线程）。不过，这可能有助于您走上正确的道路。祝你好运。

于 2012-10-06T16:14:17.567 回答
1

好的，我终于想通了。我根据@lunchmeat317 的建议使用了 selectable() 。我能够在可选事件期间捕获鼠标位置：“开始”和“停止”创建一个具有正确宽度、高度和位置的 div。这是jsfiddle

于 2012-10-09T19:28:00.970 回答
0

使用jquery ui 库可以轻松实现拖动和调整大小的 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>
于 2012-10-06T15:05:13.790 回答