I have multiple small divs (referred to as "inner-div") and several container divs.
My goal is to be able to drag the inner-divs to different container-divs and have them automatically rearrange within the new container.
I have already set up the divs and enabled the draggable feature.
The container-divs are generated as follows:
if($('#' + container).length > 0) {
//do nothing
} else {
$('.info').append(
$('<div>').attr({
'id': container,
'class': 'container-div'
}).html('<h3>' + title + '</h3>')
);
}
The inner-divs are created like so:
$('#' + container).append(
$('<div>').attr({
'class': 'inner-div'
}).html('<img src="' + img + '"> ' + name).draggable({
opacity: 0.7,
helper: "clone"
})
);
I am looking for a way to move an inner-div to a different container-div and have it snap into place seamlessly. How can I achieve this?