Drag and Drop

by Nipuna Gunathilake

HTML

<div class="draggable">Banana</div>
<div class="draggable">Apple</div>
<div class="draggable">Potato</div>
<div class="draggable">Tomato</div>
<div class="basket"></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 {
    width: 500px;
    height: 100px;
    border: 1px solid gray;
    background: lightgray;
}

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

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