nodeskini 1.0.0

package/client/clientListe/Sortable-master/st/theme.css

@@ -0,0 +1,254 @@
+body {
+	font-family: Helvetica Neue, Helvetica, Arial;
+	background: rgb(244,215,201); /* Old browsers */
+	background: -moz-linear-gradient(top, rgb(244,215,201) 0%, rgb(244,226,201) 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, rgb(244,215,201) 0%,rgb(244,226,201) 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, rgb(244,215,201) 0%,rgb(244,226,201) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	margin-bottom: 100px;
+}
+
+.header {
+	margin-top: 30px;
+}
+
+.header h1 {
+	margin-top: 10px;
+}
+
+h4 {
+	padding-bottom: 10px;
+}
+
+.prettyprinted {
+	margin-top: 5px;
+	border-top: none !important;
+	border-bottom: none !important;
+	border-right: none !important;
+	border-left: 1px solid rgba(0,0,0,.1) !important;
+	padding-left: 15px !important;
+	word-wrap: break-word !important;
+	overflow: default !important;
+	text-overflow: default !important;
+}
+
+.tinted {
+	background-color: #fff6b2;
+}
+
+.handle {
+	cursor: grab;
+}
+
+code {
+	color: #606;
+}
+
+.toc {
+	background-color: rgb(255,255,255,0.5);
+	border: solid #444 1px;
+	padding: 20px;
+	margin-left: auto;
+	margin-right: auto;
+	list-style: none;
+}
+
+.toc h5 {
+	margin-top: 8px;
+}
+
+.list-group-item:hover {
+	z-index: 0;
+}
+
+.input-section {
+	background-color: rgb(255,255,255,0.5);
+	padding: 20px;
+}
+
+.square-section {
+	background-color: rgb(255,255,255,0.5);
+}
+
+
+.square {
+	width: 20vw;
+	height: 20vw;
+	background-color: #00a2ff;
+	margin-top: 2vw;
+	margin-left: 2vw;
+	display: inline-block;
+	position: relative;
+}
+
+.swap-threshold-indicator {
+	background-color: #0079bf;
+	height: 100%;
+	display: inline-block;
+}
+
+.inverted-swap-threshold-indicator {
+	background-color: #0079bf;
+	height: 100%;
+	position: absolute;
+}
+
+.indicator-left {
+	left: 0;
+	top: 0;
+}
+
+.indicator-right {
+	right: 0;
+	bottom: 0;
+}
+
+.num-indicator {
+	position: absolute;
+	font-size: 50px;
+	width: 25px;
+	top: 50%;
+	left: 50%;
+    transform: translate(-50%, -50%);
+	color: white;
+}
+
+.grid-square {
+	width: 100px;
+	height: 100px;
+	display: inline-block;
+	background-color: #fff;
+	border: solid 1px rgb(0,0,0,0.2);
+	padding: 10px;
+	margin: 12px;
+}
+
+.nested-sortable, .nested-1, .nested-2, .nested-3 {
+	margin-top: 5px;
+}
+
+.nested-1 {
+	background-color: #e6e6e6;
+}
+
+.nested-2 {
+	background-color: #cccccc;
+}
+
+.nested-3 {
+	background-color: #b3b3b3;
+}
+
+.frameworks {
+	background-color: rgb(255,255,255,0.5);
+	border: solid rgb(0,0,0,0.3) 1px;
+	padding: 20px;
+}
+
+.frameworks h3 {
+	margin-top: 5px;
+}
+
+input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  margin: 3.8px 0;
+}
+input[type=range]:focus {
+  outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: rgba(48, 113, 169, 0);
+  border-radius: 1.3px;
+  border: 0.2px solid #010101;
+}
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
+  border: 1.3px solid rgba(0, 0, 0, 0.7);
+  height: 16px;
+  width: 16px;
+  border-radius: 49px;
+  background: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -4px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: rgba(54, 126, 189, 0);
+}
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: rgba(48, 113, 169, 0);
+  border-radius: 1.3px;
+  border: 0.2px solid #010101;
+}
+input[type=range]::-moz-range-thumb {
+  box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
+  border: 1.3px solid rgba(0, 0, 0, 0.7);
+  height: 16px;
+  width: 16px;
+  border-radius: 49px;
+  background: #ffffff;
+  cursor: pointer;
+}
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: rgba(42, 100, 149, 0);
+  border: 0.2px solid #010101;
+  border-radius: 2.6px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-fill-upper {
+  background: rgba(48, 113, 169, 0);
+  border: 0.2px solid #010101;
+  border-radius: 2.6px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-thumb {
+  box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
+  border: 1.3px solid rgba(0, 0, 0, 0.7);
+  height: 16px;
+  width: 16px;
+  border-radius: 49px;
+  background: #ffffff;
+  cursor: pointer;
+  height: 8.4px;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: rgba(48, 113, 169, 0);
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: rgba(54, 126, 189, 0);
+}
+
+.blue-background-class {
+	background-color: #C8EBFB;
+}
+
+.col {
+	padding-right: 0;
+	margin-right: 15px;
+}
+
+.selected {
+	background-color: #f9c7c8;
+	border: solid red 1px !important;
+	z-index: 1 !important;
+}
+
+.highlight {
+	background-color: #B7F8C7;
+}

package/client/clientListe/Sortable-master/tests/Sortable.compat.test.js

@@ -0,0 +1,39 @@
+import { Selector } from 'testcafe';
+
+
+fixture `Simple Sorting`
+	.page `./single-list.html`;
+
+let list1 = Selector('#list1');
+
+test('Sort down list', async browser => {
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list1.child(2);
+	const targetStartPosition = list1.child(2);
+	const target = await targetStartPosition();
+	const targetEndPosition = list1.child(1);
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target)
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+test('Sort up list', async browser => {
+	const dragStartPosition = list1.child(2);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list1.child(0);
+	const targetStartPosition = list1.child(0);
+	const target = await targetStartPosition();
+	const targetEndPosition = list1.child(1);
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target)
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});

package/client/clientListe/Sortable-master/tests/Sortable.test.js

@@ -0,0 +1,386 @@
+import { Selector } from 'testcafe';
+const itemHeight = 54; // px
+const leeway = 1;
+
+
+fixture `Simple Sorting`
+	.page `./single-list.html`;
+
+let list1 = Selector('#list1');
+
+test('Sort down list', async browser => {
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list1.child(2);
+	const targetStartPosition = list1.child(2);
+	const target = await targetStartPosition();
+	const targetEndPosition = list1.child(1);
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target)
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+test('Sort up list', async browser => {
+	const dragStartPosition = list1.child(2);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list1.child(0);
+	const targetStartPosition = list1.child(0);
+	const target = await targetStartPosition();
+	const targetEndPosition = list1.child(1);
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target)
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+test('Swap threshold', async browser => {
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list1.child(1);
+	const targetStartPosition = list1.child(1);
+	const target = await targetStartPosition();
+	const targetEndPosition = list1.child(0);
+
+	await browser.eval(() => {
+			Sortable.get(document.getElementById('list1')).option('swapThreshold', 0.6);
+		});
+
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, {
+			destinationOffsetY: Math.round(itemHeight / 2 * 0.4 - leeway)
+		})
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, {
+			destinationOffsetY: Math.round(itemHeight / 2 * 0.4 + leeway)
+		})
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+test('Invert swap', async browser => {
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list1.child(1);
+	const targetStartPosition = list1.child(1);
+	const target = await targetStartPosition();
+	const targetEndPosition = list1.child(0);
+
+	await browser.eval(() => {
+			Sortable.get(document.getElementById('list1')).option('invertSwap', true);
+		});
+
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, {
+			destinationOffsetY: Math.round(itemHeight / 2 - leeway)
+		})
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, {
+			destinationOffsetY: Math.round(itemHeight / 2 + leeway)
+		})
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+
+test('Inverted swap threshold', async browser => {
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list1.child(1);
+	const targetStartPosition = list1.child(1);
+	const target = await targetStartPosition();
+	const targetEndPosition = list1.child(0);
+
+	await browser.eval(() => {
+			Sortable.get(document.getElementById('list1')).option('invertSwap', true);
+			Sortable.get(document.getElementById('list1')).option('invertedSwapThreshold', 0.5);
+		});
+
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, {
+			destinationOffsetY: Math.round(itemHeight - (itemHeight / 2 * 0.5) - leeway)
+		})
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, {
+			destinationOffsetY: Math.round(itemHeight - (itemHeight / 2 * 0.5) + leeway)
+		})
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+
+fixture `Grouping`
+	.page `./dual-list.html`;
+
+let list2 = Selector('#list2');
+
+test('Move to list of the same group', async browser => {
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list2.child(0);
+	const targetStartPosition = list2.child(0);
+	const target = await targetStartPosition();
+	const targetEndPosition = list2.child(1);
+
+	await browser.eval(() => {
+			Sortable.get(document.getElementById('list2')).option('group', 'shared');
+		});
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, { offsetY: 0, destinationOffsetY: 0 })
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+
+test('Do not move to list of different group', async browser => {
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const targetStartPosition = list2.child(0);
+	const target = await targetStartPosition();
+
+	await browser.eval(() => {
+			Sortable.get(document.getElementById('list2')).option('group', null);
+		});
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, { offsetY: 0, destinationOffsetY: 0 })
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText);
+});
+
+
+test('Move to list with put:true', async browser => {
+	// Should allow insert, since pull defaults to `true`
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list2.child(0);
+	const targetStartPosition = list2.child(0);
+	const target = await targetStartPosition();
+	const targetEndPosition = list2.child(1);
+
+	await browser.eval(() => {
+			Sortable.get(document.getElementById('list2')).option('group', { put: true });
+		});
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, { offsetY: 0, destinationOffsetY: 0 })
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+test('Do not move from list with pull:false', async browser => {
+	// Should not allow insert, since put defaults to `false`
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const targetStartPosition = list2.child(0);
+	const target = await targetStartPosition();
+
+	await browser.eval(() => {
+			Sortable.get(document.getElementById('list1')).option('group', { pull: false });
+		});
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, { offsetY: 0, destinationOffsetY: 0 })
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText);
+});
+
+test('Clone element if pull:"clone"', async browser => {
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list2.child(0);
+	const targetStartPosition = list2.child(0);
+	const target = await targetStartPosition();
+	const targetEndPosition = list2.child(1);
+
+	await browser.eval(() => {
+			Sortable.get(document.getElementById('list1')).option('group', { pull: 'clone' });
+			Sortable.get(document.getElementById('list2')).option('group', { put: true });
+		});
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, { offsetY: 0, destinationOffsetY: 0 })
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText) // clone check
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+
+
+fixture `Handles`
+	.page `./handles.html`;
+
+test('Do not allow dragging not using handle', async browser => {
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const targetStartPosition = list1.child(1);
+	const target = await targetStartPosition();
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target)
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText);
+});
+
+
+test('Allow dragging using handle', async browser => {
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list1.child(1);
+	const targetStartPosition = list1.child(1);
+	const target = await targetStartPosition();
+	const targetEndPosition = list1.child(0);
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(await dragStartPosition.child('.handle'), target)
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+fixture `Filter`
+	.page `./filter.html`;
+
+test('Do not allow dragging of filtered element', async browser => {
+	const dragStartPosition = list1.child('.filtered');
+	const dragEl = await dragStartPosition();
+	const targetStartPosition = dragStartPosition.nextSibling(1);
+	const target = await targetStartPosition();
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target)
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText);
+});
+
+
+test('Allow dragging of non-filtered element', async browser => {
+	const dragStartPosition = list1.child(':not(.filtered)');
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = dragStartPosition.nextSibling(1);
+	const targetStartPosition = dragStartPosition.nextSibling(1);
+	const target = await targetStartPosition();
+	const targetEndPosition = dragStartPosition.nextSibling(0);
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target)
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+
+
+fixture `Nested`
+	.page `./nested.html`;
+
+let list1n1 = Selector('.n1');
+let list1n2 = Selector('.n2');
+let list2n1 = Selector('.n1:nth-of-type(2)');
+
+test('Dragging from level 1 to level 0', async browser => {
+	const dragStartPosition = list1n1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list1.child(2);
+	const targetStartPosition = list1.child(2);
+	const target = await targetStartPosition();
+	const targetEndPosition = list1.child(3);
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, { destinationOffsetY: 0 })
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+
+test('Dragging from level 0 to level 2', async browser => {
+	const dragStartPosition = list1.child(1);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list1n2.child(2);
+	const targetStartPosition = list1n2.child(2);
+	const target = await targetStartPosition();
+	const targetEndPosition = list1n2.child(3);
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.expect(targetStartPosition.innerText).eql(target.innerText)
+		.dragToElement(dragEl, target, { destinationOffsetY: 0 })
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText)
+		.expect(targetEndPosition.innerText).eql(target.innerText);
+});
+
+
+fixture `Empty Insert`
+	.page `./empty-list.html`;
+
+test('Insert into empty list if within emptyInsertThreshold', async browser => {
+	const threshold = await browser.eval(() => Sortable.get(document.getElementById('list2')).option('emptyInsertThreshold'));
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragEndPosition = list2.child(0);
+	// Must use rects since testcafe won't drag to element that is "not visible"
+	const dragRect = dragEl.boundingClientRect;
+	const list2Rect = await list2.boundingClientRect;
+
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.drag(dragEl, Math.round(list2Rect.left - dragRect.left) - (threshold - 1), -(threshold - 1), {
+			offsetY: 0,
+			offsetX: 0
+		})
+		.expect(dragEndPosition.innerText).eql(dragEl.innerText);
+});
+
+test('Do not insert into empty list if outside emptyInsertThreshold', async browser => {
+	const threshold = await browser.eval(() => Sortable.get(document.getElementById('list2')).option('emptyInsertThreshold'));
+	const dragStartPosition = list1.child(0);
+	const dragEl = await dragStartPosition();
+	const dragRect = dragEl.boundingClientRect;
+	const list2Rect = await list2.boundingClientRect;
+
+	await browser
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText)
+		.drag(dragEl, Math.round(list2Rect.left - dragRect.left) - (threshold + 1), -(threshold + 1), {
+			offsetY: 0,
+			offsetX: 0
+		})
+		.expect(dragStartPosition.innerText).eql(dragEl.innerText);
+});

package/client/clientListe/Sortable-master/tests/dual-list.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+	<link rel="stylesheet" type="text/css" href="./style.css">
+</head>
+<body>
+
+<div class="list half" id="list1">
+	<div>Item 1.1</div>
+	<div>Item 1.2</div>
+	<div>Item 1.3</div>
+	<div>Item 1.4</div>
+	<div>Item 1.5</div>
+</div>
+
+<div class="list half" id="list2">
+	<div>Item 2.1</div>
+	<div>Item 2.2</div>
+	<div>Item 2.3</div>
+	<div>Item 2.4</div>
+	<div>Item 2.5</div>
+</div>
+
+
+<script src="../Sortable.js"></script>
+
+<script type="text/javascript">
+	new Sortable(document.getElementById('list1'), { group: 'shared' });
+	new Sortable(document.getElementById('list2'), { });
+</script>
+
+</body>
+</html>