I have a list of draggable table cells that can be dropped onto a second table. They are configured to clone, since the source table must remain unchanged if items are dragged from it.
Now I want to be able to move the dropped items in the second table from cell to cell. But if you press the Control key while dragging an item into the second table, the item must be cloned. Now I do not know how to elegantly achieve this last part.
My code is still missing only the clown in the Ctrl part:
$(".drag_clone").draggable({helper: "clone"});
$(".draggable").draggable({revert: "invalid"});
$(".droppable").droppable(
{
drop: function(event, ui) {
if (ui.draggable.hasClass("draggable")) {
ui.draggable.remove();
}
$('<div class="draggable"></div>').text(ui.draggable.text()).draggable({revert: "invalid"}).appendTo(this);
}
});
, , , , . Ctrl , , .
, , , droppable. , - draggable, .
, .
Edit:
, ui.draggable, draggable, ui.helper, . :
$(".drag_clone").draggable({helper: "clone"});
$(".draggable").draggable({revert: "invalid"});
$(".droppable").droppable(
{
hoverClass: 'ui-state-hover',
drop: function(event, ui) {
ui.helper.remove()
$('<div class="draggable"></div>').text(ui.draggable.text()).mousedown(function(event)
{$(this).draggable('option', {
helper : event.ctrlKey ? 'clone' : 'original' });
}).draggable({ revert: "invalid" }).appendTo(this);
}
});