Yi Ming Yi Ming - 2 months ago 16
CSS Question

Drag and Drop from image onto another image

I wanted to drag and drop image onto another image.
I cannot figure it out.. I want to drag icons image, onto droppable briefcase and the icons will stay there.. my codes.. I want the icons image to be onto briefcase image not outside of briefcase image.

Javascript:



$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function(event, ui) {
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.removeClass("draggable");
var image = this.src.split("/")[this.src.split("/").length - 1];
if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
alert(image + " dropped.");
} else {
alert(image + " not dropped.");
}
}
});
$("#briefcase").droppable({
drop: function(event, ui) {
if ($("#briefcase img").length == 0) {
$("#briefcase").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase").append(ui.draggable);
}
});
});


HTML:



<div id="dragIcons">
<img src="assets/img/gebiz.png">
<img src="assets/img/b2b.png">
</div>
<div id="briefcase">
<img width="600px" height="auto" src="assets/img/briefcase.svg">
</div>


CSS:



.draggable {
filter: alpha(opacity=100);
opacity: 1.0;
}

.dropped {
position: static !important;
}

#dragIcons {
border: 2px solid #ccc;
padding: 5px;
min-height: 100px;
width: 430px;
}

#briefcase {
border: 5px solid #ccc;
padding: 5px;
height: auto;
width: 600px;
margin-left: auto;
margin-right: auto;
}

Answer Source

Remove the <img> tag in the #briefcase div. Instead, make the background of the div as the image and make its position absolute.

Here's the JSFiddle - you'll have to fix the CSS positioning of the icons, but the main idea is there.