我想创建一个重置按钮,将我的图标位置重置回原始位置..我不知道如何启动它...每当我拖放它不在droppable中它会回到原来的位置..我想当droppable中有图标时,按下复位按钮会将图标的位置重置回原位。
的jsfiddle
https://jsfiddle.net/xInfinityMing/c0mmbspz/
HTML
<div id="dragIcons">
<img width="100px" height="100px"src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png">
<img width="100px" height="100px" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png">
<img width="100px" height="100px" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png">
<img width="100px" height="100px" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png">
</div>
<div id="briefcase">
<div id="briefcase-full">
</div>
<div id="briefcase-droppable">
</div>
</div>
<button id="reset" type="button" onclick="doSomething()">Reset</button>
爪哇
$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function(event, ui) {
ui.helper.removeClass("end-draggable");
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.addClass("end-draggable");
ui.helper.removeClass("draggable");
}
});
$("#briefcase-droppable").droppable({
drop: function(event, ui) {
$(this).parent().css('background-image','url("http://icons.iconarchive.com/icons/dtafalonso/yosemite-flat/512/Folder-icon.png")');
if ($("#briefcase").length == 0) {
$("#briefcase-droppable").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase-droppable").append(ui.draggable);
}
});
});
答案 0 :(得分:1)
您需要使用detach
。当您点击reset
按钮时,它会移除briefcase-droppable
中的图片并附加到dragIcons
。
$('#reset').click(function(e) {
e.preventDefault();
var dropped_icon = $('#briefcase-droppable')
.children()
.detach()
.removeClass('dropped end-draggable')
.removeAttr('style')
.css('position', 'relative');
$('#dragIcons').append(dropped_icon);
$('#briefcase').css('background', 'url("http://icons.iconarchive.com/icons/mcdo-design/smooth-leopard/256/Upload-Folder-Blue-icon.png")');
});
这是fiddle