CODEWITHSUNDEEP
javascriptjquerydraggablejquery-ui-sortabledroppable
user2988257
user2988257

Reputation: 961

Draggable and Sortable Portlets // jQuery

Trying to figure out but still cant find a way how I can make one droppable and sortable target for few draggable portlets. I based on this tutorial: http://jqueryui.com/sortable/#portlets

What i'm trying to do is Enter image description here

The idea is to drag small portlets in to big red portlet (i already success to do) but i want to do it with aligning horizontally (means sorting, not just dropping it wherever), i succeed also to do it verticaly, not good for me(

My current js code looklike this (tried already different combinations):

    $(function() {
    $( "#draggablegrey" ).draggable({   });

    $( "#draggableblue" ).draggable({
     connectWith: '#droppable',


    });

 $( "#droppable" ).sortable({
     connectWith: '#droppable'  }); });

Upvotes: 2

Views: 2819

Answers (1)

al1en
al1en

Reputation: 511

From jQuery UI's website: -> "Draggables are built to interact seamlessly with sortables."

It is possible you can try to follow this example from jQuery UI: http://jqueryui.com/draggable/#sortable

Also for sorting horizontally add a line of css in your style:

#sortable>div { float: left; }

after this you should be able to move them and sort them horizontally.

This fiddle is from someone else http://jsfiddle.net/sP3UZ/

Upvotes: 2

Related Questions