[英]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.
最初,小部件只是图像,例如:BBC。 When dragged onto the droppable area they become widgets that pull in information from an API.
当拖动到可放置区域时,它们将成为从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
我有80%的把握是因为我要追加dropElem这是一个克隆,因此保存脚本直到刷新后才找到“ techcrunchwidget”,因为它是克隆,可以在下图中看到
** **
Chrome Element Inspecter 铬元素检查器
Once refreshed, it is not wrapped in that wierd class. 一旦刷新,它就不会包装在那个奇怪的类中。
Thanks for your time! 谢谢你的时间!
I would try simply append the new HTML in drop and just remove the helper. 我会尝试简单地将新的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();
}
Untested solution. 未经测试的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.