Playing with Sortable

by ramnathv

HTML

<script src="//rubaxa.github.io/Sortable/Sortable.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<div class="container-fluid" id='main'>
       <div class="col-xs-4 col-md-2">
       <div class="panel panel-default">
  <div class="panel-body">
       <ul id="mylist0" class='list-unstyled'>
       <li>Label 1</li>
    <li>Label 2</li>
    <li>Label 3</li>
               
</ul>
           </div></div></div>
   <div class="col-xs-6">
       <div class="panel panel-default">
  <div class="panel-body">
       <ul id="mylist" class='list-unstyled'>
       <li class='active'>Label 1</li>
</ul>
           </div></div></div>
     <div class="col-xs-6">
         <div class="panel panel-default">
  <div class="panel-body">
       <ul id="mylist2" class='list-unstyled'>
       <li class='active'>Label 4</li>
      </ul></div></div>
   </div>
    
</div>

CSS

body{padding-top:60px;padding-left:20px;}
.drag-handle{
  cursor: pointer;
  margin-right: 5px;
}
#mylist2{min-height:5px;}
#mylist0 li:hover{
  cursor: move;
}

CoffeeScript

list = ["mylist", "mylist2"]

list.forEach (id) ->
    el = document.getElementById(id)
    Sortable.create(el,  {
      group: {
        name: 'same',
        pull: false
      },
      #handle: '.drag-handle',
      onAdd: (evt) ->
        itemEl = evt.item
        console.log d3.select(evt.item).text()
        d3.select("#" + id)
          .selectAll('.active')
          .remove()
        d3.select("#" + id)
          .selectAll("li")
          .classed("active", true)
    })


el = document.getElementById("mylist0")
Sortable.create(el,  {
  sort: false,
  group: {
    name: 'same',
    #put: ['mylist', 'mylist2']
    pull: 'clone'
  },
  #handle: '.drag-handle'
})