Yi Ming Yi Ming - 1 year ago 50
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.


$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function(event, ui) {
stop: function(event, ui) {
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.");
drop: function(event, ui) {
if ($("#briefcase img").length == 0) {


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


.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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download