support drag and drop in text lists

source/Ox.UI/js/Core/Ox.Element.js

@@ -16,13 +16,13 @@ Ox.Element <function:Ox.JQueryElement> Basic UI element object
     self    <object> shared private variable
     # Events -------------------------------------------------------------------
     anyclick    <event> anyclick
-        fires on mouseup, but not on any subsequent mouseup within 250 ms
+        Fires on mouseup, but not on any subsequent mouseup within 250 ms
         *           <*> original event properties
     doubleclick <event> doubleclick
-        fires on the second mousedown within 250 ms
+        Fires on the second mousedown within 250 ms
         * <*> original event properties
     drag        <event> drag
-        fires on mousemove after dragstart, stops firing on mouseup
+        Fires on mousemove after dragstart, stops firing on mouseup
         clientDX    <number> horizontal drag delta in px
         clientDY    <number> vertical drag delta in px
         *           <*> original event properties
@@ -31,20 +31,24 @@ Ox.Element <function:Ox.JQueryElement> Basic UI element object
         clientDX    <number> horizontal drag delta in px
         clientDY    <number> vertical drag delta in px
         *           <*> original event properties
+    dragenter   <event> dragenter
+        Fires when entering an element during drag
+    dragleave   <event> dragleave
+        Fires when leaving an element during drag
     dragpause   <event> dragpause
-        Fires once when the mouse doesn't move for 250 ms after drag
+        Fires once when the mouse doesn't move for 250 ms during drag
         clientDX    <number> horizontal drag delta in px
         clientDY    <number> vertical drag delta in px
         *           <*> original event properties
     dragstart   <event> dragstart
-        fires when the mouse is down for 250 ms
+        Fires when the mouse is down for 250 ms
         *           <*> original event properties
     mouserepeat <event> mouserepeat
-        fires every 50 ms after the mouse was down for 250 ms, stops firing on
+        Fires every 50 ms after the mouse was down for 250 ms, stops firing on
         mouseleave or mouseup
         *           <*> original event properties
     singleclick <event> singleclick
-        fires 250 ms after mouseup, if there was no subsequent mousedown
+        Fires 250 ms after mouseup, if there was no subsequent mousedown
         *           <*> original event properties
 @*/
 

source/Ox.UI/js/List/Ox.List.js

@@ -29,6 +29,11 @@ Ox.List <f:Ox.Element> List Element
     self <o> shared private variable
     add <!> item added
     delete <!> item removed
+    draganddrop <!> Fires during drag
+    draganddropend <!> Fires on drop
+    draganddropenter <!> Fires when entering an item during drag
+    draganddropleave <!> Fires when leaving an item during drag
+    draganddropstart <i> Fires when drag starts
     copy <!> copy
     paste <!> paste
     movie <!> move item
@@ -326,7 +331,9 @@ Ox.List = function(options, self) {
     }
 
     function dragstart(event, e) {
-        if ($(e.target).is('.OxTarget')) {
+        var $target = $(e.target),
+            $parent = $target.parent();
+        if ($target.is('.OxTarget') || $parent.is('.OxTarget')) {
             self.drag = {
                 ids: self.options.selected
             }

source/Ox.UI/js/List/Ox.TextList.js

@@ -7,7 +7,7 @@ Ox.TextList <f:Ox.Element> TextList Object
     (options, self) -> <f> TextList Object
     options <o> Options object
         columns <[o]|[]>
-            Fixme: There's probably more...
+            # Fixme: There's probably more...
             addable <b>
             editable <b>
             format <f>
@@ -19,24 +19,26 @@ Ox.TextList <f:Ox.Element> TextList Object
             unique <b> If true, this column acts as unique id
             visible <b>
             width <n>
-        columnsMovable <b|false>
+        columnsMovable <b|false> If true, columns can be re-ordered
-        columnsRemovable <b|false>
+        columnsRemovable <b|false> If true, columns are removable
-        columnsResizable <b|false>
+        columnsResizable <b|false> If true, columns are resizable
-        columnsVisible <b|false>
+        columnsVisible <b|false> If true, columns are visible
-        columnWidth <a|[40, 800]>
+        columnWidth <[n]|[40, 800]> Minimum and maximum column width
         draggable <b|false> If true, items can be dragged
         id <s|''>
         items <f|null> function() {} {sort, range, keys, callback} or array
         max <n|-1> Maximum number of items that can be selected (-1 for all)
         min <n|0> Minimum number of items that must be selected
-        pageLength <n|100>
+        pageLength <n|100> Number of items per page
-        scrollbarVisible <b|false>
+        scrollbarVisible <b|false> If true, the scrollbar is always visible
         selected <a|[]>
         sort <a|[]>
         sortable <b|false> If true, elements can be re-ordered
     self    <o> shared private variable
 @*/
 
+// fixme: options.columnsMovable, but options.sortable ... pick one.
+
 Ox.TextList = function(options, self) {
 
     // fixme: rename to TableList
@@ -206,12 +208,12 @@ Ox.TextList = function(options, self) {
             }
         })
         .bindEvent({
-            edit: function(data) {
-                that.editCell(data.id, data.key);
-            },
             cancel: function(data) {
                 Ox.print('cancel edit', data);
             },
+            edit: function(data) {
+                that.editCell(data.id, data.key);
+            },
             init: function(data) {
                 // fixme: why does this never reach?
                 //Ox.print('INIT????')
@@ -223,6 +225,7 @@ Ox.TextList = function(options, self) {
             }
         })
         .appendTo(that);
+
     that.$body.$content.css({
         width: getItemWidth() + 'px'
     });