HTML5 Drag and Drop Library [WIP]

html5-drag-and-drop-library-wip.markdown

HTML5 Drag and Drop Library [WIP]

A Pen by Lisa Benmore on CodePen.

License.

index.html

<div class='dragr container'>	
	<div class='dragr zone'>
		<div class='dragr item'>item 1</div>
		<div class='dragr item'>item 2</div>
		<div class='dragr item'>item 3</div>
		<div class='dragr item'>item 4</div>
		<div class='dragr item'>item 5</div>
	</div>

	<div class='dragr zone'>

	</div>
	
	<div class='dragr zone'>

	</div>
</div>

script.js

class Dragr {
	constructor (container) {
		this.container = container;
		this.zones = [];
		
		for (let zone of container.querySelectorAll('.zone')) {
			let 
			tmp = {},
			items = [];
			
			tmp.element = zone;
			
			for (let item of zone.querySelectorAll('.item')) {
				item.setAttribute('draggable', 'true');
				items.push(item);
			}
			
			tmp.items = items;
			
			this.zones.push(tmp);
		}
		
		this.eventListeners();
	}
	
	dragstart (e) {
		this.active = {};
		this.active.element = e.target;
		this.active.zone = e.target.parentNode;
	}
	
	drop (e) {
		if (e.target.classList.contains('zone')) {
			if (e.target != this.active.zone) {
				let
				sourceZone = this.zones.filter((zone) => {
					return zone.element == this.active.zone;
				})[0],
				destZone = this.zones.filter((zone) => {
					return zone.element == e.target;
				})[0],
				itemIndex = sourceZone.items.indexOf(this.active.element),
				item = sourceZone.items.splice(itemIndex, 1),
				clone = this.active.element.cloneNode(true);
				
				destZone.items.splice(destZone.length, 0, item);
				
				e.target.appendChild(clone);
				this.active.zone.removeChild(this.active.element);
				
				console.dir(this.zones);
				console.table(this.zones);
			}
		}
	}
	
	eventListeners () {
		this.container.addEventListener('dragover', (e)=>{e.preventDefault();});
		this.container.addEventListener('dragstart', this.dragstart.bind(this));
		this.container.addEventListener('drop', this.drop.bind(this));
	}
}

for (let dragr of document.querySelectorAll('.dragr.container')) {
	new Dragr(dragr);
}

style.css

.zone {
	display: inline-block;
	vertical-align: top;
	padding: 24px;
	border: 2px dashed grey;
	border-radius: 8px;
}

.item {
	padding: 8px 24px;
	border: 1px dotted blueviolet;
	border-radius: 4px;
	cursor: pointer;
}

.item:not(:last-of-type) {
	margin-bottom: 8px;
}