I am using Jquery UI and creating drag and drop feature. I have div element which can be dragged and then once it is dragged, user can add images to this dragged div element. This is how my code is setup
$("#dvSource img").draggable({
//containment: '#gbox',
cursor: 'move',
helper: 'clone',
scroll: false,
connectToSortable: '#edit, #edit1, #mainContentDiv' ,
//appendTo: '#edit',
start: function () {},
stop: function (event, ui) {}
}).mousedown(function () {});
$("#edit1").draggable({
cursor: 'move',
helper: 'clone',
scroll: false,
connectToSortable: '#mainContentDiv',
//appendTo: '#droppable',
start: function () {$( this ).addClass( "droppedDiv" ); },
stop: function (event, ui) {}
}).mousedown(function () {});
$( "#mainContentDiv").droppable({
accept: "#edit1",
drop: function( event, ui ) {
ui.draggable.attr("id","draggeddd");
$("#mainContentDiv").append(ui.draggable);
//$( this ).addClass( "ui-state-highlight" );
}
});
$( "#draggeddd" ).droppable({
accept: "#dvSource img",
drop: function( event, ui ) {
alert("fial drop");
//$(".droppedDiv").append(ui.draggable);
$("#draggeddd").append(ui.draggable);
}
});
edit1 is the DIV which is dragged and placed in mainContentDiv. This part is working fine. But when i try to add image place in #dvSource img to this dropped DIV, it is not doing that.
Please help me out how can i acheive this. In short,my question is , after dragging a DIV in dropped area, how can i add more elements to this dragged DIV.