拖放重置按鈕到原來的位置

Question

我想創建一個重置按鈕來重置我的圖標的位置回到原來的位置..我不知道如何開始它..每當我拖放它不是在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> 

的Java

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

Answer 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