使用jQuery可拖动和可调整大小来绘制元素

我想弄清楚如何使用可拖动和可调整大小的jQuery库来绘制div。我发现this 这是相当不错的，但我真的希望这个功能与所提到的库一起工作。为了更具体一些，我希望能够创建一个可拖动的元素并将其拖动（调整大小）在一个镜头中。这可能吗？使用jQuery可拖动和可调整大小来绘制元素

编辑：也许我需要做一些事情，当'创建'事件发生在可拖动或可调整大小？我是否需要以某种方式将鼠标放在可调整的角落里？可调整大小似乎不会打开，直到您实际抬起鼠标，然后按下并拖动调整大小角。这里是我现在的代码：

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

来源

2012-10-06 Roman Epicnerd Sharf

请参阅http://stackoverflow.com/a/19768036/1300910 –

好吧，我终于明白了。我使用selectable（）按照@ lunchmeat317的建议。在可选择的事件中，我能够捕获鼠标位置：“开始”和“停止”创建一个具有正确宽度和高度以及位置的div。这里的jsfiddle

来源

2012-10-09 19:28:00

顺便说一句，用这种方法，你需要注意鼠标拖动到哪个方向并添加额外的逻辑。在小提琴中，您可以向右或向左拖动鼠标，它将创建一个div，但向上拖动不起作用，因为它尚无逻辑。 –

很高兴为您工作。 –

拖动和resizable div可以很容易地与jquery ui library。

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

<!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-06 15:05:13 JvdBerg

谢谢Jvd。然而这不是我遇到的问题。我需要能够对这些文件进行“拖拽创建”，而不是在文档准备就绪时出现它们。你知道这可以做到吗？ –

你想在页面启动时隐藏div，并在某个事件中显示它吗？ – JvdBerg

不，我想动态创建它，例如通过append（）函数。 –

我想不同的方法处理这一点 - 我会使用类似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）。不过，这可能会帮助你走上正确的道路。祝你好运。

来源

2012-10-06 16:14:17

我认为你是对的。可选择看起来很有希望。我现在正在玩它，但我仍然无法找到它ou：\ –

使用jQuery可拖动和可调整大小来绘制元素

回答

相关问题