Update pages. See main branch for changes

Author: johnny

index.html

@@ -71,15 +71,15 @@ <h1>jQuery Sortable</h1>
       <a class='btn btn-large btn-success' href='js/jquery-sortable.js'>
         <i class='icon-hdd icon-white'></i>
         Download
-        (v0.9.8)
+        (v0.9.9)
       </a>
     </p>
     <p>
       <small>
         Download
         <a href='js/jquery-sortable-min.js'>minified</a>
         version
-        (8.2 kb, gzipped ~2.7 kb)
+        (8.4 kb, gzipped ~2.8 kb)
       </small>
     </p>
   </div>
@@ -580,7 +580,9 @@ <h2>Connected lists with limited drop targets</h2>
   },
   <span class="function">serialize</span>: <span class="keyword">function</span> (parent, children, isContainer) {
     <span class="keyword">return</span> isContainer ? children.join() : parent.text()
-  }
+  },
+  <span class="key">tolerance</span>: <span class="integer">6</span>,
+  <span class="key">distance</span>: <span class="integer">10</span>
 })</pre></div>
 </div>
 
@@ -596,6 +598,15 @@ <h2>Connected lists with limited drop targets</h2>
         <strong>serialization</strong>
         of the lists
       </li>
+      <li>
+        Decrease sort
+        <strong>sensitivity</strong>
+      </li>
+      <li>
+        Start dragging after a
+        <strong>distance</strong>
+        has been met
+      </li>
     </ul>
     <p><div class="btn btn-primary show-code" data-toggle="button"><i class="icon-chevron-down"></i> show me the code</div></p>
     <h3>Serialize result</h3>
@@ -964,6 +975,16 @@ <h2 id='group-options'>Group options</h2>
 
 </td>
 <td> The css selector of the containers</td>
+</tr><tr><td>
+  <code>distance</code>
+</td>
+<td>
+  <div class="CodeRay">
+  <div class="code"><pre><span class="integer">0</span></pre></div>
+</div>
+
+</td>
+<td> Distance the mouse has to travel to start dragging</td>
 </tr><tr><td>
   <code>handle</code>
 </td>
@@ -1042,7 +1063,7 @@ <h2 id='group-options'>Group options</h2>
 <td>
   <div class="CodeRay">
   <div class="code"><pre><span class="keyword">function</span> (<span class="predefined">$item</span>, container, _super) {
-  <span class="predefined">$item</span>.removeClass(<span class="string"><span class="delimiter">&quot;</span><span class="content">dragged</span><span class="delimiter">&quot;</span></span>).attr(<span class="string"><span class="delimiter">&quot;</span><span class="content">style</span><span class="delimiter">&quot;</span></span>,<span class="string"><span class="delimiter">&quot;</span><span class="delimiter">&quot;</span></span>)
+  <span class="predefined">$item</span>.removeClass(<span class="string"><span class="delimiter">&quot;</span><span class="content">dragged</span><span class="delimiter">&quot;</span></span>).removeAttr(<span class="string"><span class="delimiter">&quot;</span><span class="content">style</span><span class="delimiter">&quot;</span></span>)
   <span class="predefined">$</span>(<span class="string"><span class="delimiter">&quot;</span><span class="content">body</span><span class="delimiter">&quot;</span></span>).removeClass(<span class="string"><span class="delimiter">&quot;</span><span class="content">dragging</span><span class="delimiter">&quot;</span></span>)
 }</pre></div>
 </div>
@@ -1085,6 +1106,16 @@ <h2 id='group-options'>Group options</h2>
 
 </td>
 <td> Specifies serialization of the container group. The pair $parent/$children is either container/items or item/subcontainers</td>
+</tr><tr><td>
+  <code>tolerance</code>
+</td>
+<td>
+  <div class="CodeRay">
+  <div class="code"><pre><span class="integer">0</span></pre></div>
+</div>
+
+</td>
+<td> Set tolerance while dragging. Positive values will decrease sensitivity.</td>
 </tr>
     </tbody>
   </table>

js/application.js

@@ -1082,7 +1082,7 @@ colors = jQuery.Color.names = {
 
 }(window.jQuery);
 /* ===================================================
- *  jquery-sortable.js v0.9.8
+ *  jquery-sortable.js v0.9.9
  *  http://johnny.github.com/jquery-sortable/
  * ===================================================
  *  Copyright (c) 2012 Jonas von Andrian
@@ -1133,6 +1133,8 @@ colors = jQuery.Color.names = {
     },
     // The css selector of the containers
     containerSelector: "ol, ul",
+    // Distance the mouse has to travel to start dragging
+    distance: 0,
     // The css selector of the drag handle
     handle: "",
     // The css selector of the items
@@ -1167,7 +1169,7 @@ colors = jQuery.Color.names = {
     },
     // Called when the mouse button is beeing released
     onDrop: function ($item, container, _super) {
-      $item.removeClass("dragged").attr("style","")
+      $item.removeClass("dragged").removeAttr("style")
       $("body").removeClass("dragging")
     },
     // Template for the placeholder. Can be any valid jQuery input
@@ -1186,7 +1188,9 @@ colors = jQuery.Color.names = {
       delete result.sortable
 
       return result
-    }
+    },
+    // Set tolerance while dragging. Positive values will decrease sensitivity.
+    tolerance: 0
   }, // end group defaults
   containerGroups = {},
   groupCounter = 0
@@ -1320,25 +1324,28 @@ colors = jQuery.Color.names = {
       e.preventDefault()
 
       if(!this.dragging){
+        if(!this.distanceMet(e))
+          return
+
         processChildContainers(this.item, this.options.containerSelector, "disable", true)
 
         this.options.onDragStart(this.item, this.itemContainer, groupDefaults.onDragStart)
         this.item.before(this.placeholder)
         this.dragging = true
       }
 
-      if(!this.setPointer(e))
-        return;
-
+      this.setPointer(e)
       // place item under the cursor
       this.options.onDrag(this.item,
                           getRelativePosition(this.pointer, this.item.offsetParent()),
                           groupDefaults.onDrag)
 
       var x = e.pageX,
       y = e.pageY,
-      box = this.sameResultBox
-      if(!box || box.top > y || box.bottom < y || box.left > x || box.right < x)
+      box = this.sameResultBox,
+      t = this.options.tolerance
+
+      if(!box || box.top - t > y || box.bottom + t < y || box.left - t > x || box.right + t < x)
         if(!this.searchValidTarget())
           this.placeholder.detach()
     },
@@ -1449,7 +1456,12 @@ colors = jQuery.Color.names = {
 
       this.lastPointer = this.pointer
       this.pointer = pointer
-      return true
+    },
+    distanceMet: function (e) {
+      return (Math.max(
+ 				Math.abs(this.pointer.left - e.pageX),
+				Math.abs(this.pointer.top - e.pageY)
+			) >= this.options.distance)
     },
     addContainer: function  (container) {
       this.containers.push(container);
@@ -1687,7 +1699,9 @@ $(function  () {
     },
     serialize: function (parent, children, isContainer) {
       return isContainer ? children.join() : parent.text()
-    }
+    },
+    tolerance: 6,
+    distance: 10
   })
 })
 ;

js/examples/limited_drop_targets.js

@@ -14,7 +14,9 @@ $(function  () {
     },
     serialize: function (parent, children, isContainer) {
       return isContainer ? children.join() : parent.text()
-    }
+    },
+    tolerance: 6,
+    distance: 10
   })
 })
 ;