Drag'n'drop events

Dragndrop-events.markdown

Drag'n'drop events

Beginning of research about drag'n'drop user experience using Jquery & Jquery UI

Forked from Thibaud B.'s Pen Drag'n'drop events.

A Pen by Captain Anonymous on CodePen.

License.

index.slim

div#wrap

  div#drag
    p Drag me !

  div#drop
    p.drop Drop here

script.js

/*
 * Beginning of research about drag'n'drop user experience
 * using Jquery & Jquery UI
 *
 * 6 steps for the moment:
 * - find the draggable object with mouse reaction
 * - transform the object to a little clone (easier move)
 * - the drop zone is highlighting
 * - this zone valid the transfer with the clone
 * - ...and accept the clone
 * - the clone disappear
 *
 * every messages are usefull notification 
 *
 */

  $(function() {
    $("#drag").draggable({ 
      revert: "invalid",
      revertDuration: 200,
      cursor: "move", 
      helper: "clone",
      cursorAt: { top: 17, left: 80 },
      start: function(event, ui) {
        $('#drop')
          .removeClass("ui-highlight")
            .find("p")
              .html("Drop here");
      },
      drag: function(event, ui) {
        $('#drop')
          .addClass("ui-selected")
          .find("p")
            .html("Yes, here !");
            
       $(".ui-draggable-dragging")
         .find("p")
           .html("Let's go");
      }
    });
  
    $("#drop").droppable({
      activeClass: "ui-hover",
      hoverClass: "ui-active",
      drop: function( event, ui ) {
        $(this)
          .addClass("ui-highlight")
          .find("p")
            .html("Got it !");
      }
    });
  });

style.sass

@import "compass/css3"
body
  background: #3E4651
  color: #F1654C
  text-align: center
  font-family: 'helvetica', arial, sans-serif
  text-transform: uppercase
  
p
  margin-top: 87px
  letter-spacing: 5px
  z-index: 10
  position: relative
  

/* Body */  
  
#wrap
  width: 500px
  margin: 80px auto
  position: relative
  
#drag, #drop
  width: 200px
  height: 200px
  position: absolute
  background: #3E4651
  border-radius: 30px
  
#drag
  left: 0
  border: 2px dashed #F1654C
  color: #F1654C
  opacity: 1
  
#drop
  right: 0
  border: 2px dashed #48515E
  color: #48515E

  
  
/* UI statements */  

#drag:hover
  box-shadow: 0 0 20px -5px #F1654C
  
.ui-selected
  background: #3E4651

.ui-hover
  border: 2px dashed #D4D4D4 !important
  color: #D4D4D4 !important

.ui-active
  border: 2px dashed #00B5B5 !important
  color: #00B5B5 !important

.ui-empty
  border: 2px dashed #48515E !important
  color: #48515E !important
  
.ui-highlight
  border: 2px dashed #D4D4D4 !important
  color: #D4D4D4 !important
  
.ui-draggable-dragging
  border: 2px dashed #F1654C
  z-index: 20
  background: #3E4651
  border-radius: 30px
  opacity: .8
  width: 160px
  height: 35px

.ui-draggable-dragging p
  margin: 0  
  padding: 10px 10px
  
  
  
  
/* transition */

#drag, #drop,
  transition: border 300ms ease

#drag p, #drop p
  transition: color 300ms ease