1.10.0-rc1

index.html

@@ -36,6 +36,9 @@
 				<h5>Examples</h5>
 				<li><a href="#grid">Grid</a></li>
 				<li><a href="#nested">Nested sortables</a></li>
+				<h5>Plugins</h5>
+				<li><a href="#multi-drag">MultiDrag</a></li>
+				<li><a href="#swap">Swap</a></li>
 				<h5><a href="#comparisons">Comparisons</a></h5>
 				<h5><a href="#frameworks">Framework Support</a></h5>
 			</div>
@@ -342,6 +345,56 @@ for (var i = 0; i < nestedSortables.length; i++) {
 }</pre>
 			</div>
 		</div>
+
+		<div class="row">
+			<h2 class="col-12">Plugins</h2>
+		</div>
+		<hr />
+
+		<div id="multi-drag" class="row">
+			<h4 class="col-12">MultiDrag</h4>
+			<p class="col-12">The <a target="_blank" href="https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag">MultiDrag</a> plugin allows for multiple items to be dragged at a time. You can click to "select" multiple items, and then drag them as one item.</p>
+			<div id="multiDragDemo" class="list-group col">
+				<div class="list-group-item">Item 1</div>
+				<div class="list-group-item">Item 2</div>
+				<div class="list-group-item">Item 3</div>
+				<div class="list-group-item">Item 4</div>
+				<div class="list-group-item">Item 5</div>
+				<div class="list-group-item">Item 6</div>
+			</div>
+			<div style="padding: 0" class="col-12">
+<pre class="prettyprint">new Sortable(multiDragDemo, {
+	multiDrag: true, // Enable multi-drag
+	selectedClass: 'selected', // The class applied to the selected items
+	animation: 150
+});</pre>
+			</div>
+		</div>
+		<hr />
+
+		<div id="swap" class="row">
+			<h4 class="col-12">Swap</h4>
+			<p class="col-12">The <a target="_blank" href="https://github.com/SortableJS/Sortable/tree/master/plugins/Swap">Swap</a> plugin changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.</p>
+			<div id="swapDemo" class="list-group col">
+				<div class="list-group-item">Item 1</div>
+				<div class="list-group-item">Item 2</div>
+				<div class="list-group-item">Item 3</div>
+				<div class="list-group-item">Item 4</div>
+				<div class="list-group-item">Item 5</div>
+				<div class="list-group-item">Item 6</div>
+			</div>
+			<div style="padding: 0" class="col-12">
+<pre class="prettyprint">new Sortable(swapDemo, {
+	swap: true, // Enable swap plugin
+	swapClass: 'highlight', // The class applied to the hovered swap item
+	animation: 150
+});</pre>
+			</div>
+		</div>
+		<hr />
+
+
+
 		<div class="mt-4"></div>
 
 		<div id="comparisons" class="row">
@@ -349,6 +402,7 @@ for (var i = 0; i < nestedSortables.length; i++) {
 		</div>
 		<hr />
 
+
 		<div class="row frameworks">
 			<h2 class="col-12 text-center">jQuery-UI</h2>
 			<iframe class="mx-auto" src="https://player.vimeo.com/video/311581236?title=0&byline=0&portrait=0" width="640" height="361" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
@@ -373,7 +427,7 @@ for (var i = 0; i < nestedSortables.length; i++) {
 			<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/react-sortablejs">react-sortablejs</a></h3>
 
 			<h3 class="col-6">Angular</h3>
-			<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/angular-sortablejs">angular-sortablejs</a></h3>
+			<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/ngx-sortablejs">ngx-sortablejs</a></h3>
 
 			<h3 class="col-6">jQuery</h3>
 			<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/jquery-sortablejs">jquery-sortablejs</a></h3>
@@ -386,6 +440,9 @@ for (var i = 0; i < nestedSortables.length; i++) {
 
 			<h3 class="col-6">Polymer</h3>
 			<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/polymer-sortablejs">polymer-sortablejs</a></h3>
+
+			<h3 class="col-6">Ember</h3>
+			<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/ember-sortablejs">ember-sortablejs</a></h3>
 		</div>
 
 	</div>

st/app.js

@@ -8,7 +8,9 @@ var example1 = document.getElementById('example1'),
 	example5 = document.getElementById('example5'),
 	example6 = document.getElementById('example6'),
 	example7 = document.getElementById('example7'),
-	gridDemo = document.getElementById('gridDemo');
+	gridDemo = document.getElementById('gridDemo'),
+	multiDragDemo = document.getElementById('multiDragDemo'),
+	swapDemo = document.getElementById('swapDemo');
 
 // Example 1 - Simple list
 new Sortable(example1, {
@@ -203,3 +205,18 @@ for (var i = 0; i < nestedSortables.length; i++) {
 		swapThreshold: 0.65
 	});
 }
+
+// MultiDrag demo
+new Sortable(multiDragDemo, {
+	multiDrag: true,
+	selectedClass: 'selected',
+	animation: 150
+});
+
+
+// Swap demo
+new Sortable(swapDemo, {
+	swap: true,
+	swapClass: 'highlight',
+	animation: 150
+});

st/theme.css

@@ -242,3 +242,13 @@ input[type=range]:focus::-ms-fill-upper {
 	padding-right: 0;
 	margin-right: 15px;
 }
+
+.selected {
+	background-color: #f9c7c8;
+	border: solid red 1px !important;
+	z-index: 1 !important;
+}
+
+.highlight {
+	background-color: #B7F8C7;
+}