JQuery drag & drop sortable connect list -
starting example on jqueryui demos i'm trying disable sort on left list, , items on left must copied , not moved, possible in way?
$(function() { $( "#sortable1, #sortable2" ).sortable({ connectwith: ".connectedsortable" }).disableselection();
});
by using draggable , droppable interaction can closer, i'm not able drop element specific position can sortable (jsfiddle here):
$(function() { $( "#sortable1 li" ).draggable({ appendto: "body", helper: "clone" }); $( "#sortable2" ).droppable({ activeclass: "ui-state-default", hoverclass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function( event, ui ) { $( ).find( ".placeholder" ).remove(); $( "<li></li>" ).text( ui.draggable.text() ).appendto( ); } }).sortable({ items: "li:not(.placeholder)", sort: function() { $( ).removeclass( "ui-state-default" ); } });
});
found solution. here code fixes:
$(function() { $( "#sortable1 li" ).draggable({ appendto: "body", helper: "clone" }); $( "#sortable2" ).droppable({ activeclass: "ui-state-default", hoverclass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function (event, ui) { if ($(this).find(".placeholder").length > 0) //add first element when cart empty { $(this).find(".placeholder").remove(); $("<li></li>").text(ui.draggable.text()).appendto(this); } else { var = 0; //used flag find out if element added or not $(this).children('li').each(function () { if ($(this).offset().top >= ui.offset.top) //compare { $("<li></li>").text(ui.draggable.text()).insertbefore($(this)); = 1; return false; //break loop } }) if (i != 1) //if element dropped @ end of cart { $("<li></li>").text(ui.draggable.text()).appendto(this); } } } }).sortable({ items: "li:not(.placeholder)", sort: function() { $( ).removeclass( "ui-state-default" ); } });
});
Comments
Post a Comment