Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Drag And Drop Example

Drag And Drop Example

Quick demo to show Drag and Drop states using: html css javascript (js) jquery

A Pen by Craig Wayne on CodePen.

License.

<h4>still working on the drag enter event</h4>
<img src="http://imagizer-cv.imageshack.us/a/img641/5669/jarulecmonson.png" draggable="true">
<div class="dropzone">put it on me</div>
<div class=status></div>
$(document).ready(function(){
var dropzone_el = new dropzone($(".dropzone"), {
enter:function(){
$(".status").html(event.type);
},
leave:function(){
$(".status").html(event.type);
},
over:function(){
$(".status").html(event.type);
},
drop:function(){
$(".status").html(event.type);
}
});
});
function dropzone(element,events){
//ref http://html5demos.com/drag#view-source
if(!element){
// console.debug("no element");
return null;
}
else{
events = events || {};
for(var i in events){
element["drag" + i] = events[i];
}
}
$(element).addClass("dropzone");
$(element).on("dragenter",function(){ //this is not working the best
$(this).removeClass("over");
$(this).removeClass("leave");s
$(this).removeClass("drop");
$(this).addClass("drag enter");
element.dragenter();
});
$(element).on("dragover",function(){
event.preventDefault();
$(this).removeClass("leave");
$(this).removeClass("enter");
$(this).removeClass("drop");
$(this).addClass("drag over");
element.dragover();
});
$(element).on("dragleave",function(){
$(this).removeClass("enter");
$(this).removeClass("over");
$(this).removeClass("drop");
$(this).addClass("drag leave");
element.dragleave();
});
$(element).on("drop",function(){
$(this).removeClass("enter");
$(this).removeClass("over");
$(this).removeClass("leave");
$(this).addClass("drag drop");
element.dragdrop();
});
return element;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
body{
text-align:center;
}
.dropzone, img{
display:inline-block;
vertical-align:middle;
}
.dropzone{
border:10px dashed white;
width:300px;
height:300px;
line-height:300px;
text-align:center;
font-size:30px;
transition:border-radius 0.7s ease;
border-radius:0;
margin:auto;
color:black;
}
.dropzone.drag.enter,
.dropzone.drag.over{
background-color:rgb(255, 165, 0);
background-color:rgba(255, 165, 0, 0.6);
border-radius:100%;
border-style:solid;
}
.dropzone.drag.leave{
background-color:#FF7171;
}
.dropzone.drag.drop{
background-color:#68E668;
}
img{
width:100px;
margin:10px 20px;
cursor:drag;
}
.status{
display:block;
&:not(:empty):before{
content:"event: ";
}
}
<link href="https://cdn.rawgit.com/craigwayne/58938f6e7c8492673f97/raw/6ccdee718975b1bacc60b3d0fb6c405cc1dfa8cc/style.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.