add serialization example

smaller improvements

closes johnny#44

Author: Jonas von Andrian

TODO

@@ -4,6 +4,8 @@
   - [ ] last Pointer is NaN in search valid target
   - [ ] prevent infinite recursion
   - [ ] bootstrap example jumps up on drop
+    - (only sometimes. preventDefault() does not work if called inside drop or on containing element. Look up where the on handler attaches itself)
+    - only firefox, chrome works
 - [0/5] consider
   - [ ] better name for searchValidTarget
   - [ ] shortcut on getNearest()

source/_serialization.html.haml

@@ -0,0 +1,27 @@
+%h2 Serialization and delay
+.row
+  .span12.example
+    %pre(lang="js")= example("serialization")
+  .span4
+    %ul
+      %li
+        Uses the default
+        %strong serialize
+        implementation, that reads out the
+        %strong data attributes
+    %p= show_code_button
+    %h3 Serialize result
+    %pre#serialize_output2
+  .span4
+    %ol.serialization.vertical
+      = iterate(6) do |i,name|
+        %li(data-id=i data-name=name)
+          = name
+          - if i == 3
+            %ol
+              = iterate(6) do |j, name|
+                %li(data-id="#{i}-#{j}" data-name=name)= name
+  .span4
+    %ol.serialization.vertical
+      = iterate(6,"Item") do |i,name|
+        %li(data-id=i data-name=name)= name

source/index.html.haml

@@ -136,6 +136,8 @@
     = partial "limited_drop_targets"
   #bootstrap
     = partial "nested_bootstrap"
+  #serialization
+    = partial "serialization"
   #table
     = partial "table"
 #docs
@@ -239,4 +241,3 @@
 
     Built with [Bootstrap](http://twitter.github.com/bootstrap/).
     Icons from [Glyphicons Free](http://glyphicons.com/).
-

source/js/examples/serialization.js

@@ -0,0 +1,10 @@
+$(function  () {
+  var group = $("ol.serialization").sortable({
+    group: 'serialization',
+    delay: 1000,
+    onDrop: function (item, container, _super) {
+      $('#serialize_output2').text(group.sortable("serialize").get().join("\n"))
+      _super(item, container)
+    }
+  })
+})

source/js/jquery-sortable.js

@@ -27,9 +27,8 @@
  *  SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  * ========================================================== */
 
-!function ( $, window, undefined){
+!function ( $, window, pluginName, undefined){
   var eventNames,
-  pluginName = 'sortable',
   containerDefaults = {
     // If true, items can be dragged from this container
     drag: true,
@@ -101,7 +100,7 @@
     // Called on mousedown. If falsy value is returned, the dragging will not start.
     // If clicked on input element, ignore
     onMousedown: function ($item, _super, event) {
-      if (event.target.nodeName != 'INPUT' && event.target.nodeName != 'SELECT') {
+      if (!event.target.nodeName.match(/^(input|select)$/i)) {
         event.preventDefault()
         return true
       }
@@ -115,12 +114,11 @@
     pullPlaceholder: true,
     // Specifies serialization of the container group.
     // The pair $parent/$children is either container/items or item/subcontainers.
-    // Note that this default method only works, if every item only has one subcontainer
     serialize: function ($parent, $children, parentIsContainer) {
       var result = $.extend({}, $parent.data())
 
       if(parentIsContainer)
-        return $children
+        return [$children]
       else if ($children[0]){
         result.children = $children
         delete result.subContainer
@@ -407,7 +405,7 @@
     },
     scroll: function  (e) {
       this.clearDimensions()
-      this.clearOffsetParent()
+      this.clearOffsetParent() // TODO is this needed?
     },
     toggleListeners: function (method, events) {
       var that = this
@@ -644,4 +642,4 @@
     });
   };
 
-}(jQuery, window);
+}(jQuery, window, 'sortable');