Visual Validation on Drag+Drop Targets

by kpowz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div>
<div id="targ" ondragenter="handleDragEnter(event)" class="form-control">
     DRAG DRAGONS INTO ME, PLS.
</div>
   
</div>

    <img draggable="true" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MD Logo"  ondragstart="dragStart(event)" />
    <img draggable="true" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MD Logo"  ondragstart="dragStart(event)"/>
    <img draggable="true" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MD Logo"  ondragstart="dragStart(event)" />
<p> DRAG A DRAGON, PLS </p>

CSS

div{
    background-color: grey;
    min-height: 10rem;
    text-align: center;
}

div.form-control{
    border-width: .5em;
}

JavaScript

var targetClasses=["has-success", "has-warning", "has-error"];

var dragStart = function(event){
    var draggyThing = event.target;
    var imageurl = $(event.target).attr('src');
    var dt = event.dataTransfer;
    dt.mozSetDataAt("image/png", this, 0);
    dt.mozSetDataAt("application/x-moz-file", file, 0);
    dt.setData("text/uri-list", imageurl);
    dt.setData("text/plain", imageurl);
}
var handleDragEnter = function(event){
    var draggyTarget = event.target;
    var idx = Math.floor(Math.random() * (3 - 0)) + 0;
    $(event.target).parent().removeClass();
    $(event.target).parent().addClass(targetClasses[idx]);
    return $.inArray("text/plain", event.dataTransfer.types);
}