Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ortable: `put: []` demo</title>
  <!-- AngularJS -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <!-- Sortable.js -->
  <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
  
</head>
<body>
  
  <ul id="foo">
    <li>foo 1</li>
    <li>foo 2</li>
    <li>foo 3</li>
  </ul>
  <ul id="bar">
    <li>bar 1</li>
    <li>bar 2</li>
    <li>bar 3</li>
  </ul>
  
</body>
</html>
 
ul {
  list-style: none;
  padding: 0;
}
li {
  background: #eee;
  margin: 1px;
  padding: 5px 10px;
}
.sortable-ghost {
  opacity: .6;
}
 
// Open DevTools > Console
var options = {
  group: 'share',
  animation: 100
};
events = [
  'onChoose',
  'onStart',
  'onEnd',
  'onAdd',
  'onUpdate',
  'onSort',
  'onRemove',
  'onChange',
  'onUnchoose'
].forEach(function (name) {
  options[name] = function (evt) {
    console.log({
      'event': name,
      'this': this,
      'item': evt.item,
      'from': evt.from,
      'to': evt.to,
      'oldIndex': evt.oldIndex,
      'newIndex': evt.newIndex
    });
  };
});
Sortable.create(foo, options);
Sortable.create(bar, options);
Output

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

Dismiss x
public
Bin info
owen-m1pro
0viewers