Drag And Drop Example

Drag And Drop Example .markdown

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.

index.html

<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>

script.js

$(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;

  }

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

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: ";
  }
}

styles

<link href="https://cdn.rawgit.com/craigwayne/58938f6e7c8492673f97/raw/6ccdee718975b1bacc60b3d0fb6c405cc1dfa8cc/style.css" rel="stylesheet" />