JQuery Draggable/Droppable - クローンを新しいdivに変更する

Question

私は、ユーザーがポップアップモーダルからメインドロップゾーンにウィジェットを引き出してウィジェットを作成できるWebサイトを作成しました。当初、ウィジェットはただのイメージです：例えば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

そのwierdクラスには、ラップされていません。

ありがとうございました！

Answer 1

私は単純にドロップで新しい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(); 
} 

未解決の解決策。