使用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可拖動和可調整大小來繪製元素

回答

相關問題