dragstart

by David Simpson

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="media" data-item-id="xxxxx">
  <a href="javascript:void(0)">Drag me</a>
</div>


<div class="media" data-folder-id="yyyyy">
<p>
<a href="javascript:void(0)">Drop here</a>
</p>
</div>

CSS

.dragOver {
  color: hotpink;
}

JavaScript

$(function () {
			var dragStartElement;
      
      $('a').bind('dragstart', function (e) {
               console.log(' ++ ' + e.type, e);
               var baseEvent = e; // should not happen ;)

                if (e.originalEvent.srcElement) {  // chrome, safari, ie11, 
                    baseEvent = e.originalEvent.srcElement
                    console.log(' ++++ e.originalEvent.srcElement');

                } else if (e.originalEvent.originalTarget) {  // firefox
                    baseEvent = e.originalEvent.originalTarget;
                     console.log(' ++++ e.originalEvent.originalTarget');
               }

                dragStartElement = {
                    id: $(baseEvent).parents('div.media:first').data('item-id'),
                    name: $(baseEvent).text().trim()
                };
                console.log(' ++ dragStartElement: ', dragStartElement);
            })
            .bind('dragenter', function (e) {
               console.log(' ++ ' + e.type, e);
                e.stopImmediatePropagation();
                e.preventDefault();
                return false;
            })
            .bind('dragover', function (e) {
//               console.log(' ++ ' + e.type, e);
                $(e.currentTarget).addClass("dragOver");
                e.originalEvent.dataTransfer.dropEffect = "copy";
                e.stopImmediatePropagation();
                e.preventDefault();
                return false;
            })
            .bind('dragleave', function (e) {
               console.log(' ++ ' + e.type, e);
                $(e.currentTarget).removeClass("dragOver");
                e.stopImmediatePropagation();
                e.preventDefault();
                return false;
            })
            .bind('drop', null, function (e) {
               console.log(' ++ ' + e.type, e);
                e.stopImmediatePropagation();
                e.preventDefault();
                
                var dragTarget = {
       ...