Перетащите кнопку сброса в исходное положение

Question

Я хотел создать кнопку сброса, чтобы вернуть положение моих значков обратно в исходное положение. Я не уверен, как его запустить .. Всякий раз, когда я перетаскиваю его, 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