TWBS Styled Labels in Tables

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>
<img draggable="true" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MD Logo" ondragenter="handleDragEnter(event)" ondragstart="dragStart(event)" />
<img draggable="true" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MD Logo" ondragenter="handleDragEnter(event)" ondragstart="dragStart(event)"/>
<img draggable="true" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MD Logo" ondragenter="handleDragEnter(event)" ondragstart="dragStart(event)" />

CSS

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

JavaScript

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

function dragStart(event){
    var imageurl = $(this).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);
}
function handleDragEnter(event){
  $(this).addClass(targetClasses[Math.floor(Math.random() * (3 - 0)) + 0]);
  return event.dataTransfer.types.contains("text/plain");
}