zepto-dnd

HTML5 Drag'n'Drop API based Draggable, Droppable and Sortable for Zepto.js (and jQuery)

View the Project on GitHub rkusa/zepto-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()
    $('#rhs').sortable({ connectWith: '#lhs' })
    .on('sortable:receive', function(e, ui) {
      ui.item.removeClass('draggable')
    })
    $('.draggable').draggable({ connectWith: '#rhs' })
    $('.droppable').droppable()
  })
</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>