touch-dnd

Advanced touch-compatible Drag'n'Drop library providing Draggable, Droppable and Sortable for Zepto.js and jQuery

View the Project on GitHub rkusa/touch-dnd

Sortable

  • A 1
  • A 2
  • A 3
  • A 4
  • B 1
  • B 2
  • B 3
  • B 4

Draggable

Droppable

<script type="text/javascript">
  $(function() {
    $('#lhs').sortable({ connectWith: '.droppable' })
    $('#rhs').sortable({ connectWith: '#lhs' })
    .on('sortable:receive', function(e, ui) {
      ui.item.removeClass('draggable')
    })
    $('.draggable').draggable({ connectWith: '#rhs' })
    $('.droppable').droppable({ activeClass: 'active', hoverClass: 'drop-here' })
  })
</script>

If you need to support Internet Explorer, you can fall back on jQuery. Note that conditional comments are no longer supported starting on IE 10, therefor Zepto's documentation recommends the following document.write approach:

<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>