Update pages. See main branch for changes

Author: johnny

css/jquery-sortable.css

@@ -34,6 +34,9 @@
                 <li>
                   <a href='#nested'>Toggable nested lists</a>
                 </li>
+                <li>
+                  <a href='#limited-target'>Limited drop targets</a>
+                </li>
                 <li>
                   <a href='#bootstrap'>Sorting a bootstrap menu</a>
                 </li>
@@ -68,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.6)
+        (v0.9.7)
       </a>
     </p>
     <p>
       <small>
         Download
         <a href='js/jquery-sortable-min.js'>minified</a>
         version
-        (7.3 kb)
+        (7.7 kb)
       </small>
     </p>
   </div>
@@ -158,8 +161,14 @@ <h3>
         Only list items that contain a sublist are drop targets.
       </p>
       <ol class='default vertical'>
-        <li>First</li>
-        <li>Second</li>
+        <li>
+          First
+          <ol></ol>
+        </li>
+        <li>
+          Second
+          <ol></ol>
+        </li>
         <li>
           Third
           <ol>
@@ -527,6 +536,55 @@ <h2>Toggable nested lists</h2>
         </li>
     </ol>
   </div>
+</div>
+  </div>
+  <div id='limited-target'>
+    <h2>Connected lists with limited drop targets</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.limited_drop_targets</span><span class="delimiter">&quot;</span></span>).sortable({
+  <span class="key">group</span>: <span class="string"><span class="delimiter">'</span><span class="content">limited_drop_targets</span><span class="delimiter">'</span></span>,
+  <span class="function">isValidTarget</span>: <span class="keyword">function</span>  (item, container) {
+    <span class="keyword">if</span>(item.is(<span class="string"><span class="delimiter">&quot;</span><span class="content">.highlight</span><span class="delimiter">&quot;</span></span>))
+      <span class="keyword">return</span> <span class="predefined-constant">true</span>
+    <span class="keyword">else</span> {
+      <span class="keyword">return</span> item.parent(<span class="string"><span class="delimiter">&quot;</span><span class="content">ol</span><span class="delimiter">&quot;</span></span>)[<span class="integer">0</span>] == container.el[<span class="integer">0</span>]
+    }
+  }
+})</pre></div>
+</div>
+
+  </div>
+  <div class='span4'>
+    <ul>
+      <li>
+        <strong>Limit the drop targets</strong>
+        of the dragged item
+      </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>
+  </div>
+  <div class='span4'>
+    <ol class='limited_drop_targets vertical'>
+      <li class='highlight'>Item 1</li>
+        <li>Item 2</li>
+        <li class='highlight'>Item 3</li>
+        <li>Item 4</li>
+        <li class='highlight'>Item 5</li>
+        <li>Item 6</li>
+    </ol>
+  </div>
+  <div class='span4'>
+    <ol class='limited_drop_targets vertical'>
+      <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+        <li class='highlight'>Item 4</li>
+        <li class='highlight'>Item 5</li>
+        <li class='highlight'>Item 6</li>
+    </ol>
+  </div>
 </div>
   </div>
   <div id='bootstrap'>
@@ -880,6 +938,18 @@ <h2 id='group-options'>Group options</h2>
 
 </td>
 <td> The css selector of the items</td>
+</tr><tr><td>
+  <code>isValidTarget</code>
+</td>
+<td>
+  <div class="CodeRay">
+  <div class="code"><pre><span class="keyword">function</span> (item, container) {
+  <span class="keyword">return</span> <span class="predefined-constant">true</span>
+}</pre></div>
+</div>
+
+</td>
+<td> Check if the dragged item may be inside the container. Use with care, since the search for a valid container entails a depth first search and may be quite expensive.</td>
 </tr><tr><td>
   <code>onDrag</code>
 </td>

index.html

@@ -1082,7 +1082,7 @@ colors = jQuery.Color.names = {
 
 }(window.jQuery);
 /* ===================================================
- *  jquery-sortable.js v0.9.6
+ *  jquery-sortable.js v0.9.7
  *  http://johnny.github.com/jquery-sortable/
  * ===================================================
  *  Copyright (c) 2012 Jonas von Andrian
@@ -1114,8 +1114,6 @@ colors = jQuery.Color.names = {
 !function ( $, window, undefined){
   var eventNames,
   pluginName = 'sortable',
-  document = window.document,
-  $document = $(document),
   containerDefaults = {
     // If true, items can be dragged from this container
     drag: true,
@@ -1139,6 +1137,12 @@ colors = jQuery.Color.names = {
     handle: "",
     // The css selector of the items
     itemSelector: "li",
+    // Check if the dragged item may be inside the container.
+    // Use with care, since the search for a valid container entails a depth first search
+    // and may be quite expensive.
+    isValidTarget: function (item, container) {
+      return true
+    },
     // Executed at the beginning of a mouse move event.
     // The Placeholder has not been moved yet
     onDrag: function (item, position, _super) {
@@ -1226,7 +1230,7 @@ colors = jQuery.Color.names = {
     }
   }
 
-  function getNearest(dimensions, pointer, lastPointer) {
+  function sortByDistanceDesc(dimensions, pointer, lastPointer) {
     pointer = [pointer.left, pointer.top]
     lastPointer = lastPointer && [lastPointer.left, lastPointer.top]
 
@@ -1239,10 +1243,11 @@ colors = jQuery.Color.names = {
       distances[i] = [i,d(dim,pointer), lastPointer && d(dim, lastPointer)]
     }
     distances = distances.sort(function  (a,b) {
-      return a[1] - b[1] || a[2] - b[2] || a[0] - b[0]
+      return b[1] - a[1] || b[2] - a[2] || b[0] - a[0]
     })
 
-    return distances[0]
+    // last entry is the closest
+    return distances
   }
 
   function processChildContainers(item, containerSelector, method, ignoreChildren) {
@@ -1265,10 +1270,14 @@ colors = jQuery.Color.names = {
     this.scrolledProxy = $.proxy(this.scrolled, this)
     this.dragProxy = $.proxy(this.drag, this)
     this.dropProxy = $.proxy(this.drop, this)
+
     if(this.options.parentGroup)
       this.options.parentGroup.childGroups.push(this)
-    else
+    else {
       this.placeholder = $(this.options.placeholder)
+      if(!options.isValidTarget)
+        this.options.isValidTarget = undefined
+    }
   }
 
   ContainerGroup.get = function  (options) {
@@ -1282,9 +1291,9 @@ colors = jQuery.Color.names = {
 
   ContainerGroup.prototype = {
     dragInit: function  (e, itemContainer) {
-      $document.on(eventNames.move + "." + pluginName, this.dragProxy)
-      $document.on(eventNames.end + "." + pluginName, this.dropProxy)
-      $document.on("scroll." + pluginName, this.scrolledProxy)
+      this.$document = $(itemContainer.el[0].ownerDocument)
+
+      this.toggleListeners('on')
 
       // get item to drag
       this.item = $(e.target).closest(this.options.itemSelector)
@@ -1299,6 +1308,7 @@ colors = jQuery.Color.names = {
         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
       }
 
@@ -1314,14 +1324,11 @@ colors = jQuery.Color.names = {
       y = e.pageY,
       box = this.sameResultBox
       if(!box || box.top > y || box.bottom < y || box.left > x || box.right < x)
-        this.processMove()
+        this.searchValidTarget()
     },
     drop: function  (e) {
       e.preventDefault()
-
-      $document.off(eventNames.move + "." + pluginName)
-      $document.off(eventNames.end + "." + pluginName)
-      $document.off("scroll." + pluginName)
+      this.toggleListeners('off')
 
       if(!this.dragging)
         return;
@@ -1336,26 +1343,33 @@ colors = jQuery.Color.names = {
       this.lastAppendedItem = this.sameResultBox = undefined
       this.dragging = false
     },
-    processMove: function  (pointer, lastPointer) {
+    searchValidTarget: function  (pointer, lastPointer) {
       if(!pointer){
         pointer = this.relativePointer || this.pointer
         lastPointer = this.lastRelativePointer || this.lastPointer
       }
 
-      var nearest = getNearest(this.getContainerDimensions(),
-                               pointer,
-                               lastPointer)
-
-      if(nearest && (!nearest[1] || this.options.pullPlaceholder)){
-        var index = nearest[0],
-        container = this.containers[index]
-        if(!this.getOffsetParent()){
-          var offsetParent = container.getItemOffsetParent()
-          pointer = getRelativePosition(pointer, offsetParent)
-          lastPointer = getRelativePosition(lastPointer, offsetParent)
+      var distances = sortByDistanceDesc(this.getContainerDimensions(),
+                                         pointer,
+                                         lastPointer),
+      i = distances.length
+
+      while(i--){
+        var index = distances[i][0],
+        distance = distances[i][1]
+
+        if(!distance || this.options.pullPlaceholder){
+          var container = this.containers[index]
+          if(!this.getOffsetParent()){
+            var offsetParent = container.getItemOffsetParent()
+            pointer = getRelativePosition(pointer, offsetParent)
+            lastPointer = getRelativePosition(lastPointer, offsetParent)
+          }
+          if(container.searchValidTarget(pointer, lastPointer))
+            return true
         }
-        container.processMove(pointer, lastPointer)
       }
+
     },
     movePlaceholder: function  (container, item, method, sameResultBox) {
       var lastAppendedItem = this.lastAppendedItem
@@ -1430,6 +1444,11 @@ colors = jQuery.Color.names = {
       this.clearDimensions()
       this.clearOffsetParent()
     },
+    toggleListeners: function (method) {
+      this.$document[method](eventNames.move + "." + pluginName, this.dragProxy)
+      [method](eventNames.end + "." + pluginName, this.dropProxy)
+      [method]("scroll." + pluginName, this.scrolledProxy)
+    },
     // Recursively clear container and item dimensions
     clearDimensions: function  () {
       this.containerDimensions = undefined
@@ -1479,22 +1498,32 @@ colors = jQuery.Color.names = {
       rootGroup.placeholder.before(item).detach()
       rootGroup.options.onDrop(item, this, groupDefaults.onDrop)
     },
-    processMove: function  (pointer, lastPointer) {
-      // get Element right below the pointer
-      var nearest = getNearest(this.getItemDimensions(),
-                               pointer,
-                               lastPointer),
-      rootGroup = this.rootGroup
-      if(!nearest)
+    searchValidTarget: function  (pointer, lastPointer) {
+      var distances = sortByDistanceDesc(this.getItemDimensions(),
+                                         pointer,
+                                         lastPointer),
+      i = distances.length,
+      rootGroup = this.rootGroup,
+      validTarget = !rootGroup.options.isValidTarget ||
+        rootGroup.options.isValidTarget(rootGroup.item, this)
+
+      if(!i && validTarget){
         rootGroup.movePlaceholder(this, this.el, "append")
-      else {
-        var index = nearest[0],
-        distance = nearest[1]
-        if(!distance && this.options.nested && this.getContainerGroup(index))
-          this.getContainerGroup(index).processMove(pointer, lastPointer)
-        else
-          this.movePlaceholder(index, pointer)
-      }
+        return true
+      } else
+        while(i--){
+          var index = distances[i][0],
+          distance = distances[i][1]
+          if(!distance && this.options.nested && this.getContainerGroup(index)){
+            var found = this.getContainerGroup(index).searchValidTarget(pointer, lastPointer)
+            if(found)
+              return true
+          }
+          else if(validTarget){
+            this.movePlaceholder(index, pointer)
+            return true
+          }
+        }
     },
     movePlaceholder: function  (index, pointer) {
       var item = $(this.items[index]),
@@ -1572,6 +1601,7 @@ colors = jQuery.Color.names = {
         this.group.addContainer(this)
       if(!ignoreChildren)
         processChildContainers(this.el, this.options.containerSelector, "enable", true)
+
       this.el.on(eventNames.start + "." + pluginName, this.handle, this.dragInitProxy)
     },
     disable: function  (ignoreChildren) {
@@ -1595,7 +1625,7 @@ colors = jQuery.Color.names = {
    */
   $.fn[pluginName] = function(methodOrOptions) {
     var args = Array.prototype.slice.call(arguments, 1)
-
+    
     return this.each(function(){
       var $t = $(this),
       object = $t.data(pluginName)
@@ -1613,6 +1643,19 @@ $(function  () {
   $("ol.example").sortable()
 })
 ;
+$(function  () {
+  $("ol.limited_drop_targets").sortable({
+    group: 'limited_drop_targets',
+    isValidTarget: function  (item, container) {
+      if(item.is(".highlight"))
+        return true
+      else {
+        return item.parent("ol")[0] == container.el[0]
+      }
+    }
+  })
+})
+;
 $(function  () {
   $("ol.nav").sortable({
     group: 'nav',

js/application.js

@@ -0,0 +1,13 @@
+$(function  () {
+  $("ol.limited_drop_targets").sortable({
+    group: 'limited_drop_targets',
+    isValidTarget: function  (item, container) {
+      if(item.is(".highlight"))
+        return true
+      else {
+        return item.parent("ol")[0] == container.el[0]
+      }
+    }
+  })
+})
+;