JQuery Draggable/Droppable - 將克隆更改爲新的div

Question

我已經創建了一個網站，用戶可以從彈出模式中將小部件拖放到主拖放區域並創建小部件。最初，小部件只是圖像，例如：BBC。當拖放到可投放區域時，它們變成了從API中獲取信息的小部件。我已經使用本地存儲設置了位置保存，因此當用戶刷新頁面時，窗口小部件將保留在他們的位置。

我遇到的問題是，小部件也救不了它的位置 直到用戶刷新一次，然後它會繼續從 這裏

我想我知道爲什麼保存，我只是不知道如何解決它！關於我收集的內容，請參閱下面的信息。

我對拖放代碼：

$(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(); 
      } 
     }); 
    }); 

我保存的位置代碼：

$(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 
     } 

**

我80％肯定它是因爲我附加了一個的dropElem克隆，因此保存腳本沒有找到「techcrunchwidget」 ，因爲它是克隆，直到刷新，這可以下面的圖片

**

Chrome Element Inspecter

刷新一次看到，它不包裹在那個奇怪的類中。

謝謝你的時間！

Answer 1

我會嘗試簡單地在drop中添加新的HTML，並刪除幫助程序。

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(); 
} 

未經測試的解決方案。