Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js'></script>
</head>
<body>
  <div id='app'></div>
  <style type='text/css'>
    ul {
      padding: 50px;
      background-color: grey;
    }
  </style>
</body>
</html>
 
var controller = function (args) {
  var ctrl = this
    
  this.groups = m.prop([
    {
      name: 'Group A',
      dragOver: false,
      items: ['Draggable One', 'Draggable Two']
    },
    {
      name: 'Group B',
      dragOver: false,
      items: []
    }
  ])
  
  this.dragging = m.prop({})
  
  this.handleDragEnter = function (groupIdx) {
    ctrl.groups()[groupIdx].dragOver = true
  }
  
  this.handleDragLeave = function (groupIdx) {
    ctrl.groups()[groupIdx].dragOver = false
  }
  
  this.handleDrop = function (toGroupIdx) {
    var groupIdx = ctrl.dragging().groupIdx
    var itemIdx = ctrl.dragging().itemIdx
    var dropped = ctrl.groups()[groupIdx].items.splice(itemIdx, 1)[0]
    
    ctrl.groups()[toGroupIdx].items.push(dropped)
    ctrl.groups()[toGroupIdx].dragOver = false
    ctrl.dragging(null)
  }
  
  this.handleDragStart = function (data) {
    ctrl.dragging(data)
  }
​
}
​
var view = function (ctrl, args) {
  return m('.all-groups', ctrl.groups().map(function (group, groupIdx) {
    
    return m('.group',[
      m('.header', group.name),
      m('ul', {
        style: {
          background: (
            group.dragOver ? 
            'blue'
            : ''
          )
        },
        ondragenter: function () {
          if (ctrl.dragging().groupIdx !== groupIdx) {
            ctrl.handleDragEnter(groupIdx)
          }
        },
        ondragleave: function () {
          ctrl.handleDragLeave(groupIdx)
        },
        ondragover: function (e) { 
          e.preventDefault()
        },
        ondrop: function () {
          ctrl.handleDrop(groupIdx)
        }
      }, group.items.map(function (name, itemIdx) {
        return m('li', {
          draggable: true, 
          group: groupIdx, 
          item: itemIdx,
          ondragstart: function () {
            ctrl.handleDragStart({
              groupIdx: groupIdx,
              itemIdx: itemIdx
            })
          }
        }, name)
      }))
    ])
    
  }))
}
​
m.mount(document.getElementById('app'), {
  controller: controller,
  view: view
})
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
abradley2pro
0viewers