Javascript jQuery-在DIV/或sortable元素中拖动元素

我在另一个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>

<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

的位置

要获得这种行为，我认为需要将

div

HTML代码移到

el4

之后。但是如何确定哪一个元素是最近的呢

----更新----

我一直在尝试使用sortable。。。看这里 但如果将红色框放在3号上方，则红色框将位于第二行（正确），但4号应位于3号旁边，原因是空格。

短暂性脑缺血发作 frgtv10参见

我想你想要这样的功能

答复

请参阅

我想你想要这样的功能

答复

---

我的解决方案如下所示：

<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>

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

我现在使用的不是jQuerys

draggable

而是

sortable

（链接到）。 除此之外，我现在还得到了名为

massy

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

    });

---

我的解决方案如下所示：

<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>

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

我现在使用的不是jQuerys

draggable

而是

sortable

（链接到）。 除此之外，我现在还得到了名为

massy

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

    });

---

你到底有什么问题。我没有读过你的问题中的任何内容，那是没有涵盖的。我知道它没有涵盖。这就是为什么我要求一个解决方案：）我更新了我的问题。你的问题到底是什么。我没有读过你的问题中的任何内容，那是没有涵盖的。我知道它没有涵盖。这就是为什么我要求一个解决方案：）我更新了我的问题。我已经尝试过这个，但是如果你有不同大小的元素，它将不起作用。虽然有sortable，但我有空空间的问题。如果我像上面描述的那样移动它，则不会使用空的空间。你知道我的意思吗？请看这里和我问题中的评论（更新）-->看一看，非常感谢链接！！我在找什么！我已经试过了，但是如果你有不同大小的元素，它将不起作用。虽然有sortable，但我有空空间的问题。如果我像上面描述的那样移动它，则不会使用空的空间。你知道我的意思吗？请看这里和我问题中的评论（更新）-->看一看，非常感谢链接！！我在找什么！