Dhiraj Dhakal Dhiraj Dhakal - 1 month ago 9
Javascript Question

Jquery-ui draggable not working after dropping into dynamically created div

I cannot drag the div, once it is dropped into the droppable bound div.

I have a multiple rows which are set to droppable where controls like textbox, checkbox etc etc are inserted. And each control is wrapped with draggable div.

For the first time when a column is dragged and dropped into droppable bound div, it works fine, then afterwards draggable stops. I tried to re-initialize draggable after a div is dropped but it din't work out too.

Below is how I have implemented for every column after which these are appended inside one container to render:

function buildRow()
{
var formRow = $("div").attr('id', 'mainform')
.attr('rowIndex', rowIndex)
.attr('class', 'formrow ')
.attr('style', 'width: 100%;min-height:100px)
.droppable({
accept: "#formColumn",
drop: function (event, ui) {

$(ui.draggable).draggable('destroy').draggable({
containment: $('#formControlsPlaceholder'),
cursor: 'move'
});

}
});

var formColumn = $('<div>')
.attr('id', 'formColumn')
.attr('style', 'width:80%;max-width:100%;')
.draggable({
containment: $('#container'),
cursor: 'move'
});
}

Answer

Actually the problem was not in draggable. On dropping an element or control to the new row, I had used attr('style') to give the equal width for all the elements inside it. But I was not aware that setting attr('style') would replace all the existing styles, as a result the binding of Draggable to the DOM was also broken.

Once I replaced attr('style') with css('width', 'sth') then it worked.

:D

Dhiraj Dhakal