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

究竟是你的问题。我没有阅读过任何关于你的问题的内容，这并不是通过[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

我已经试过这个，但是如果你有不同尺寸的元素，它将不起作用。虽然可以排序，但我有空间问题。如果我像上面所描述的那样移动它，则不会使用空白空间。你懂我的意思吗？ – frgtv10 2012-07-18 11:25:05

请看看这里和我的问题上面的评论（更新） - > http://jsfiddle.net/vwK5e/2/ – frgtv10 2012-07-18 11:44:49

看看http://*.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'); 
     } 

    });

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

相关推荐