jQuery的 - 在DIV /或可排序元素內拖動元素

我有一個在其他div元素內拖動div的問題。jQuery的 - 在DIV /或可排序元素內拖動元素

HTML看起來像這樣：

<div id="grid"> 
    <div id="el1" style="width:300px"></div> 
    <div id="el2" style="width:100px"></div> 
    <div id="el3" style="width:100px"></div> 
    <div id="el4" style="width:100px"></div> 
</div>

所有的元素都是可拖動的，並有css樣式float:left;position:relative;。當我將el1拖到el3的位置時，它會起作用，但它當然會覆蓋el3元素。 draggin jquery draggable工作正常，但我想在此位置的HTML代碼中插入帶ID爲el1的div。

，這將是這樣的：

<div id...> 
    <div id="el2... 
    <div id="el3... 
    <div id="el1... 
    <div id="el4... 
</div>

我現在的問題是，這是一個網格。 el1的寬度爲'300'，寬度爲'100'。 Dragin el1到el3的地方應將el2,el3和el4替換爲el1和el1的位置以代替el2, el3, el4。

爲了得到這個行爲，我認爲我需要在el4之後移動div的HTML代碼。但如何確定哪個元素是最近的？

------- -------修訂

我的方式試圖使用排序......看到這裏http://jsfiddle.net/vwK5e/2/ 但是，如果你把紅色框在3號，紅色框將在第二行（正確），但數字4應該在第三位旁邊，因爲空白處。

TIA frgtv10

來源

2012-07-18 frgtv10

究竟是你的問題。我沒有閱讀過任何關於你的問題的內容，這並不是通過[jQuery UI Draggable]（http://jqueryui.com/demos/draggable/）覆蓋的。 – feeela 2012-07-18 10:35:24

我知道它沒有覆蓋。這就是爲什麼我要求解決方案:)我更新了我的問題。 – frgtv10 2012-07-18 10:46:34

參考http://jqueryui.com/demos/sortable/#display-grid

我想你想這樣的功能。

回答

A different kind of jquery sortable

來源

2012-07-18 10:52:03 jaychapani

我已經試過這個，但是如果你有不同尺寸的元素，它將不起作用。雖然可以排序，但我有空間問題。如果我像上面所描述的那樣移動它，則不會使用空白空間。你懂我的意思嗎？ – frgtv10 2012-07-18 11:25:05

請看看這裏和我的問題上面的評論（更新） - > http://jsfiddle.net/vwK5e/2/ – frgtv10 2012-07-18 11:44:49

看看http://stackoverflow.com/questions/5500302/a - 不同類型的jQuery排序 – jaychapani 2012-07-18 12:18:21

我的解決辦法是這樣的：

相反jQuerys draggable的，我現在用sortable（鏈接到sortable）。除了這個，我現在得到的jQuery插件的幫助稱爲masonry（鏈接到masonry）

例子：

// Masonry 
$('#container').masonry({ 
    itemSelector: '.element', 
    isResizable: true, 
    columnWidth: 100 
}) 


// Sortable 
$('#container').sortable({ 
    items: '.element', 
    forcePlaceholderSize: true, 
    placeholder: 'card-sortable-placeholder element', 
    tolerance: 'pointer', 
    handle: '.handle', 
    cursor: 'move', 
    cancel: '.notdrag', 

    start: function(event, ui) {  
      ui.item.addClass('dragging').removeClass('element'); 
      ui.item.parent().masonry('reload') 
     }, 
    change: function(event, ui) { 
       ui.item.parent().masonry('reload'); 
     }, 
    stop: function(event, ui) { 
       ui.item.removeClass('dragging').addClass('element'); 
       ui.item.parent().masonry('reload'); 
     } 

    });

來源

2012-07-19 09:48:26 frgtv10

jQuery的 - 在DIV /或可排序元素內拖動元素

回答

相關問題