Please see jsfiddle.
I want to add a new div
(Row in my example
) that can be added to it another div
(Button in my example
) by drag and drop (jQuery UI).
I created new div ($row
) in helper function (addNewRow
) and added new function for drag and drop another div to it like this:
$('.rowDashboard').draggable({
containment: '#content',
cursor: 'move',
helper: addNewRow,
revert: "invalid",
});
// helper function
function addNewRow() {
$row = $(document.createElement('div'));
$row.attr("id","droppableDiv");
$row.html("drop here");
$row.droppable({
accept: ".buttonDashboard",
// greedy: true,
drop: function (ev, ui) {
alert('ok');
},
});
return $row;
}
I expected that ok
message would appear by dropping div
with buttonDashboard
class to div
with rowDraggable
but drop
function doesn't fire.
Is it correct to add drop
function in helper function?
If it is incorrect, then what is the solution to that?
Thanks advance.