jQuery拖放可移動容器的界面問題

我正在創建一個拖放cms站點編輯器。我希望用戶能夠移動小部件和它們的容器，但是，使用.sortable容器似乎想要在拖動時自動放入，並創建一百萬個自身副本。我認爲這個問題可能與同一元素上的connectWith類和items類有關，但我認爲我必須在這種情況下，因爲它既是一個持有者又是一個小部件本身。並非所有持有者都可以移動/調整大小的小部件。因此，基本上在網頁是建立這樣的：jQuery拖放可移動容器的界面問題

<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

//例如：保持器[0] = WIDGET1，WIDGET2，widget6 &支架[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/作爲指導/另一種方法，但仍然無法弄清楚。

這件事背後的想法是我的客戶應該有能力使用主持有人內的持有人創建列並隨意添加小部件（小部件實際上只是任何類型的內容...文本/圖片/產品列表/ blogs/etc）

來源

2013-01-23 Shane Stebner

我不得不將widget_holder包裝在一個小部件中。然後它工作。我認爲這是因爲將widget_holder放在小部件中使得它不能讓它無限循環地嘗試投入。好極了。 SO ...

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

來源

2013-01-23 17:37:47

jQuery拖放可移動容器的界面問題

回答

相關問題