The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Saving Drag & Drop to localStorage

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #196167

    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.

    helper: “clone”,
    cursor: ‘move’

    drop: function (event, ui) {
    var $canvas = $(this);
    if (!ui.draggable.hasClass(‘canvas-element’)) {
    var $canvasElement = ui.draggable.clone(); // This code allows for multiple copies.

    ` $canvas.append($canvasElement);
    left: (ui.position.left),
    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.


    can you code copy to jsfiddle

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.