A Pen by Karl Saunders

Developer
Karl Saunders
Size
11,295 Kb
Views
10,120
  1. A Pen by Karl Saunders Previews
  2. A Pen by Karl Saunders HTML Codes
  3. A Pen by Karl Saunders CSS Codes
  4. A Pen by Karl Saunders JS Codes

How do I make an a pen by karl saunders?

What is a a pen by karl saunders? How do you make a a pen by karl saunders? This script and codes were developed by Karl Saunders on 20 November 2022, Sunday.

A Pen by Karl Saunders Previews
IQ Test

A Pen by Karl Saunders - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Karl Saunders</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato'>
<link rel='stylesheet prefetch' href='http://cdn.materialdesignicons.com/1.7.22/css/materialdesignicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="dd" id="nestable">	<ol class="dd-list">	<li class="dd-item" data-id="1">	<div class="dd-handle">Item 1</div>	</li>	<li class="dd-item" data-id="2">	<div class="dd-handle">Item 2</div>	</li>	<li class="dd-item" data-id="3">	<div class="dd-handle">Item 3</div>	</li>	<li class="dd-item" data-id="4">	<div class="dd-handle">Item 4</div>	<ol class="dd-list">	<li class="dd-item" data-id="5">	<div class="dd-handle">Item 5</div>	</li>	<li class="dd-item" data-id="6">	<div class="dd-handle">Item 6</div>	</li>	<li class="dd-item" data-id="7">	<div class="dd-handle">Item 7</div>	<ol class="dd-list">	<li class="dd-item" data-id="8">	<div class="dd-handle">Item 8</div>	</li>	<li class="dd-item" data-id="9">	<div class="dd-handle">Item 9</div>	</li>	<li class="dd-item" data-id="10">	<div class="dd-handle">Item 10</div>	</li>	</ol>	</li>	</ol>	</li>	</ol>	</div>
</div>
<div id="events">	<h4>Drag and Drop API events</h4>	<div class="event" data-event="dragstart">dragstart</div>	<div class="event" data-event="dragover">dragover</div>	<div class="event" data-event="dragenter">dragenter</div>	<div class="event" data-event="drag">drag</div>	<div class="event" data-event="dragleave">dragleave</div>	<div class="event" data-event="dragend">dragend</div>	<div class="event" data-event="dragexit">dragexit</div>	<div class="event" data-event="drop">drop</div>	<h4>Nestable events</h4>	<div class="event" data-event="reordered">reordered</div>	<div class="event" data-event="regrouped">regrouped</div>	<div class="event" data-event="layout.saved">layout.saved</div>	<div class="event" data-event="layout.loaded">layout.loaded</div>	<h4>Serialized Data</h4>	<textarea id="data" rows="5"></textarea>	<h4>Options</h4>	<input type="checkbox" id="animate" checked/><label for="animate">Animation</label>	<h4>Methods</h4>	<div id="methods">	<button data-method="saveLayout" class="btn primary">Save Layout</button>	<button data-method="loadLayout" class="btn primary">Load Layout</button>	</div>
</div> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/utils.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Karl Saunders - Script Codes CSS Codes

body { font-family: 'Lato'; font-size: 16px; overflow: hidden; margin: 0;
}
h4 { font-weight: 500; margin: 5px 0;
}
ol.dd-dragel { margin: 0; padding: 0;
}
label { cursor: pointer; padding: 0 20px 0 30px; position: relative;
}
label::before { position: absolute; content: ""; left: 0; top: 0; width: 20px; height: 20px; border: 3px solid #999; box-sizing: border-box;
}
label::after { position: absolute; content: ""; left: 5px; top: 5px; width: 10px; height: 10px; background-color: #999; display: none;
}
input { position: absolute !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 none !important;
}
input:checked + label::before { border-color: #666;
}
input:checked + label::after { display: block; background-color: #666;
}
.container { width: 30%; position: absolute; left: 35%; top: 25%;
}
#nestable { width: 100%;
}
.dd { display: block; line-height: 20px; list-style: outside none none; margin: 0; max-width: 600px; padding: 0; position: relative;
}
.dd-list { display: block; list-style: outside none none; margin: 0; padding: 0; position: relative;
}
.dd-list .dd-list { padding-left: 30px;
}
.dd-collapsed .dd-list { display: none;
}
.dd-item,
.dd-empty,
.dd-placeholder { display: block; line-height: 40px; margin: 0; min-height: 40px; padding: 0; position: relative; line-height: 18px;
}
.dd-empty { pointer-events: none;
}
.dd-item { z-index: 1000; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.dd-placeholder { z-index: 999;
}
.dd-handle { background: transparent -moz-linear-gradient(center top, #fafafa 0%, #eee 100%) repeat scroll 0 0; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; color: #333; display: block; font-weight: 500; height: 40px; line-height: 28px; margin: 5px 0; padding: 5px 10px; text-decoration: none; cursor: move;
}
.dd-handle:hover { background: #fff none repeat scroll 0 0; color: #2ea8e5;
}
.dd-item > button { background: transparent none repeat scroll 0 0; border: 0 none; cursor: pointer; display: block; float: left; font-weight: bold; height: 40px; line-height: 1; overflow: hidden; padding: 0; position: relative; text-align: center; text-indent: 100%; white-space: nowrap; width: 25px;
}
.dd-item > button::before { font-family: "Material Design Icons"; content: "\F142"; display: block; position: absolute; text-align: center; text-indent: 0; width: 100%; vertical-align: middle;
}
.dd-item > button[data-action="collapse"]::before { content: "\F140";
}
.dd-placeholder,
.dd-empty { background: #f2f4f8 none repeat scroll 0 0; border: 1px dashed #bbb8cb; border-radius: 3px; margin: 5px 0; min-height: 40px; padding: 0; box-sizing: border-box;
}
.dd-empty { background-color: #ffffff; border: 1px dashed #eceff4; min-height: 100px;
}
.dd-dragel { pointer-events: none; position: absolute; z-index: 9999;
}
.dd-dragel > .dd-item .dd-handle { margin-top: 0;
}
.dd-dragel .dd-handle { box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
}
.btn { background-color: #999; border: 1px solid #999; border-radius: 3px; color: #fff; font-family: "Roboto"; font-weight: 500; padding: 5px 10px; cursor: pointer; line-height: 18px; -webkit-transition: background-color 250ms ease 0ms; transition: background-color 250ms ease 0ms;
}
.btn.primary { background-color: #0077db; border-color: #0077db;
}
.btn.primary:hover { background-color: #007fea; border-color: #007fea;
}
.btn.danger { background-color: #fa424a; border-color: #fa424a;
}
.btn.danger:hover { background-color: #fa5158; border-color: #fa5158;
}
.btn.success { background-color: #46c35f; border-color: #46c35f;
}
.btn.success:hover { background-color: #52c769; border-color: #52c769;
}
#events { padding: 10px; position: fixed; right: 0; top: 0; width: 300px;
}
#data { width: calc(100% - 5px);
}
.event { background-color: rgba(200, 200, 200, 0.5); color: #999; float: left; height: 40px; width: 150px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.event.active { background-color: rgba(0, 200, 0, 0.5); color: #fff;
}

A Pen by Karl Saunders - Script Codes JS Codes

(function(global) {	'use strict';	var _hasPointerEvents = function() {	var a = document.createElement("div"),	b = document.documentElement;	if (!("pointerEvents" in a.style)) return !1;	a.style.pointerEvents = "auto", a.style.pointerEvents = "x", b.appendChild(a);	var c = window.getComputedStyle && "auto" === window.getComputedStyle(a, "").pointerEvents;	return b.removeChild(a), !!c	};	var _extend = function (src, props) {	var p;	for (p in props)	if (props.hasOwnProperty(p)) src[p] = props[p];	return src;	}	var Emitter = function() {};	Emitter.prototype = {	on: function(event, fct) {	this._events = this._events || {};	this._events[event] = this._events[event] || [];	this._events[event].push(fct);	},	off: function(event, fct) {	this._events = this._events || {};	if (event in this._events === false) return;	this._events[event].splice(this._events[event].indexOf(fct), 1);	},	emit: function(event /* , args... */ ) {	this._events = this._events || {};	if (event in this._events === false) return;	for (var i = 0; i < this._events[event].length; i++) {	this._events[event][i].apply(this, Array.prototype.slice.call(arguments, 1));	}	}	};	Emitter.mixin = function(obj) {	var props = ['on', 'off', 'emit'];	for (var i = 0; i < props.length; i++) {	if (typeof obj === 'function') {	obj.prototype[props[i]] = Emitter.prototype[props[i]];	} else {	obj[props[i]] = Emitter.prototype[props[i]];	}	}	return obj;	};	var _hasClass = function(e,c) {	return e.classList ? e.classList.contains(c) : !!e.className.match(new RegExp('(\\s|^)'+c+'(\\s|$)'));	}	var _addClass = function(a, b) {	a.classList ? a.classList.add(b) : _hasClass(b) || (a.className = a.className.trim() + " " + b)	};	var _removeClass = function(a, b) {	a.classList ? a.classList.remove(b) : _hasClass(b) && (a.className = a.className.replace(new RegExp("(^|\\b)" + b.split(" ").join("|") + "(\\b|$)", "gi"), " "))	};	var _forEach = function(a, b, c) {	for (var e = 0, f = a.length; e < f; e++) b.call(c, e, a[e], a)	};	var _match = function(a, b) {	var c = b.charAt(0);	return !("." !== c || !_hasClass(a, b.substr(1))) || ("#" === c && a.id === b.substr(1) || (!("[" !== c || !a.hasAttribute(b.substr(1, b.length - 1))) || a.tagName.toLowerCase() === b))	};	var _closest = function(el, selector) {	while (!_match(el, selector)) {	el = el.parentNode;	if (!el || el === document.body ) {	return null;	}	}	return el;	};	var _parents = function(a, b) {	var d, c = [];	if (b)	for (d = b.charAt(0); a && a !== document; a = a.parentNode) _match(a, b) && c.push(a);	return c	};	var _children = function(a, b) {	var c = [];	if (b && a.children.length) {	b.charAt(0);	_forEach(a.children, function(a, d) {	_match(d, b) && c.push(d)	})	}	return c	};	var _after = function(a, b) {	a.nextSibling ? a.parentNode.insertBefore(b, a.nextSibling) : a.parentNode.appendChild(b)	};	var _css = function(a, b, c) {	var d = a && a.style;	if (d) {	if (!c) return document.defaultView && document.defaultView.getComputedStyle ? c = document.defaultView.getComputedStyle(a, "") : a.currentStyle && (c = a.currentStyle), void 0 === b ? c : c[b];	b in d || (b = "-webkit-" + b), d[b] = c + ("string" == typeof c ? "" : "px")	}	};	var _newElement = function(a, b) {	var c = document,	d = c.createElement(a);	if (b && "object" == typeof b) {	var e;	for (e in b)	if ("html" === e) d.innerHTML = b[e];	else if ("text" === e) {	var f = c.createTextNode(b[e]);	d.appendChild(f)	} else d.setAttribute(e, b[e])	}	return d	};	var _debounce = function(a, b, c) {	var d;	return function() {	var e = this, f = arguments, g = function() { d = null, c || a.apply(e, f) }, h = c && !d;	clearTimeout(d), d = setTimeout(g, b), h && a.apply(e, f)	}	};	var _events = ['mousedown', 'mouseup', 'dragstart', 'dragenter', 'drag', 'dragend', 'dragexit', 'dragover', 'drop'];	/** * Nestable Object * @param nodes The html nodes to initialize * @param {Object} options User options * @constructor */	function Nestable(element, opts) {	var defaults = {	listNodeName : 'ol',	itemNodeName : 'li',	rootClass : 'dd',	listClass : 'dd-list',	itemClass : 'dd-item',	dragClass : 'dd-dragel',	handleClass : 'dd-handle',	parentClass	: 'dd-parent',	collapsedClass : 'dd-collapsed',	placeClass : 'dd-placeholder',	noDragClass : 'dd-nodrag',	emptyClass : 'dd-empty',	expandBtnHTML : '<button data-action="expand" type="button">Expand</button>',	collapseBtnHTML : '<button data-action="collapse" type="button">Collapse</button>',	group : 0,	maxDepth : 5,	threshold	: 20,	animation	: 150,	};	this.hasPointerEvents = _hasPointerEvents();	this.hasTouch = 'ontouchstart' in document;	this.scrollX = window.scrollX || window.pageXOffset;	this.scrollY = window.scrollY || window.pageYOffset;	this.w = document;	this.el = element;	this.options = _extend(defaults, opts);	this.init();	}	// Nestable prototype	Nestable.prototype = {	init: function()	{	var _this = this;	Emitter.mixin(this);	this.reset();	_this.el.setAttribute('data-nestable-group', this.options.group);	var nodes = this.el.querySelectorAll(_this.options.itemNodeName);	_forEach(nodes, function(i, el) {	_this.setParent(el);	});	_this.el.addEventListener('click', function(e) {	var target = e.target, isButton = target.nodeName.toLowerCase() === 'button' && target.hasAttribute('data-action');	if ( isButton ) {	e.preventDefault();	var action = target.getAttribute('data-action'),	item = target.parentNode;	if (action === 'collapse') {	_this.collapseItem(item);	}	if (action === 'expand') {	_this.expandItem(item);	}	}	});	_this.handlers = [];	_forEach(_events, function(i,event) {	_this.handlers[event] = _this[event].bind(_this);	_this.el.addEventListener(event, _this.handlers[event], false);	});	_this.resize = _debounce(function() {	_this.scrollX = window.scrollX || window.pageXOffset;	_this.scrollY = window.scrollY || window.pageYOffset;	}, 100);	window.addEventListener('scroll', _this.resize);	this.saveLayout(true);	},	mousedown: function(e)	{	var target = e.target;	var rightclick;	if (e.which) rightclick = (e.which == 3);	else if (e.button) rightclick = (e.button == 2);	if ( !rightclick && target !== this.el.firstElementChild ) {	this.dragging = true;	this.dragItem = _hasClass(target, this.options.itemNodeName) ? target : _closest(target, this.options.itemNodeName);	this.dragItem.draggable = true;	this.activeIdx = [].slice.call(this.dragItem.parentNode.children).indexOf(this.dragItem);	this.originX = e.clientX;	this.originY = e.clientY;	this.dragRect = this.dragItem.getBoundingClientRect();	var clone = this.dragItem.cloneNode(true);	this.mouse.offsetX = e.offsetX !== undefined ? e.offsetX : e.pageX - this.dragRec.left;	this.mouse.offsetY = e.offsetY !== undefined ? e.offsetY : e.pageY - this.dragRec.top;	this.mouse.startX = this.mouse.lastX = e.pageX;	this.mouse.startY = this.mouse.lastY = e.pageY;	this.dragRootEl = this.el;	this.dragEl = _newElement(this.options.listNodeName, { class: this.options.dragClass + ' ' + this.options.listClass});	_css(this.dragEl, 'width', this.dragRect.width);	_css(this.dragEl, 'top', this.dragRect.top + this.scrollY);	_css(this.dragEl, 'left', this.dragRect.left + this.scrollX);	this.dragEl.appendChild(clone);	document.body.appendChild(this.dragEl);	// total depth of dragging item	var _this = this, depth,	items = this.dragEl.querySelectorAll(this.options.itemNodeName);	_forEach(items, function(i,item) {	depth = _parents(item, _this.options.listNodeName).length;	if (depth > _this.dragDepth) {	_this.dragDepth = depth;	}	});	}	},	dragstart: function(e)	{	// e.preventDefault();	e.dataTransfer.effectAllowed = 'copy';	e.dataTransfer.setData('text/html', '');	this.emit('nestable.dragstart');	this.setPlaceEl();	},	dragover: function(e)	{	if (e.preventDefault) {	e.preventDefault();	}	this.emit('nestable.dragover');	e.dataTransfer.dropEffect = 'over';	var _this = this, list, parent, prev, next, depth,	opt = this.options,	mouse = this.mouse;	// mouse position last events	mouse.lastX = mouse.nowX;	mouse.lastY = mouse.nowY;	// mouse position this events	mouse.nowX = e.pageX;	mouse.nowY = e.pageY;	// distance mouse moved between events	mouse.distX = mouse.nowX - mouse.lastX;	mouse.distY = mouse.nowY - mouse.lastY;	// direction mouse was moving	mouse.lastDirX = mouse.dirX;	mouse.lastDirY = mouse.dirY;	// direction mouse is now moving (on both axis)	mouse.dirX = mouse.distX === 0 ? 0 : mouse.distX > 0 ? 1 : -1;	mouse.dirY = mouse.distY === 0 ? 0 : mouse.distY > 0 ? 1 : -1;	// axis mouse is now moving on	var newAx = Math.abs(mouse.distX) > Math.abs(mouse.distY) ? 1 : 0;	this.mouseY = mouse.nowY;	// do nothing on first move	if (!mouse.moving) {	mouse.dirAx = newAx;	mouse.moving = true;	return;	}	// calc distance moved on this axis (and direction)	if (mouse.dirAx !== newAx) {	mouse.distAxX = 0;	mouse.distAxY = 0;	} else {	mouse.distAxX += Math.abs(mouse.distX);	if (mouse.dirX !== 0 && mouse.dirX !== mouse.lastDirX) {	mouse.distAxX = 0;	}	mouse.distAxY += Math.abs(mouse.distY);	if (mouse.dirY !== 0 && mouse.dirY !== mouse.lastDirY) {	mouse.distAxY = 0;	}	}	mouse.dirAx = newAx;	/** * move horizontal */	if (mouse.dirAx && mouse.distAxX >= opt.threshold) {	// reset move distance on x-axis for new phase	mouse.distAxX = 0;	// prev = this.placeEl.prev(opt.itemNodeName);	prev = this.placeEl.previousElementSibling;	// increase horizontal level if previous sibling exists and is not collapsed	if (prev && mouse.distX > 0 && !_hasClass(prev, opt.collapsedClass)) { // cannot increase level when item above is collapsed	list = prev.querySelectorAll(opt.listNodeName);	// check if depth limit has reached	depth = _parents(this.placeEl, opt.listNodeName).length;	if (depth + this.dragDepth <= opt.maxDepth) {	// create new sub-level if one doesn't exist	if (!list.length) {	list = _newElement(opt.listNodeName);	_addClass(list, opt.listClass);	list.appendChild(this.placeEl);	prev.appendChild(list);	this.setParent(prev);	} else {	// else append to next level up	var elems = prev.getElementsByTagName(opt.listNodeName);	list = elems[elems.length - 1];	list.appendChild(this.placeEl);	}	this.emit('nestable.reordered');	}	}	// decrease horizontal level	if (mouse.distX < 0) {	// we can't decrease a level if an item preceeds the current one	// next = this.placeEl.nextElementSibling;	next = this.placeEl.nextElementSibling;	if ( next === this.dragItem ) {	next = this.dragItem.nextElementSibling;	}	if ( !next ) {	var node = _closest(this.placeEl, opt.itemNodeName);	if ( node ) {	list = node.getElementsByTagName(opt.listNodeName)[0];	if ( node ) {	_after(node, this.placeEl);	_after(this.placeEl, this.dragItem);	var len = list.length;	if ( !len ) {	this.unsetParent(node);	}	}	this.emit('nestable.reordered');	}	}	}	}	this.setPosition(e);	if ( _this.dragging ) {	_css(_this.dragEl, 'transform', 'translate3d('+_this.posX+'px, '+_this.posY+'px,0)');	}	},	dragenter: function(e)	{	var _this = this, tgt = e.target;	if ( tgt.nodeType > 1 || tgt === this.placeEl || _hasClass(tgt, this.options.listClass) ) {	return;	}	e.preventDefault();	this.emit('nestable.dragenter');	var parent = this.placeEl.parentNode;	this.hoverEl = _closest(tgt, this.options.itemNodeName);	var parentList = _closest(this.hoverEl, '.' + this.options.parentClass);	if ( parentList ) {	if ( parentList.hasAttribute('disabled') ) {	return;	}	}	this.hoverRect = _this.hoverEl.getBoundingClientRect();	this.placeRect = _this.placeEl.getBoundingClientRect();	var hDiff = 0;	var wDiff = 0;	if ( !_hasClass(this.hoverEl, this.options.parentClass) ) {	hDiff = this.placeRect.height - this.hoverRect.height;	wDiff = this.placeRect.width - this.hoverRect.width;	}	this.hoverX = this.hoverRect.left - this.placeRect.left - wDiff;	this.hoverY = this.hoverRect.top - this.placeRect.top - hDiff;	this.placeX = -this.hoverX - wDiff;	this.placeY = -this.hoverY - hDiff;	if ( _this.direction.y === 'down' ) {	this.hoverY = this.hoverRect.top - this.placeRect.top + wDiff;	this.placeY = -this.hoverY + hDiff;	}	_css(this.dragEl, 'width', this.hoverRect.width);	var pointElRoot = _closest(this.hoverEl, '.' + this.options.rootClass),	isNewRoot = this.dragRootEl !== pointElRoot;	var _this = this;	var prevSibling = _this.hoverEl.previousElementSibling;	var nextSibling = _this.hoverEl.nextElementSibling;	var isLong = (_this.hoverRect.height > _this.placeRect.height);	var after = (nextSibling !== _this.placeEl) && !isLong;	// if ( _hasClass(_this.hoverEl, this.options.parentClass) ) {	//	if ( _this.direction.y === 'up' ) {	//	_this.hoverEl.parentNode.insertBefore(_this.placeEl, _this.hoverEl);	//	} else {	//	let list = _this.hoverEl.getElementsByTagName(this.options.listNodeName);	//	if ( list.length ) {	//	list[0].insertBefore(_this.placeEl, list[0].firstElementChild);	//	}	//	}	// } else {	if ( _this.direction.y === 'up' ) {	if ( prevSibling ) {	_this.hoverEl.parentNode.insertBefore(_this.placeEl, _this.hoverEl);	} else {	if ( _hasClass(_this.hoverEl, this.options.parentClass) ) {	_this.hoverEl.parentNode.insertBefore(_this.placeEl, _this.hoverEl);	} else {	_this.hoverEl.parentNode.insertBefore(_this.placeEl, _this.hoverEl.parentNode.firstElementChild);	}	}	} else {	if ( nextSibling ) {	_this.hoverEl.parentNode.insertBefore(_this.placeEl, nextSibling);	} else {	if ( _hasClass(_this.hoverEl, this.options.parentClass) ) {	let list = _this.hoverEl.getElementsByTagName(this.options.listNodeName);	if ( list.length ) {	list[0].insertBefore(_this.placeEl, list[0].firstElementChild);	}	} else {	_this.hoverEl.parentNode.appendChild(_this.placeEl);	}	}	}	// }	var canAnimate = _this.options.animation && !_this.timer && !_hasClass(_this.hoverEl, _this.options.parentClass);	// var canAnimate = _this.options.animation && !_this.timer;	if ( canAnimate ) {	_this.animate(_this.hoverEl);	// _this.animate(_this.hoverEl.getElementsByClassName(this.options.handleClass)[0]);	}	this.emit('nestable.reordered');	if (!parent.children.length) {	this.unsetParent(parent.parentNode);	}	if (!this.dragRootEl.querySelectorAll(this.options.itemNodeName).length) {	this.dragRootEl.insertAdjacentHTML('beforeend', '<div class="' + this.options.emptyClass + '"></div>');	}	if (isNewRoot) {	this.dragRootEl = pointElRoot;	this.hasNewRoot = this.el !== this.dragRootEl;	if ( this.hasNewRoot ) {	this.emit('nestable.grouped');	}	}	},	animate: function(itm)	{	var _this = this;	_css(itm, 'transform','translate3d('+_this.hoverX+'px,'+_this.hoverY+'px,0)');	_css(_this.placeEl, 'transform','translate3d('+_this.placeX+'px,'+_this.placeY+'px,0)');	itm.offsetHeight;	_css(_this.placeEl, 'transform','translate3d(0px,0px,0px)');	_css(_this.placeEl, 'transition','transform ' + _this.options.animation + 'ms ease 0ms');	_css(itm, 'transform','translate3d(0px,0px,0px)');	_css(itm, 'transition','transform ' + _this.options.animation + 'ms ease 0ms');	clearTimeout(_this.timer);	_this.timer = setTimeout(function ()	{	_css(itm, 'transform','none');	_css(itm, 'transition','none');	_css(_this.placeEl, 'transform','none');	_css(_this.placeEl, 'transition','none');	_this.hoverEl.removeAttribute('style');	_this.timer = false;	}, _this.options.animation);	},	dragleave: function(e) {	this.emit('nestable.dragleave');	},	dragexit: function(e) {	this.emit('nestable.dragexit');	},	dragend: function(e) {	this.emit('nestable.dragend');	},	drop: function(e) {	e.preventDefault();	this.unsetPlaceEl();	this.reset();	this.emit('nestable.drop');	},	mouseup: function(e)	{	var target = e.target;	if ( target === this.el ) {	return;	}	this.unsetPlaceEl();	},	drag: function(e)	{	this.emit('nestable.drag');	},	setPlaceEl: function()	{	this.placeEl = _newElement('div', { class: this.options.placeClass });	this.dragItem.parentNode.insertBefore(this.placeEl, this.dragItem);	var rect = this.dragItem.getBoundingClientRect();	this.placeRect = rect;	_css(this.dragItem, 'display', 'none');	_css(this.placeEl, 'height', rect.height);	},	unsetPlaceEl: function()	{	if ( this.dragEl ) {	document.body.removeChild(this.dragEl);	this.dragEl = null;	}	if ( this.placeEl ) {	var parentNode = this.placeEl.parentNode;	parentNode.insertBefore(this.dragItem, this.placeEl);	parentNode.removeChild(this.placeEl);	this.dragItem.draggable = false;	this.dragItem.removeAttribute('style');	this.dragItem.removeAttribute('draggable');	this.placeEl = null;	}	},	setParent: function(li)	{	if ( _hasClass(li, this.options.parentClass) ) return;	var _this = this, list = li.getElementsByTagName(_this.options.listNodeName);	if ( this.placeEl )	this.placeRect = this.placeEl.getBoundingClientRect();	if (list.length) {	_addClass(li, this.options.parentClass);	li.insertAdjacentHTML('afterbegin', this.options.expandBtnHTML);	li.insertAdjacentHTML('afterbegin', this.options.collapseBtnHTML);	li.children[1].style.display = 'none';	}	},	unsetParent: function(li, force)	{	var lists = li.getElementsByTagName(this.options.listNodeName);	if ( !lists[0].children.length || force ) {	_removeClass(li, this.options.parentClass);	_removeClass(li, this.options.collapsedClass);	var buttons = li.querySelectorAll('button');	_forEach(buttons, function(i,button) {	button.parentNode.removeChild(button);	});	if ( !force ) {	li.removeChild(lists[0]);	}	}	},	expandItem: function(li)	{	if ( _hasClass(li, this.options.collapsedClass) ) {	li.children[0].style.display = 'block';	li.children[1].style.display = 'none';	_removeClass(li, this.options.collapsedClass);	}	},	collapseItem: function(li)	{	if ( _hasClass(li, this.options.parentClass ) ) {	if ( !_hasClass(li, this.options.collapsedClass) ) {	li.children[0].style.display = 'none';	li.children[1].style.display = 'block';	_addClass(li, this.options.collapsedClass);	}	}	},	expandAll: function()	{	var _list = this, items = _list.el.getElementsByTagName(_list.options.itemNodeName);	_forEach(items, function(i,item) {	_list.expandItem(item);	});	},	collapseAll: function()	{	var _list = this, items = _list.el.getElementsByTagName(_list.options.itemNodeName);	_forEach(items, function(i,item) {	_list.collapseItem(item);	});	},	setPosition: function(e)	{	var clientX = e.clientX;	var clientY = e.clientY;	var transX = clientX - this.originX;	var transY = clientY - this.originY;	var x = null, y = null;	if ( transX < this.posX ) {	x = 'left';	} else if ( transX > this.posX ) {	x = 'right';	}	if ( transY < this.posY ) {	y = 'up';	} else if ( transY > this.posY ) {	y = 'down';	}	if ( this.direction ) {	if ( transX === this.posX ) {	x = this.direction.x;	}	if ( transY === this.posY ) {	y = this.direction.y;	}	}	this.direction = {	x: x,	y: y,	}	this.posX = transX;	this.posY = transY;	},	emit: function(event)	{	this.el.dispatchEvent(new Event(event));	},	reset: function()	{	this.mouse = {	offsetX : 0,	offsetY : 0,	startX : 0,	startY : 0,	lastX : 0,	lastY : 0,	nowX : 0,	nowY : 0,	distX : 0,	distY : 0,	dirAx : 0,	dirX : 0,	dirY : 0,	lastDirX : 0,	lastDirY : 0,	distAxX : 0,	distAxY : 0	};	this.isTouch = false;	this.moving = false;	this.dragEl = null;	this.dragRootEl = null;	this.dragDepth = 0;	this.hasNewRoot = false;	this.pointEl = null;	},	serialize: function(json)	{	var list = this;	function step(level, depth) {	var array = [], items = _children(level, list.options.itemNodeName);	_forEach(items, function(idx,li){	var item = {};	if ( li.attributes ) {	_forEach(li.attributes, function(i,attr) {	var name = li.attributes[i].name,	val = li.attributes[i].value;	if ( name.indexOf('data-') > -1 ) {	if ( !isNaN(val) ) {	val = parseInt(val, 10);	}	item[name.split('data-')[1]] = val;	}	});	}	if ( li.children ) {	_forEach(li.children, function(i,child) {	if ( child.nodeName.toLowerCase() === list.options.listNodeName ) {	item.children = step(child);	}	});	}	array.push(item);	});	return array;	}	var children = _children(list.el, list.options.listNodeName);	if ( children.length ) {	var data = step(children[0]);	return json ? JSON.stringify(data) : data;	}	},	serialise: function(json)	{	return this.serialize(json);	},	saveLayout: function(original)	{	let layout = this.el.innerHTML;	if ( original ) {	this.originalLayout = layout;	}	this.layout = layout;	this.emit('nestable.layout.saved');	},	loadLayout: function(original)	{	this.el.innerHTML = original ? this.originalLayout : this.layout;	this.emit('nestable.layout.loaded');	},	destroy: function()	{	var _this = this;	_this.el.removeAttribute('data-nestable-group');	// Remove the collapse buttons	var _parents = _this.el.getElementsByClassName('dd-parent');	_forEach(_parents, function(i,parent) {	_this.unsetParent(parent, true);	});	// Remove the event listeners	_forEach(_events, function(i,event) {	_this.el.removeEventListener(event, _this.handlers[event]);	});	window.removeEventListener('scroll', _this.resize);	}	};	global.Nestable = Nestable;
}(this));
var nest = document.getElementById('nestable');
var data = document.getElementById('data');
var animate = document.getElementById('animate');
var droppable = document.getElementById('droppable');
var events = document.getElementsByClassName('event');
var methods = document.getElementById('methods');
var nestable = new Nestable(nest, {	animation: animate.checked ? 150 : 0
});
util.each(events, function(i, el) {	var event = el.dataset.event;	var timer = false;	nestable.on('nestable.' + event, function() {	if (event === 'drop') {	data.value = nestable.serialize(true);	}	el.classList.add('active');	clearTimeout(timer);	timer = setTimeout(function() {	el.classList.remove('active');	timer = false;	}, 200)	});
});
animate.addEventListener('change', function(e) {	nestable.options.animation = this.checked ? 150 : 0;
}, false);
methods.addEventListener('click', function(e) {	var target = e.target;	var method = target.getAttribute('data-method');	nestable[method]();	data.value = nestable.serialize(true);
}, false);
A Pen by Karl Saunders - Script Codes
A Pen by Karl Saunders - Script Codes
Home Page Home
Developer Karl Saunders
Username Mobius1
Uploaded November 20, 2022
Rating 3
Size 11,295 Kb
Views 10,120
Do you need developer help for A Pen by Karl Saunders?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Karl Saunders (Mobius1) Script Codes
Name
Pure CSS Tooltips
One-Time Events
DVD Screensaver
Selectable
Pure CSS Nintendo Controllers
Onevent vs. addEventListener
Pure CSS Sci-Fi Loader
Classic Snake in Vanilla Javascript
Pure CSS Glitchy Text
Vanilla DataTables - AJAX
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!