Update pages. See main branch for changes

Author: johnny

index.html

@@ -79,7 +79,7 @@ <h1>jQuery Sortable</h1>
         Download
         <a href='js/jquery-sortable-min.js'>minified</a>
         version
-        (8.3 kb)
+        (8.2 kb, gzipped ~2.7 kb)
       </small>
     </p>
   </div>
@@ -263,7 +263,9 @@ <h2>Connected lists with drop animation</h2>
 <div class='row'>
   <div class="span12 example">
     <div class="CodeRay">
-  <div class="code"><pre><span class="predefined">$</span>(<span class="string"><span class="delimiter">&quot;</span><span class="content">ol.simple_with_animation</span><span class="delimiter">&quot;</span></span>).sortable({
+  <div class="code"><pre><span class="keyword">var</span> adjustment
+
+<span class="predefined">$</span>(<span class="string"><span class="delimiter">&quot;</span><span class="content">ol.simple_with_animation</span><span class="delimiter">&quot;</span></span>).sortable({
   <span class="key">group</span>: <span class="string"><span class="delimiter">'</span><span class="content">simple_with_animation</span><span class="delimiter">'</span></span>,
   <span class="key">pullPlaceholder</span>: <span class="predefined-constant">false</span>,
   <span class="function">onDrop</span>: <span class="keyword">function</span>  (item, targetContainer, _super) {
@@ -275,6 +277,23 @@ <h2>Connected lists with drop animation</h2>
       clonedItem.detach()
       _super(item)
     })
+  },
+  <span class="function">onDragStart</span>: <span class="keyword">function</span> (<span class="predefined">$item</span>, container, _super) {
+    <span class="keyword">var</span> offset = <span class="predefined">$item</span>.offset(),
+    pointer = container.rootGroup.pointer
+
+    adjustment = {
+      <span class="key">left</span>: pointer.left - offset.left,
+      <span class="key">top</span>: pointer.top - offset.top
+    }
+
+    _super(<span class="predefined">$item</span>, container)
+  },
+  <span class="function">onDrag</span>: <span class="keyword">function</span> (<span class="predefined">$item</span>, position) {
+    <span class="predefined">$item</span>.css({
+      <span class="key">left</span>: position.left - adjustment.left,
+      <span class="key">top</span>: position.top - adjustment.top
+    })
   }
 })</pre></div>
 </div>
@@ -295,7 +314,7 @@ <h2>Connected lists with drop animation</h2>
         <strong>above a container</strong>
       </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>
+    <p><div data-toggle="button" class="btn btn-primary show-code"><i class="icon-chevron-down"></i> show me the code</div></p>
   </div>
   <div class='span4'>
     <ol class='simple_with_animation vertical'>
@@ -361,7 +380,7 @@ <h2>Sort handle and limited drag/drop</h2>
         items on drag
       </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>
+    <p><div data-toggle="button" class="btn btn-primary show-code"><i class="icon-chevron-down"></i> show me the code</div></p>
   </div>
   <div class='span4'>
     <h3>I'm draggable and droppable</h3>
@@ -468,7 +487,7 @@ <h2>Toggable nested lists</h2>
         lists
       </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>
+    <p><div data-toggle="button" class="btn btn-primary show-code"><i class="icon-chevron-down"></i> show me the code</div></p>
   </div>
   <div class='span4'>
     <div class='switch-container'>
@@ -575,7 +594,7 @@ <h2>Connected lists with limited drop targets</h2>
         of the lists
       </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>
+    <p><div data-toggle="button" class="btn btn-primary show-code"><i class="icon-chevron-down"></i> show me the code</div></p>
     <h3>Serialize result</h3>
     <pre id='serialize_output'></pre>
   </div>
@@ -776,7 +795,7 @@ <h2>
         to change the sorting behaviour
       </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>
+    <p><div data-toggle="button" class="btn btn-primary show-code"><i class="icon-chevron-down"></i> show me the code</div></p>
   </div>
   <div class='span4'>
     <h3>Sortable Rows</h3>

js/application.js

@@ -1215,10 +1215,10 @@ colors = jQuery.Color.names = {
     return x+y;
   }
 
-  Array.prototype.remove = function(from, to) {
-    var rest = this.slice((to || from) + 1 || this.length);
-    this.length = from < 0 ? this.length + from : from;
-    return this.push.apply(this, rest);
+  function remove(array, from, to) {
+    var rest = array.slice((to || from) + 1 || array.length);
+    array.length = from < 0 ? array.length + from : from;
+    return array.push.apply(array, rest);
   }
 
   function setDimensions(array, dimensions, useOffset) {
@@ -1456,7 +1456,7 @@ colors = jQuery.Color.names = {
     },
     removeContainer: function (container) {
       var i = this.containers.indexOf(container)
-      this.containers.remove(i);
+      remove(this.containers, i);
     },
     scrolled: function  (e) {
       this.clearDimensions()
@@ -1609,7 +1609,7 @@ colors = jQuery.Color.names = {
       var that = this,
       childType = isContainer ? "item" : "container",
 
-      children = this.$getChildren(parent, childType).map(function () {
+      children = this.$getChildren(parent, childType).not(this.options.exclude).map(function () {
         return that._serialize($(this), !isContainer)
       }).get()
 
@@ -1729,6 +1729,8 @@ $(function () {
 })
 ;
 $(function  () {
+  var adjustment
+
   $("ol.simple_with_animation").sortable({
     group: 'simple_with_animation',
     pullPlaceholder: false,
@@ -1741,6 +1743,23 @@ $(function  () {
         clonedItem.detach()
         _super(item)
       })
+    },
+    onDragStart: function ($item, container, _super) {
+      var offset = $item.offset(),
+      pointer = container.rootGroup.pointer
+
+      adjustment = {
+        left: pointer.left - offset.left,
+        top: pointer.top - offset.top
+      }
+
+      _super($item, container)
+    },
+    onDrag: function ($item, position) {
+      $item.css({
+        left: position.left - adjustment.left,
+        top: position.top - adjustment.top
+      })
     }
   })
 })

js/examples/simple_with_animation.js

@@ -1,4 +1,6 @@
 $(function  () {
+  var adjustment
+
   $("ol.simple_with_animation").sortable({
     group: 'simple_with_animation',
     pullPlaceholder: false,
@@ -11,6 +13,23 @@ $(function  () {
         clonedItem.detach()
         _super(item)
       })
+    },
+    onDragStart: function ($item, container, _super) {
+      var offset = $item.offset(),
+      pointer = container.rootGroup.pointer
+
+      adjustment = {
+        left: pointer.left - offset.left,
+        top: pointer.top - offset.top
+      }
+
+      _super($item, container)
+    },
+    onDrag: function ($item, position) {
+      $item.css({
+        left: position.left - adjustment.left,
+        top: position.top - adjustment.top
+      })
     }
   })
 })