Drag and Drop using jQuery Core Infrastructure

Question

Is it possible to achieve drag and drop using a basic jQuery script (without using jQuery UI)?

Answer 1

HTML5 has the "draggable" attribute.

<div draggable='true'>Drag me</div> <div id='dropzone'>Drop it here!</div> 

You can use the following events:

 var onDragEnter = function(event) { event.preventDefault(); $("#dropzone").addClass("dragover"); }, onDragOver = function(event) { event.preventDefault(); if(!$("#dropzone").hasClass("dragover")) $("#dropzone").addClass("dragover"); }, onDragLeave = function(event) { event.preventDefault(); $("#dropzone").removeClass("dragover"); }, onDrop = function(event) { event.preventDefault(); $("#dropzone").removeClass("dragover"); console.log(event.originalEvent.dataTransfer.files); }; $("#dropzone") .on("dragenter", onDragEnter) .on("dragover", onDragOver) .on("dragleave", onDragLeave) .on("drop", onDrop); 

Hope this helps for now.