Jquery 1.7.1 Sortable - placeholder
I have two sortables to drag and drop items to each other. I see that when I drag an item from sortable1, placeholder remains visible into sortable1 till the dragged item is completely in the Sortable2. I would like it to show placeholder into sortable2 as soon as dragged item comes over the sortable2. Please advice how can this be achieved.
Please see attaches screen shots to check the current behavior.
This is the code that I have to set the drag and drop -
// make listbox2 sortable, inside "start", "stop" logic is to support multiple items at once.
$("#ulSelected").sortable({
placeholder: "itemHighlight",
connectWith: "#ulAvailable",
cancel: "li:not(.commonItemSelected)",
start: function(e, info) {
sorted = true;
if (dragged == false)
info.item.siblings(".commonItemSelected").hide().clone().show().appendTo(info.item);
},
beforeStop: function(event, ui) {
ui.helper.removeClass("commonItemSelected");
ui.helper.die();
},
stop: function(e, info) {
dropped = true;
if (sorted == true) {
info.item.after(info.item.find("li"));
info.item.siblings(".commonItemSelected:hidden").remove();
info.item.siblings(".commonItemSelected").removeClass("commonItemSelected");
sorted = false;
}
AdjustSorterAndMoverDisplay();
}
});
$("#ulAvailable").sortable({
placeholder: "itemHighlight",
connectWith: "#ulSelected",
cancel: "li:not(.commonItemSelected)",
start: function(e, info) {
sorted = true;
if (dragged == false)
info.item.siblings(".commonItemSelected").hide().clone().show().appendTo(info.item);
},
beforeStop: function(event, ui) {
ui.helper.removeClass("commonItemSelected");
ui.helper.die();
},
stop: function(e, info) {
dropped = true;
if (sorted == true) {
info.item.after(info.item.find("li"));
info.item.siblings(".commonItemSelected:hidden").remove();
info.item.siblings(".commonItemSelected").removeClass("commonItemSelected");
sorted = false;
}
AdjustSorterAndMoverDisplay();
}
});
// to disable text selection while dragging.
$("ul, li a").disableSelection();