I have a drag and drop widget that I built in jQuery. I have the drag-and-drop’s working great, but I need to be able to save the dropped items after they have been dropped with a button. Basically, wherever the images are dropped to within a droppable container, I need that information to be saved via localStorage.
I am fairly new to jQuery, so I’m not sure how to save the position of the dropped images into the local storage. I know I have to stringily the code, but i have no idea what that means, or how to do so.
Any help would be greatly appreciated. Here is my drag and drop jQuery code.
$(“#circle”).draggable({
helper: “clone”,
cursor: ‘move’
});
$(“#DragContainer”).droppable({
drop: function (event, ui) {
var $canvas = $(this);
if (!ui.draggable.hasClass(‘canvas-element’)) {
var $canvasElement = ui.draggable.clone(); // This code allows for multiple copies.
$canvasElement.addClass(‘canvas-element’);
$canvasElement.draggable({
});
` $canvas.append($canvasElement);
$canvasElement.css({
left: (ui.position.left),
top: (ui.position.top),
right: (ui.position.right),
bottom: (ui.position.bottom),
position: ‘absolute’
});
}
}
});
The droppable area is set up as a <canvas> element. I have gotten this to work before on a sketchpad widget, but can’t seem to figure it out on a drag and drop.
