Jason Broomfield Jason Broomfield - 8 days ago 7
Javascript Question

JQuery Draggable / Droppable - changing clone to a new div

I have created a website where the users can pull widgets from a pop up modal onto the main drop zone and create widgets. Initially, the widgets are just images eg: BBC. When dragged onto the droppable area they become widgets that pull in information from an API. I have set up location saving using local storage so that when the user refreshes the page, the widgets stay in their location.


The problem I am having, is that the widget will not save its location
until the user has refreshed once, then it will continue to save from
here


I think I know why, i just don't know how to fix it! See info below on what I have gathered.

My code for drag and drop:

$(function () {
$("#techcrunch").draggable({ revert: 'invalid', helper:"clone",
containment:"#dropZonetc",snap: '#dropZonetc',addClasses: false});
$( "#dropZonetc" ).droppable({

accept: '#techcrunch',
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
drop: function( event, ui ) {
var offset = ui.helper.offset();
var dropElem = ui.helper.clone()
$(dropElem).html("<div id='techcrunchwidget' class='widgets'><img src='http://i.newsapi.org/techcrunch-s.png' alt='Tech Crunch' height='22' width='100'><button class='closewidget' onclick='destroytechcrunch()'>X</button><div class='techCrunchContent'><ul id='techcontent'></ul><script>retrieveTechCrunchNews();</script></div></div>");
dropElem.appendTo( this ).offset( offset ).hide().fadeIn(1500);
localStorage.setItem("techcrunch", "true");
$( "#techcrunch" ).remove();
$("div.widgets").draggable();
}
});
});


My code for saving the location:

$(function () {


var widget3 = $("#techcrunchwidget");

updatePosition3(widget3);

widget3.draggable({ stop: function () {

var left = this.offsetLeft;
var top = this.offsetTop;

console.log(left);
console.log(top);
localStorage.setItem("lefttech", left);
localStorage.setItem("toptech", top);
$("div.widgets").draggable();

}
});

window.addEventListener("storage", function (e) {
updatePosition3(widget3);
},

false);


});

function updatePosition3(widget3) {

var left = localStorage.getItem("lefttech");
var top = localStorage.getItem("toptech") - 20;
widget3.css({ left: left + "px", top: top + "px" });
widget3[0].offsetTop = top;
widget3[0].offsetLeft = left
}


**


I am 80% sure it is because I am appending the dropElem which is a
clone, therefore the save script is not finding the "techcrunchwidget"
as it is the clone until refresh, this can be seen in the image below


**

Chrome Element Inspecter

Once refreshed, it is not wrapped in that wierd class.

Thanks for your time!

Answer

I would try simply append the new HTML in drop and just remove the helper.

drop: function( event, ui ) {
  var offset = ui.helper.offset();
  var $widget = $("<div id='techcrunchwidget' class='widgets'><img src='http://i.newsapi.org/techcrunch-s.png' alt='Tech Crunch' height='22' width='100'><button class='closewidget' onclick='destroytechcrunch()'>X</button><div class='techCrunchContent'><ul id='techcontent'></ul><script>retrieveTechCrunchNews();</script></div></div>");
  $widget.appendTo(this).offset(offset).hide().fadeIn(1500);
  localStorage.setItem("techcrunch", "true");
  ui.helper.remove();
  $("#techcrunch").remove();
  $("div.widgets").draggable();
}

Untested solution.