jQuery - 在 DIV / 或可排序元素内拖动元素答案

【问题标题】：jQuery - drag element inside DIV / or sortable elementjQuery - 在 DIV / 或可排序元素内拖动元素
【发布时间】：2012-07-18 10:23:52
【问题描述】：

我在将 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>

所有元素都是可拖动的，并且具有 float:left;position:relative; 的 css 样式。当我将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 的位置。

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

-------已更新-------

我尝试使用可排序的...请参阅此处http://jsfiddle.net/vwK5e/2/ 但是如果你把红框放在数字 3 上，红框将在第二行（正确），但数字 4 应该在数字 3 旁边，因为空白。

TIA frgtv10

【问题讨论】：

你的问题到底是什么。我没有阅读您的问题中的任何内容，jQuery UI Draggable 未涵盖这些内容。
我知道它没有被覆盖。这就是我要求解决方案的原因:) 我更新了我的问题。

标签： javascript jquery css

【解决方案1】：

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

我猜你想要这样的功能。

回答

A different kind of jquery sortable

【讨论】：

我已经试过了，但是如果你有不同大小的元素，它就不起作用了。虽然可以排序，但我有空白空间的问题。如果我像上面描述的那样移动它，则不会使用空白空间。你知道我的意思吗？
请看这里和我的问题上面的评论（更新）--> jsfiddle.net/vwK5e/2
看看stackoverflow.com/questions/5500302/…
非常感谢您的链接！！我在找什么！

【解决方案2】：

我的解决方案如下所示：

我现在使用的是sortable，而不是jQuerys draggable（链接到sortable）。除此之外，我现在得到了名为 masonry(link to masonry) 的 jQuery 插件的帮助

例子：

// 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');
        }

    });

【讨论】：