Merge pull request adopted-ember-addons#15 from jgwhite/handle

Add handle property to sortable-item

README.md

@@ -29,9 +29,10 @@ $ ember install ember-sortable
 {{! app/templates/my-route.hbs }}
 
 {{#sortable-group tagName="ul" onChange="reorderItems" as |group|}}
-  {{#each model.items as |item|}}  
-    {{#sortable-item tagName="li" model=item group=group}}
+  {{#each model.items as |item|}}
+    {{#sortable-item tagName="li" model=item group=group handle=".handle"}}
       {{item.name}}
+      <span class="handle">&varr;</span>
     {{/sortable-item}}
   {{/each}}
 {{/sortable-group}}

addon/mixins/sortable-item.js

@@ -23,6 +23,16 @@ export default Mixin.create({
   */
   model: null,
 
+  /**
+    Selector for the element to use as handle.
+    If unset, the entire element will be used as the handle.
+
+    @property handle
+    @type String
+    @default null
+  */
+  handle: null,
+
   /**
     True if the item is currently being dragged.
 
@@ -136,6 +146,12 @@ export default Mixin.create({
     @private
   */
   _startDrag(event) {
+    let handle = this.get('handle');
+
+    if (handle && !$(event.target).is(handle)) {
+      return;
+    }
+
     event.preventDefault();
     event.stopPropagation();
 

tests/dummy/app/styles/app.css

@@ -41,3 +41,15 @@
   background: #f66;
   z-index: 10;
 }
+
+.sortable-item .handle {
+  position: absolute;
+  padding: 0 .5em;
+  top: 0; right: 0; bottom: 0;
+  background: rgba(127, 0, 0, .5);
+  color: pink;
+  cursor: move;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

tests/dummy/app/templates/application.hbs

@@ -5,8 +5,9 @@
 <main>
   {{#sortable-group tagName="ol" onChange="update" as |group|}}
     {{#each model.items as |item|}}
-      {{#sortable-item tagName="li" model=item group=group}}
+      {{#sortable-item tagName="li" model=item group=group handle=".handle"}}
         {{item}}
+        <span class="handle">&vArr;</span>
       {{/sortable-item}}
     {{/each}}
   {{/sortable-group}}