Dragula with localstorage

by Milomir Topic

HTML

<script src="https://rawgit.com/bevacqua/dragula/master/dist/dragula.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/bevacqua/dragula/master/dist/dragula.min.css">
<div class="container" id="left">
   <div id="element1">One<br>sadwdawda</div>
   <div id="element2">
     <div class="aa">1</div>
     <div class="aa">2</div>
   </div>
   <div id="element3">Three</div>  
</div>
<div class="container" id="right">
  <div id="element4">Four</div>
   <div id="element5">Five</div>
   <div id="element6">Six</div>
   <div id="element7">Seven</div>
</div>

CSS

.container {
    float: left;
    width: 48%;
    margin-right: 2%;
    padding: 10px;
    min-height: 300px;
    background-color: rgba(0, 0, 0, 0.2);
    transition: opacity 0.4s ease-in-out;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    box-sizing: border-box;
}
.container div {
    padding: 10px 15px;
    margin: 10px 0;
    background-color: rgba(0, 0, 0, 0.2);
}
}

#element2 {
  display: flex;
}

JavaScript

var dragAndDrop = {

    store: [],
    
    init: function () {  
    
    		self = this;
        this.dragula();
        this.eventListeners(); 
        
        if(localStorage.getItem('store'))
        	this.store = JSON.parse(localStorage.getItem('store'));
          
        // querySelectorAll returns a nodelist and should be converted to array to use filter, map and foreach  
        var nodesArray = Array.prototype.slice.call(document.querySelectorAll("#left div"));      
        
        var nodesArray = nodesArray.filter( function(e) { 
        	return self.store.map(function(d) { return d['element']; }).indexOf(e.id) === -1; 
        }).forEach( function(e) { 
        	self.store.push({'element':e.id, 'container': 'left'}); 
        });  
        
        this.store.forEach(function( obj ) {
        		document.getElementById(obj.container).appendChild(document.getElementById(obj.element));                        
        });
    },

    eventListeners: function () {
        this.dragula.on('drop', this.dropped.bind(this));
    },

    dragula: function () {
        this.dragula = dragula([document.getElementById('left'), document.getElementById('right')],
        {           
            copy: false,
        });
    },   
   
    
    dropped: function (el, target, source, sibling) {
    		// Remove element from store if it exists
    		var indexEl = this.store.map(function(d) { return d['element']; }).indexOf(el.id);
        if (indexEl>-1)
    			this.store.splice(indexEl, 1);         
        
        var indexDrop = this.store.length;
        if(sibling) { // If sibling store before sibling          	
            indexDrop = this.store.map(function(d) { return d['element']; }).indexOf(sibling.id);     
        }
       
        this.store.splice(indexDrop, 0, {'element': el.id, 'container': target.id}); 
        
        localStorage.setItem('store', JSON.stringify(this.store));
    }
}

dragAndDrop.init();