0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

support drag and drop in text lists

Browse source
This commit is contained in:
rlx 2011-09-04 12:19:36 +00:00
parent 6b0779fcab
commit 63885b8c1b
3 changed files with 33 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
source/Ox.UI/js/Core/Ox.Element.js
View file

@ -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
@*/

9
source/Ox.UI/js/List/Ox.List.js
View file

@ -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
}

25
source/Ox.UI/js/List/Ox.TextList.js
View file

@ -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>
columnsRemovable <b|false>
columnsResizable <b|false>
columnsVisible <b|false>
columnWidth <a|[40, 800]>
columnsMovable <b|false> If true, columns can be re-ordered
columnsRemovable <b|false> If true, columns are removable
columnsResizable <b|false> If true, columns are resizable
columnsVisible <b|false> If true, columns are visible
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>
scrollbarVisible <b|false>
pageLength <n|100> Number of items per page
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'
});