可移动容器的 jQuery 拖放界面问题答案

【问题标题】：jQuery drag&drop interface issue with containers that are moveable可移动容器的 jQuery 拖放界面问题
【发布时间】：2013-01-23 05:24:59
【问题描述】：

我正在创建一个拖放式 cms 站点编辑器。我希望用户能够移动小部件及其容器，但是，使用 .sortable 容器似乎想在您开始拖动时放入自身并创建一百万个自身副本。我认为问题可能与在同一个元素上同时使用 connectWith 类和 items 类有关，但我认为在这种情况下我必须这样做，因为它既充当持有者又充当小部件本身。并非所有持有人都是可以移动/调整大小的小部件。所以基本上页面是这样构建的：

<div class='widget_holder' class='twelve columns'> //unmoveable holder
<div class='widget' class='six columns'> // moveable widget
</div>
<div class='widget_holder widget' class='six columns'> //moveable widget/holder
</div>
</div>
<div class='widget_holder' class='twelve columns'> //unmoveable holder
<div class='widget' class='four columns'> // moveable widget
</div>
<div class='widget' class='four columns'> // moveable widget
</div>
<div class='widget' class='four columns'> // moveable widget
</div>
<div class='widget' class='four columns'> // moveable widget
</div>
</div>
<div class='widget_holder' class='six columns'> // unmoveable holder
<div class='widget' class='six columns'> // moveable widget
</div>
<div class='widget_holder widget' class='six columns'> // moveable widget/holder
</div>
</div>

像这样使用 jQuery：

$(".widget_holder").sortable({  // adding it to the holders since it's the widgets within 
    distance: 30,  // hoped this would help with jumpyness (didn't rly)
    revert: true,
    items: ".widget",  // moveable widget
    containment: 'body',  // keeps it on the page
    opacity: .8,
    handle: ".move_widget",  // a handle that hovers over the widget div
    dropOnEmpty: true,  // lets an empty holder accept a widget
    connectWith: ".widget_holder",  // put widgets in holders
    tolerance: "pointer",  // keep widget by pointer to make it a lil easier
    cursorAt: { top:0, left: 0 },
    start: function(e, ui){  // I don't remember why I did this
    $(".widget_holder", ui.item).hide();
    $(".widget_holder" ).sortable("refresh").addClass("holder_hover");
    },
    update: function(e, ui){  // my function makes a multi-dimensional array

//示例：holder[0] = widget1, widget2, widget6 & holder[1] = widget3, widget5, and widget4

    updateByHolder();
    },
    stop: function(e, ui){ //don't remember what this does
    $(".widget_holder", ui.item).show();
    $(".widget").removeClass("full_width");
    $(".widget_holder" ).removeClass("holder_hover");
    }
});

这是我的 jsFiddle（我无法让它正常工作，可能漏掉了一些小东西） http://jsfiddle.net/VaZnc/1/ 提前谢谢各位。您一直都非常乐于助人且乐于助人！

旁注：我到处寻找答案，但没有人像我一样实施这个，所以这有点困难。大多数人都有 UL（我知道这个想法是相似的，但是，一些插件只能与 UL 一起使用）我尝试了 http://dbushell.com/2012/06/17/nestable-jquery-plugin/ 以获得指导/另一种方法，但仍然无法弄清楚。

整个事情背后的想法是我的客户应该能够使用主支架中的支架创建列并根据需要添加小部件（小部件实际上只是任何类型的内容...文本/图片/产品列表/博客/等）

【问题讨论】：

标签： jquery jquery-ui jquery-plugins jquery-ui-sortable

【解决方案1】：

我必须将 widget_holder 包装在一个小部件中。然后它起作用了。我认为这是因为将 widget_holder 放在小部件中会使其无法无限循环尝试放入小部件中。耶。所以...

 <div class='widget_holder'>
 <div class='widget'>
 <div class='widget_holder'>
 </div>
 </div>
 </div>

【讨论】：