+ group (name, pull, put), sort options

README.md

@@ -32,7 +32,8 @@ Sortable.create(el);
 ### Options
 ```js
 var sortabel = new Sortable(el, {
-	group: "name",
+	group: "name", // or { name: "..", pull: [true, false, clone], put: true }
+	sort: true, // sorting inside list
 	store: null, // @see Store
 	animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
 	handle: ".my-handle", // Restricts sort start click/touch to the specified element
@@ -160,6 +161,7 @@ Sortable.create(el, {
 * toggleClass(el`:HTMLElement`, name`:String`, state`:Boolean`) — add or remove one classes from each element
 
 
+
 ---
 
 

Sortable.js

@@ -23,6 +23,7 @@
 	var
 		  dragEl
 		, ghostEl
+		, cloneEl
 		, rootEl
 		, nextEl
 
@@ -74,9 +75,10 @@
 		this.options = options = (options || {});
 
 
-		// Defaults
+		// Default options
 		var defaults = {
 			group: Math.random(),
+			sort: true,
 			store: null,
 			handle: null,
 			draggable: el.children[0] && el.children[0].nodeName || (/[uo]l/i.test(el.nodeName) ? 'li' : '*'),
@@ -86,12 +88,24 @@
 			animation: 0
 		};
 
+
 		// Set default options
 		for (var name in defaults) {
 			options[name] = options[name] || defaults[name];
 		}
 
 
+		if (!options.group.name) {
+			options.group = { name: options.group };
+		}
+
+		['pull', 'put'].forEach(function (key) {
+			if (!(key in options.group)) {
+				options.group[key] = true;
+			}
+		});
+
+
 		// Define events
 		_customEvents.forEach(function (name) {
 			options[name] = _bind(this, options[name] || noop);
@@ -100,7 +114,7 @@
 
 
 		// Export group name
-		el[expando] = options.group;
+		el[expando] = options.group.name;
 
 
 		// Bind all private methods
@@ -187,6 +201,10 @@
 				nextEl = dragEl.nextSibling;
 				activeGroup = this.options.group;
 
+				cloneEl = dragEl.cloneNode(true);
+				_css(cloneEl, 'display', 'none');
+				rootEl.insertBefore(cloneEl, dragEl);
+
 				dragEl.draggable = true;
 
 				// Disable "draggable"
@@ -235,13 +253,13 @@
 				var
 					  target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY)
 					, parent = target
-					, group = this.options.group
+					, groupName = this.options.group.name
 					, i = touchDragOverListeners.length
 				;
 
 				if( parent ){
 					do {
-						if( parent[expando] === group ){
+						if( parent[expando] === groupName ){
 							while( i-- ){
 								touchDragOverListeners[i]({
 									clientX: touchEvt.clientX,
@@ -332,12 +350,32 @@
 
 
 		_onDragOver: function (evt/**Event*/){
-			if( !_silent && (activeGroup === this.options.group) && (evt.rootEl === void 0 || evt.rootEl === this.el) ){
+			var el = this.el,
-				var
+				target,
-					  el = this.el
+				dragRect,
-					, target = _closest(evt.target, this.options.draggable, el)
+				revert,
-					, dragRect = dragEl.getBoundingClientRect()
+				options = this.options,
-				;
+				group = options.group,
+				isOwner = (activeGroup === group);
+
+			if( !_silent &&
+				(activeGroup.name === group.name) &&
+				(isOwner && (options.sort || (revert = !rootEl.contains(dragEl))) || group.put && activeGroup.pull) &&
+				(evt.rootEl === void 0 || evt.rootEl === this.el)
+			){
+				target = _closest(evt.target, this.options.draggable, el);
+				dragRect = dragEl.getBoundingClientRect();
+
+				if ((activeGroup.pull == 'clone') && (cloneEl.state !== isOwner)) {
+					_css(cloneEl, 'display', isOwner ? 'none' : '');
+					!isOwner && cloneEl.state && rootEl.insertBefore(cloneEl, dragEl);
+					cloneEl.state = isOwner;
+				}
+
+				if (revert) {
+					rootEl.insertBefore(dragEl, cloneEl);
+					return;
+				}
 
 				if( el.children.length === 0 || el.children[0] === ghostEl || (el === evt.target) && _ghostInBottom(el, evt) ){
 					el.appendChild(dragEl);
@@ -459,6 +497,7 @@
 				dragEl =
 				ghostEl =
 				nextEl =
+				cloneEl =
 
 				tapEvt =
 				touchEvt =

index.html

@@ -108,6 +108,43 @@
 	</div>
 
 
+	<a name="ag"></a>
+	<div class="container" style="margin-top: 100px;">
+		<div id="advanced" style="margin-left: 30px;">
+			<div><div data-force="5" class="layer title title_xl">Advanced groups</div></div>
+
+			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
+				<div class="block__list-title">pull & put</div>
+				<ul id="advanced-1">
+					<li>Meet</li>
+					<li>Potato</li>
+					<li>Tea</li>
+				</ul>
+			</div>
+
+			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
+				<div class="block__list-title">only pull (clone)</div>
+				<ul id="advanced-2">
+					<li>Sex</li>
+					<li>Drags</li>
+					<li>Rock'n'roll</li>
+				</ul>
+			</div>
+
+			<div style="width: 25%; float: left; margin-top: 15px; margin-left: 10px" class="block__list block__list_words">
+				<div class="block__list-title">only put</div>
+				<ul id="advanced-3">
+					<li>Money</li>
+					<li>Force</li>
+					<li>Agility</li>
+				</ul>
+			</div>
+
+			<div style="clear: both"></div>
+		</div>
+	</div>
+
+
 	<a name="c"></a>
 	<div class="container" style="margin-top: 100px">
 		<div style="margin-left: 30px">
@@ -244,6 +281,27 @@ var editableList = new Sortable(editable, {
 					animation: 150
 				});
 			});
+
+
+			[{
+				name: 'advanced',
+				pull: true,
+				put: true
+			},
+			{
+				name: 'advanced',
+				pull: 'clone',
+				put: false
+			}, {
+				name: 'advanced',
+				pull: false,
+				put: true
+			}].forEach(function (opts, i) {
+				new Sortable(document.getElementById(opts.name + '-' + (i + 1)), {
+					group: opts,
+					animation: 150
+				});
+			});
 		})();
 
 

st/app.css

@@ -125,6 +125,12 @@ img {
 		margin-top: -8px;
 		margin-left: 5px;
 		background-color: #fff;
+	}
+		.block__list-title {
+			margin: -20px 0 0;
+			padding: 10px;
+			text-align: center;
+			background: #5F9EDF;
 		}
 		.block__list li { cursor: move; }