Dragging from one column to another using jquery

Question

I need an example of dragging an element from one column and dropping it to another using jquery

Are there any such examples?

Answer 1

You can do this with jquery sorting: http://jqueryui.com/demos/sortable/#connect-lists

Answer 2

Here I made full containers using jQuery UI sortable. I think this should be useful for you.

Demo: http://codebins.com/bin/4ldqp9g

HTML:

<div class="demo"> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default"> Item 1 </li> <li class="ui-state-default"> Item 2 </li> <li class="ui-state-default"> Item 3 </li> <li class="ui-state-default"> Item 4 </li> <li class="ui-state-default"> Item 5 </li> </ul> <ul id="sortable2" class="connectedSortable"> <li class="ui-state-highlight"> Item 1 </li> <li class="ui-state-highlight"> Item 2 </li> <li class="ui-state-highlight"> Item 3 </li> <li class="ui-state-highlight"> Item 4 </li> <li class="ui-state-highlight"> Item 5 </li> </ul> </div> <!-- End demo --> <div class="demo-description"> <p> Sort items from one list into another and vice versa, by passing a selector into the <code> connectWith </code> option. The simplest way to do this is to group all related lists with a CSS class, and then pass that class into the sortable function (ie, <code> connectWith: '.myclass' </code> ). </p> </div> 

CSS

 #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; overflow:visible; display:block; } 

JQuery

 $(function() { var itemclone, idx; $("#sortable1, #sortable2").sortable({ start: function(event, ui) { //create clone of current seletected li itemclone = $(ui.item).clone(); //get current li index position in list idx = $(ui.item).index(); //If first li then prepend clone on first position if (idx == 0) { itemclone.css('opacity', '0.5'); $(this).prepend(itemclone); } //Else Append Clone on its original position else { itemclone.css('opacity', '0.7'); $(this).find("li:eq(" + (idx - 1) + ")").after(itemclone); } }, change: function(event, ui) { //While Change event set clone position as relative $(this).find("li:eq(" + idx + ")").css('position', 'relative'); }, stop: function() { //Once Finish Sort, remove Clone Li from current list $(this).find("li:eq(" + idx + ")").remove(); }, connectWith: ".connectedSortable" }).disableSelection(); }); 

Demo: http://codebins.com/bin/4ldqp9g