Question

我在拖动其他div元素中的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'。将el1拖到el3的地方应该将el2，el3和el4交换到el1和el1的地方el2, el3, el4。

的地方

要获得此行为，我认为我需要在div之后移动el4 HTML代码。但是如何确定哪个元素最近？

-------更新-------

我试图使用sortable ...请参阅此处http://jsfiddle.net/vwK5e/2/ 但是如果你把红色方框放在3号位上，红色方框将在第二行（正确），但是数字4应该在第3位旁边，因为空白区域。

TIA frgtv10

Answer 1

请参阅http://jqueryui.com/demos/sortable/#display-grid

我想你想要这样的功能。

答案

A different kind of jquery sortable

Answer 2

我的解决方案如下：

而不是jQuerys draggable我正在使用sortable（链接到sortable）。除此之外，我现在得到了名为masonry的jQuery插件的帮助（链接到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');
        }

    });

jQuery - 在DIV /或可排序元素中拖动元素

2 个答案: