Building a drag and drop UI, positioning draggable to nearest droppable.
I've pulled and put some code together to position draggable elements on a grid of droppable elements.
The droppable grid is made of units (a * b) and the draggable element is (2a * b). I'm hoping to eventually record positions on the grid in a database in order to save positions for future logins.
I've pulled some code together, but I'm struggling to make it work nicely. I want the left side of draggable to line up with the closet left side of a droppable grid unit. The problem is that the left edge of draggable lines up instead with the first left edge to its right (ie looks for the next larger xval than its own?).
Anyone know if there's a quick fix or is it determined as part of jqUI?
My code:
- var ins = "";
for (var i = 1; i < 211; i++) {
if (i < 201) {
ins += '<div class="grid">' + i + '</div>';
}
else {
ins += '<div class="unit">Drag Me!</div>';
}
}
$('.grid').droppable({
//tolerance: "fit",
drop: function (event, ui) {
var $this = $(this);
ui.draggable.position({
my: "left",
at: "left",
of: $this,
using: function (pos) {
$(this).animate(pos, "slow", "linear");
}
});
}
});
$('.unit').draggable({
containment: '#appgrid',
//snap: '.grid',
//snapmode: "inner",
opacity: 0.7,
revert: "invalid",
//grid: [x, y]
});