Question

我正在创建一个拖放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＆amp; holder [1] = widget3，widget5和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/作为指导/另一种方法，但仍然无法弄明白。

这一切背后的想法是我的客户应该能够使用主持有者中的持有者创建列并随意添加小部件（小部件实际上只是任何类型的内容...文本/图片/产品列表/博客/等）

Answer 1

我必须将widget_holder包装在一个小部件中。然后它奏效了。我认为这是因为将widget_holder放在小部件中使得它不能让它无限循环尝试放入自身。好极了。 SO ...

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

jQuery拖放与可移动容器的接口问题

1 个答案: