I have two div one is main and another in jquery ui modal/popup, which has jQuery UI Draggable applied with multiple item selection. and I want to do, is click and drag that, and create a clone that is kept in the DOM and not removed when dropped i.e clone of selected items.
$(function() {
var selectedClass = 'ui-state-highlight',
clickDelay = 600, lastClick, diffClick; // timestamps
$("#draggable li")
.bind('mousedown mouseup', function(e) {
if (e.type == "mousedown") {
lastClick = e.timeStamp; // get mousedown time
} else {
diffClick = e.timeStamp - lastClick;
if (diffClick < clickDelay) {
$(this).toggleClass(selectedClass);
}
}
})
.draggable({
revertDuration: 10,
containment: '.demo',
start: function(e, ui) {
ui.helper.addClass(selectedClass);
},
stop: function(e, ui) {
$('.' + selectedClass).css({
top: 0,
left: 0
});
},
drag: function(e, ui) {
$('.' + selectedClass).css({
top: ui.position.top,
left: ui.position.left
});
}
});
$("#droppable, #draggable").sortable().droppable({
drop: function(e, ui) {
$('.' + selectedClass).appendTo($(this)).add(ui.draggable)
.removeClass(selectedClass).css({
top: 0,
left: 0
});
}
});
});
its working fine to drag and drop. But I need to clone. I try with following with helper 'clone'. but its create clone on same div (source div) i.e if move little after selection.
$("#droppable, #draggable").sortable().droppable({
drop: function(e, ui) {
$('.' + selectedClass).clone().appendTo($(this)).add(ui.draggable)
.removeClass(selectedClass).css({
top: 0,
left: 0
});
}
});
any solution or suggestion?