更改dropplable圖像時，丟棄裏面

Question

我不擅長jquery ..我想改變droppable圖像，當我拖放內droppable ..我該如何改變它？我需要可投放的圖像在可拖動的盒子內放置時進行更改。請幫忙！

的jsfiddle

https://jsfiddle.net/xInfinityMing/9vmw4mtc/6/ 

HTML：

<div id="dragIcons"> 
    <img width="100px" height="100px" src="assets/img/gebiz.png"> 
    <img width="100px" height="100px" src="assets/img/b2b.png"> 
    <img width="100px" height="100px" src="assets/img/pitches.png"> 
    <img width="100px" height="100px" src="assets/img/creative.png"> 
</div> 
<div id="briefcase"> 
    <div id="briefcase-droppable"> 
    </div> 
</div> 

CSS：

.draggable 
{ 
    filter: alpha(opacity=100); 
    opacity: 1.0; 
    z-index: 100; 
    transition: none !important; 
    animation: pulse 0.4s alternate infinite; 
} 
.end-draggable 
{ 
    animation: 0; 
} 
.dropped 
{ 
    position: static !important; 
    transition: none !important; 
    animation: 0; 
} 
#dragIcons 
{ 
    padding: 5px; 
    min-height: 100px; 
    width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#briefcase 
{ 
    height: 485px; 
    width: 600px; 
    margin-left: 300px; 
    background: url("../../../assets/img/folder.png"); 
    background-position: 
    background-repeat: no-repeat; 
    position: absolute; 
} 
#briefcase-open 
{ 
    height: 485px; 
    width: 600px; 
    margin-left: 300px; 
    background: url("../../../assets/img/folder-open.png"); 
    background-position: 
    background-repeat: no-repeat; 
    position: absolute; 
} 
#briefcase-droppable 
{ 
    border-style: solid; 
    height: 285px; 
    width: 450px; 
    margin-left: 80px; 
    margin-top: 110px; 
} 
@keyframes pulse { 
    100% { 
    transform: scale(1.1); 
    } 
} 

** JS：**

$(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) { 
     if ($("#briefcase").length == 0) { 
      $("#briefcase-droppable").html(""); 
     } 
     ui.draggable.addClass("dropped"); 
     $("#briefcase-droppable").append(ui.draggable); 
    } 
    }); 
}); 

Answer 1

你可以做到這一點在drop event，你可以得到這樣ui.draggable可拖動元素，從而改變例如圖像源，你應該做

ui.draggable.attr('src','Your new source Here'); 

演示：https://jsfiddle.net/9vmw4mtc/8/

JS：

$(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) { 
     ui.draggable.attr('src','https://image.freepik.com/free-icon/double-up-arrow-angles_318-53141.png'); 
     if ($("#briefcase").length == 0) { 
     $("#briefcase-droppable").html(""); 
     } 
     ui.draggable.addClass("dropped"); 
     $("#briefcase-droppable").append(ui.draggable); 
    } 
    }); 
}); 

更新：

如果你想改變的droppable element也將使其在drop事件的background image但你會使用$(this)

$(this).parent().css('background-image','your new background here'); 

更新演示得到droppable element：https://jsfiddle.net/9vmw4mtc/9/

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