Drag and Drop

by James Connolly

HTML

<div>
  <img src="http://via.placeholder.com/50x50" class="draggable" id="item01" alt="item01" />
</div>
<div>
  <img src="http://via.placeholder.com/50x50" class="draggable" id="item01" alt="item01" />
</div>
<div>
  <img src="http://via.placeholder.com/50x50" class="draggable" id="item01" alt="item01" />
</div>
<div>
  <img src="http://via.placeholder.com/50x50" class="draggable" id="item01" alt="item01" />
</div>

<div class="basket"></div>

CSS

.draggable {    
    cursor: move;
    -webkit-user-select: none;
    -khtml-user-drag: element;
    -webkit-user-drag: element;
    display: inline-block;
    margin: 10px;
    padding: 10px;
    width: 80px;
    height: auto;
    border: 1px solid lightblue;
    background: lightyellow;
    text-align: center;
}

.dragging {
    opacity: .5;
}

.basket {
    margin-top: 30px;
    width: 500px;
    height: 100px;
    border: 1px solid gray;
    background: lightgray;
}

.dropping {
    border: 1px dashed lightgray;
    background: whitesmoke;
}

JavaScript

$(".draggable").on({
    dragstart: function(e) {
        console.log("product dragstart");
        $target = $(e.target);
        $target.addClass("dragging");
        e.originalEvent.dataTransfer.setData("text/html", $target.text());
    },
    drag: function(e) {
        console.log("product drag");
    },
    dragend: function(e) {
        console.log("product dragend");
        $(e.target).removeClass("dragging");
    }
});

$(".basket").on({
    dragenter: function(e) {
        console.log("basket dragenter");
        $(e.target).addClass("dropping");
    },
    dragover: function(e) {
        console.log("basket dragover");
        e.originalEvent.dataTransfer.dropEffect = "copy"; // "move", "link"
        return false;        
    },
    dragleave: function(e) {
        console.log("basket dragleave");
        $(e.target).removeClass("dropping");
    },
    drop: function(e) {
        console.log("basket drop");
        $(e.target).removeClass("dropping");
        var $target = $(e.target);
        var dropText = "[" + e.originalEvent.dataTransfer.getData("text/html") + "]";
        $target.text($target.text() + " " + dropText);
    }
});