I have a problem with position of droped elements fron a dragable list.
$(document).ready(function() {
$('.fw-sidebar li').draggable({
cursor: "crosshair",
revert: "invalid"
});
function enableDraggable( el ){
$( el ).draggable({
containment: ".fw-content",
cursor: "help",
grid: [ 80, 80 ]
}).css('position', 'absolute');
}
$(".fw-content").droppable({
accept: ".fw-sidebar li, .fw-content li",
drop: function(event, ui) {
//console.log(event);
$(this).removeClass("border").removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this).find('ul');
$(dropped).detach().appendTo(droppedOn);
enableDraggable( dropped );
},
over: function(event, elem) {
console.log("over");
$(this).addClass("over");
},
out: function(event, elem) {
$(this).removeClass("over");
}
});
});
http://jsfiddle.net/96t0qwmg/2/
I want to make a dragable list to drop in a container some elements, then to arrange them in a grid.
1) In my example, when i drop links from sidebar to container, they not fixed where i want.
2) Then, when i move 2 or 3 link in content.. they not align to a grid as it supposed to. Could not align two links on same row.
Anyone know where i'm wrong?
Thanks!