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”，因為它是克隆，可以在下圖中看到

**

鉻元素檢查器

一旦刷新，它就不會包裝在那個奇怪的類中。

謝謝你的時間！

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

未經測試的解決方案。