CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-ui-sortable
Jon
Jon

Reputation: 3194

jQuery Sortable (Drag-n-Drop) Dashboard Containers

Scenario:

I'm trying to create a dashboard of sorts which will have widgets of varying sizes. I would like the user to be able to arrange their widgets to their liking.

I have been trying to implement jQuery UI's sortable interaction, using the portlets example, but I'm having some trouble.

enter image description here

What's Working:

I can drag and drop/rearrange containers between columns within the same row.

What's NOT Working:

I cannot drag containers between rows.

My Question:

How can I enable dragging/dropping between rows and columns?

jsFiddle Demo:

http://jsfiddle.net/SWUTR/

Relevant HTML:

<div class="column">
    <div class="container span2"></div>
    <div class="container span2"></div>
</div>
<div class="column">
    <div class="container span1"></div>
    <div class="container span2"></div>
    <div class="container span1"></div>
</div>
<div class="column">
    <div class="container span4"></div>
</div>

Relevant CSS:

.column .container {
    float:left;
    margin:5px;
    min-width:100px;
    height:250px;
    background:#39F;    
}
    .column .container.span1 {
        width:calc(25% - 10px); 
        background:#6CC;
    }
    .column .container.span2 {
        width:calc(50% - 10px); 
        background:#6F6;
    }
    .column .container.span3 {
        width:calc(75% - 10px); 
        background:#99C;
    }
    .column .container.span4 {
        width:calc(100% - 10px);
        background:#33C;    
    }

Relevant jQuery:

$(".column").sortable({
    connectWith: ".column"
});
$(".column").disableSelection();

Upvotes: 2

Views: 3973

Answers (1)

rusln
rusln

Reputation: 1284

I believe that the problem is in CSS. It will work when you add the following line to your .js : 

$(".column").addClass("ui-helper-clearfix");

From the documentation:

.ui-helper-clearfix: Applies float wrapping properties to parent elements

http://wiki.jqueryui.com/w/page/12137970/jQuery%20UI%20CSS%20Framework

Upvotes: 5

Related Questions