jQuery drag&drop interface issue with containers that are moveable

I'm creating a drag and drop cms site editor. I want the users to be able to move widgets and their containers, however, using .sortable the container seems to want to drop into itself when you start to drag and it creates a million copies of itself. I think the problem may have something to do with having both the connectWith class and the items class on the same element, but I think I have to in this situation because it acts as both a holder and a widget itself. Not all holders are widgets that can be moved/resized. So basically the page is built like this:

<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>

With jQuery like this:

$(".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

//example: 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");
    }
});

Here's my jsFiddle (I couldn't get it to work quite right, might've missed something small) http://jsfiddle.net/VaZnc/1/ Thanks in advance guys. You've always been very responsive and helpful!

Sidenote: I've looked everywhere for an answer, and no one is implementing this like I am so it's kinda difficult. Most people have UL (I know the idea is similar, however, some plugins only work with UL) I've tried the http://dbushell.com/2012/06/17/nestable-jquery-plugin/ for guidance/another approach, but still couldn't figure it out.

The idea behind this whole thing is my customers should have the ability to create columns using holders within the main holder and add widgets as they please (widgets are really just any kind of content...text/pics/product lists/blogs/etc)

Answers


I had to wrap the widget_holder in a widget. Then it worked. I think it's because putting the widget_holder inside the widget makes it so you can't have it infinite loop trying to put in itself. YAY. SO...

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

Need Your Help

SQL find the same column in different tables

sql join compare union

I have 2 very large tables. I try to figure out what they have in common.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.