Accessible Draggable UI

Accessible Draggable UI.markdown

Accessible Draggable UI

Test for draggable and droppable gallery using jQuery UI

A Pen by Lisa Folkerson on CodePen.

License.

index.html

.wrapper
  .boxes
    .box(aria-grabbed='false')(tabindex='0')
      p.change ✿
    .box(aria-grabbed='false')(tabindex='0')
      p.change ✆
    .box(aria-grabbed='false')(tabindex='0')
      p.change ★
    .box(aria-grabbed='false')(tabindex='0')
      p.change ♡
    .box(aria-grabbed='false')(tabindex='0')
      p.change ☭
    .box(aria-grabbed='false')(tabindex='0')
      p.change ✄
      
  p.explain drag and drop from above to below  
  p.explain when tabbing press enter to select current
  p.explain you can also use the arrow keys once tab is activated

  .dropZone(aria-dropEffect='none')
    p.count 0
    p.changingText ✌
  
  

script.js

// document ready
$(function() {
  //define variables
  var counts = 0,
    $gallery = $('.boxes'),
    $dropZone = $('.dropZone'),
    $box = $( '.box' );

  // make box draggable
  $box.draggable({
    revert: false,
    helper: 'clone',
    scroll: true,
    drag: function(){
      $( this ).attr( 'aria-grabbed', 'true' );
      $dropZone.attr( 'aria-dropEffect', 'execute' );
    },
    stop: function(){
      $( this ).attr( 'aria-grabbed', 'false' );
    $dropZone.attr( 'aria-dropEffect', 'none' );
    }
  }); // end .box draggable();

  //set the dropZone to be droppable target
  $dropZone.droppable({
    activeClass: 'focus-state',
    hoverClass: 'ui-state-hover',
    drop: function(event, ui) {
      $( this ).find( '.changingText' ).text( ui.draggable.text() ).removeClass( 'change ').addClass('tada animated changingText' ).appendTo (this );
      counts++;
      $( 'p.count' ).text( counts );
    }
  }); // end droppable();

  //keyboard control when tabbing
  $box.bind('keyup', function(e) {
    e.preventDefault();
    var elem = $( this )[0];

    if ( e.keyCode === 13 ) { // enter
      $( '.changingText' ).remove();  
      $( elem ).find( 'p' ).clone().appendTo( '.dropZone' ).addClass( 'changingText tada animated' ).removeClass( 'change' );
      counts++;
      $('p.count').text(counts);
  } else if( e.which === 37) { //left arrow
      $( '.box:focus' ).prev().focus();       
  } else if( e.which === 39 ) { //right arrow
      $( '.box:focus' ).next().focus(); 
    } //end right arrow
  }); // end keyup function
  
}); // end doc ready

scripts

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

style.css

html {
  background: mistyrose;
}

.wrapper {
  width: 100%;
  text-align: center;
  font-size: 0;
}

.wrapper * {
  box-sizing: border-box;
}

p {
  font-size: 72px;
  margin: auto;
  display: inline-block;
  font-family: helvetica, arial, sans-serif;
}

p.explain {
  font-size: 4vw;
  font-style: italic;
  padding: 0;
  line-height: 5.5vw; 
  max-width: 95%;
}

.boxes {
  width: 100%;
  float: left;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
  position: relative;
  -ms-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0 40px;

}

.box {
  background: rgba(152,249,242,0.9);
  border: 1px solid gainsboro;
  box-shadow: 1px 1px 8px 2px rgba(0,0,0,0.1);
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 1%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  -ms-flex: 1 auto;
  -webkit-flex: 1 auto;
  flex: 1 auto;
  cursor: move;
  
  p {
    line-height: 72px;
    margin: auto;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

.box:focus {
  background: rgba(252,249,222,0.9);
}

.dropZone {
  border: 1px solid gainsboro;
  width: 95%;
  display: inline-block;
  overflow: hidden;
  background: rgba(0,0,0,0.1);
  box-shadow: 1px 1px 8px 2px rgba(0,0,0,0.1);
  margin-top: 10px;
  
  p {
    font-size: 36.5vw;
    line-height: 36.5vw;
  }
}

.focus-state {
  box-shadow: 0 0 10px 10px rgba(152,249,242,0.5);
}

styles

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />