0

我在将 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。dragginjquery draggable工作正常，但我想el1在这个位置的 HTML 代码中插入带有 id 的 div。

它看起来像这样：

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

我现在的问题是，这是一个网格。el1宽度为“300”，其他宽度为“100”。拖到应该交换的地方，拖到的el1地方，拖到的地方。el3el2el3el4el1el1el2, el3, el4

为了获得这种行为，我认为我需要div在el4. 但是如何确定哪个元素是最近的呢？

- - - - 更新 - - - -

我尝试使用可排序的...见这里http://jsfiddle.net/vwK5e/2/ 但是如果你把红框放在数字 3 上，红框将在第二行（正确）但数字 4 应该紧挨着空间的第三个原因。

TIA frgtv10

4

2 回答 2

3

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

我猜你想要这样的功能。

回答

另一种可排序的 jquery

于 2012-07-18T10:52:03.323 回答
0

我的解决方案如下所示：

draggable我现在使用的不是 jQuerys sortable（链接到sortable）。除此之外，我现在得到了 jQuery 插件的帮助，称为masonry(link to 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-19T09:48:26.780 回答