drag and drop riot with list reorder

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.4.1/riot+compiler.min.js"></script>
<div riot-tag="drag-lists" class="drag-list"></div>
<script type="riot/tag">
<drag-lists ondrop={on_drop_l} ondragover={on_drag_over_l}>
  	<div class='list' each={ list, i in this.lists } ondrop={parent.on_drop}
    	ondragover={parent.on_drag_over}
      draggable="true"
      ondragend={parent.drag_end_l}
      ondragstart={parent.drag_start_l}>
    	<p>{ list.name }</p>
      <div class="page" draggable="true" each={ page in list.pages}
      	ondragend={parent.drag_end}
      	ondragstart={parent.drag_start}>
      	{page.name}
      </div>
    </div>

	this.lists=opts.lists;
  this.pageId=null;
  this.isPage=null; //distinguish list of page when dragging

  
  this.on('mount', function() {
    this.placeholder=document.createElement("div");
    this.placeholder.className = "placeholder";
    this.placeholderL=document.createElement("div");
    this.placeholderL.className = "placeholder_l";
  })
  
  //DRAG LIST ///////
  on_drop_l(event){
  	if(this.isPage) return;
  	//console.log("dropL")
  	var pos = 0;
    var children=this.placeholderL.parentNode.children;
		for(var i=0;i<children.length;i++){
    	if(children[i]==this.placeholderL) break;
    	if(children[i]!=this.dragged && children[i].classList.contains("list"))
      	pos++;
    }
		//console.log(pos,this.pageId);
    var list=null;
    for(var i=0;i<this.lists.length;i++){
          	console.log(this.lists[i].name)
    	if(this.lists[i].name==this.pageId){
      	list=this.lists.splice(i,1)[0];
      }
    }
    //console.log(list,pos);
    this.lists.splice(pos,0,list);
    //console.log(this.lists);
    this.update();
  }
  
  drag_start_l(event){ 
  		//console.log("drag_start_l");
      if(!this.isPage){
      	this.dragged=event.target;
        this.pageId=event.item.list.name;
      }
      event.dataTransfer.setData('text', 'foo');
      return true;
  }
  
  drag_end_l(event){ 
 ...

CSS

html,body{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
}

.drag-list{
  width:100%;height:100%;
  background:#49F;
}

.drag-list .list{
  background:#e1e1e1;
  border-radius:2px;
  margin:4px;
  width:120px;
  float:left;
}

.drag-list .list p { 
  text-align:left; 
  margin:10px 10px 10px 10px; 
  font-weight:bold;
  user-select: none;
  -webkit-user-select: none;
  color:#888;
}

.drag-list .page{
  background:#fafafa;
  width:90px;
  cursor: pointer;
  text-align:center;
  margin:4px;
  margin-left:10px;
  padding:4px;
  border-radius:4px;
  color:#666;

}

.drag-list .list .page:hover{ 
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .2);
  transform: translateY(-1px);
  }

.rotated {transform: rotateZ(6deg);}

.drag-list .placeholder{
    width:90px;
    height:22px;
    margin:4px;
    margin-left:10px;
    border-width:2px;
    border-style:dashed;
    border-radius:4px;
    border-color:#aaa;
}

.drag-list .placeholder_l{
    background:rgba(0,0,0,0.3);
    border-radius:2px;
    margin:4px;
    width:120px;
    height:20px;
    float:left;
}

JavaScript

riot.mount('drag-lists',{lists:
    		[{name:'list1',
        	pages:[{name:'page1'}, {name:'page2'},{name:'page3'}]},
        {name:'list2'}, {name:'list3'}, {name:'list4',pages:[{name:'page4'}, {name:'page7'}, {name:'page8'}, {name:'page9'}]}
        ]});