4 callbacks added

README.md

@@ -1,107 +1,33 @@
-Nestable
+Nestable with 5 little callbacks
 ========
 
-## PLEASE NOTE
-
-**I cannot provide any support or guidance beyond this README. If this code helps you that's great but I have no plans to develop Nestable beyond this demo (it's not a final product and has limited functionality). I cannot reply to any requests for help.**
-
-* * *
-
-### Drag & drop hierarchical list with mouse and touch compatibility (jQuery / Zepto plugin)
-
-[**Try Nestable Demo**](http://dbushell.github.com/Nestable/)
-
-Nestable is an experimental example and not under active development. If it suits your requirements feel free to expand upon it!
-
-## Usage
-
-Write your nested HTML lists like so:
-
-    <div class="dd">
-        <ol class="dd-list">
-            <li class="dd-item" data-id="1">
-                <div class="dd-handle">Item 1</div>
-            </li>
-            <li class="dd-item" data-id="2">
-                <div class="dd-handle">Item 2</div>
-            </li>
-            <li class="dd-item" data-id="3">
-                <div class="dd-handle">Item 3</div>
-                <ol class="dd-list">
-                    <li class="dd-item" data-id="4">
-                        <div class="dd-handle">Item 4</div>
-                    </li>
-                    <li class="dd-item" data-id="5">
-                        <div class="dd-handle">Item 5</div>
-                    </li>
-                </ol>
-            </li>
-        </ol>
-    </div>
-
-Then activate with jQuery like so:
-
-    $('.dd').nestable({ /* config options */ });
-
-### Events
-
-The `change` event is fired when items are reordered.
-
-    $('.dd').on('change', function() {
-        /* on change event */
-    });
-
-### Methods
-
-You can get a serialised object with all `data-*` attributes for each item.
-
-    $('.dd').nestable('serialize');
-
-The serialised JSON for the example above would be:
-
-    [{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]
-
-### Configuration
-
-You can change the follow options:
-
-* `maxDepth` number of levels an item can be nested (default `5`)
-* `group` group ID to allow dragging between lists (default `0`)
-
-These advanced config options are also available:
-
-* `listNodeName` The HTML element to create for lists (default `'ol'`)
-* `itemNodeName` The HTML element to create for list items (default `'li'`)
-* `rootClass` The class of the root element `.nestable()` was used on (default `'dd'`)
-* `listClass` The class of all list elements (default `'dd-list'`)
-* `itemClass` The class of all list item elements (default `'dd-item'`)
-* `dragClass` The class applied to the list element that is being dragged (default `'dd-dragel'`)
-* `handleClass` The class of the content element inside each list item (default `'dd-handle'`)
-* `collapsedClass` The class applied to lists that have been collapsed (default `'dd-collapsed'`)
-* `placeClass` The class of the placeholder element (default `'dd-placeholder'`)
-* `emptyClass` The class used for empty list placeholder elements (default `'dd-empty'`)
-* `expandBtnHTML` The HTML text used to generate a list item expand button (default `'<button data-action="expand">Expand></button>'`)
-* `collapseBtnHTML` The HTML text used to generate a list item collapse button (default `'<button data-action="collapse">Collapse</button>'`)
-
-**Inspect the [Nestable Demo](http://dbushell.github.com/Nestable/) for guidance.**
-
-## Change Log
-
-### 15th October 2012
-
-* Merge for Zepto.js support
-* Merge fix for remove/detach items
-
-### 27th June 2012
-
-* Added `maxDepth` option (default to 5)
-* Added empty placeholder
-* Updated CSS class structure with options for `listClass` and `itemClass`.
-* Fixed to allow drag and drop between multiple Nestable instances (off by default).
-* Added `group` option to enabled the above.
-
+## This is a modified version of Nestable
+
+Original can be found here: https://github.com/dbushell/Nestable
+
+## Example
+```
+$('#example-list-element').nestable({
+	'maxDepth': 3,
+	afterInit: function ( event ) { 
+		console.log( event ); 
+	}
+})
+	.on('dragJustBeforeStart', function(handle) {
+		console.log('dragStart', handle);
+	})
+	.on('dragStart', function(event, item, source, destination) {
+		console.log('dragStart', event, item, source, destination);
+	})
+	.on('dragEnd', function(event, item, source, destination) {
+		console.log('dragEnd', event, item, source, destination);
+	})
+	.on('dragMove', function(event, item, source, destination) {
+		console.log('dragMove', event, item, source, destination);
+	});
+```
 * * *
 
-Author: David Bushell [http://dbushell.com](http://dbushell.com/) [@dbushell](http://twitter.com/dbushell/)
+Original Author: David Bushell [http://dbushell.com](http://dbushell.com/) [@dbushell](http://twitter.com/dbushell/)
 
 Copyright © 2012 David Bushell | BSD & MIT license

jquery.nestable.js → jquery.nestable.withCallbacks.js

@@ -1,6 +1,11 @@
 /*!
  * Nestable jQuery Plugin - Copyright (c) 2012 David Bushell - http://dbushell.com/
  * Dual-licensed under the BSD or MIT licenses
+ *
+ * Modified(1 April 2015):
+ * 		Added 2 callbacks
+ * 			afterInit
+ * 			onStartEvent
  */
 ;(function($, window, document, undefined)
 {
@@ -42,7 +47,9 @@
             collapseBtnHTML : '<button data-action="collapse" type="button">Collapse</button>',
             group           : 0,
             maxDepth        : 5,
-            threshold       : 20
+            threshold       : 20,
+            /* callback */
+            afterInit: null,
         };
 
     function Plugin(element, options)
@@ -87,6 +94,10 @@
             var onStartEvent = function(e)
             {
                 var handle = $(e.target);
+
+               	/* callback for dragJustBeforeStart */
+                list.el.trigger('dragJustBeforeStart', [handle]);
+
                 if (!handle.hasClass(list.options.handleClass)) {
                     if (handle.closest('.' + list.options.noDragClass).length) {
                         return;
@@ -105,20 +116,44 @@
 
                 e.preventDefault();
                 list.dragStart(e.touches ? e.touches[0] : e);
+
+                /* callback for dragStart */
+                var item = list.dragEl.find('.'+list.options.itemClass);
+                list.dragRootEl.trigger('dragStart', [
+                    item,           // List item
+                    list.el,        // Source list
+                    list.dragRootEl, // Destination list
+                ]);
             };
 
             var onMoveEvent = function(e)
             {
                 if (list.dragEl) {
                     e.preventDefault();
                     list.dragMove(e.touches ? e.touches[0] : e);
+                    /* callback for dragMove */
+                    var item = list.dragEl.find('.'+list.options.itemClass);
+                    list.dragRootEl.trigger('dragMove', [
+                        item,           // List item
+                        list.el,        // Source list
+                        list.dragRootEl // Destination list
+                    ]);
                 }
             };
 
             var onEndEvent = function(e)
             {
                 if (list.dragEl) {
                     e.preventDefault();
+
+                    /* callback for dragEnd */
+                    var item = list.dragEl.find('.'+list.options.itemClass);
+                    list.dragRootEl.trigger('dragEnd', [
+                        item,           // List item
+                        list.el,        // Source list
+                        list.dragRootEl // Destination list
+                    ]);
+
                     list.dragStop(e.touches ? e.touches[0] : e);
                 }
             };
@@ -134,6 +169,10 @@
             list.w.on('mousemove', onMoveEvent);
             list.w.on('mouseup', onEndEvent);
 
+			/* callback for afterInit */
+            if (typeof list.options.afterInit == 'function') {
+            	list.options.afterInit.call(window, this);
+            }
         },
 
         serialize: function()