0

我正在创建一个拖放 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/以获得指导/另一个接近，但仍然无法弄清楚。

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

4

1 回答 1

0

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

 <div class='widget_holder'>
 <div class='widget'>
 <div class='widget_holder'>
 </div>
 </div>
 </div>
于 2013-01-23T17:37:47.140 回答