when dragging columns, scroll list if needed
This commit is contained in:
parent
0ba258281f
commit
a29d7e70ea
1 changed files with 38 additions and 11 deletions
|
@ -332,6 +332,9 @@ Ox.TextList = function(options, self) {
|
|||
drag: function(event, e) {
|
||||
dragColumn(column.id, e);
|
||||
},
|
||||
dragpause: function(event, e) {
|
||||
dragpauseColumn(column.id, e);
|
||||
},
|
||||
dragend: function(event, e) {
|
||||
dragendColumn(column.id, e);
|
||||
}
|
||||
|
@ -420,15 +423,14 @@ Ox.TextList = function(options, self) {
|
|||
.html(v.id in data ? formatValue(v.id, data[v.id], data) : '')
|
||||
.appendTo($item);
|
||||
});
|
||||
//Math.random() < 0.01 && Ox.print('item', data, $item);
|
||||
return $item;
|
||||
}
|
||||
|
||||
function dragstartColumn(id, e) {
|
||||
//Ox.print(that.$body.scrollLeft(), '??')
|
||||
self.drag = {
|
||||
columnOffsets: getColumnOffsets(),
|
||||
// fixme: doesn't take into account horizontal scroll
|
||||
listOffset: that.$element.offset().left,
|
||||
listOffset: that.$element.offset().left - that.$body.scrollLeft(),
|
||||
startPos: getColumnPositionById(id)
|
||||
}
|
||||
self.drag.stopPos = self.drag.startPos;
|
||||
|
@ -442,7 +444,9 @@ Ox.TextList = function(options, self) {
|
|||
}
|
||||
|
||||
function dragColumn(id, e) {
|
||||
var pos = self.drag.stopPos;
|
||||
var listLeft = that.$element.offset().left,
|
||||
listRight = listLeft + that.$element.width(),
|
||||
pos = self.drag.stopPos;
|
||||
Ox.forEach(self.drag.columnOffsets, function(offset, i) {
|
||||
var x = self.drag.listOffset + offset + self.columnWidths[i] / 2;
|
||||
if (i < self.drag.startPos && e.clientX < x) {
|
||||
|
@ -456,8 +460,33 @@ Ox.TextList = function(options, self) {
|
|||
moveColumn(id, self.drag.stopPos);
|
||||
self.drag.columnOffsets = getColumnOffsets();
|
||||
self.drag.startPos = self.drag.stopPos;
|
||||
//Ox.print('columnOffsets', self.drag.columnOffsets)
|
||||
///*
|
||||
var left = self.drag.columnOffsets[self.drag.startPos],
|
||||
right = left + self.columnWidths[self.drag.startPos];
|
||||
if (left < that.$body.scrollLeft() || right > that.$element.width()) {
|
||||
that.$body.scrollLeft(
|
||||
left < that.$body.scrollLeft() ? left : right - that.$element.width()
|
||||
);
|
||||
self.drag.listOffset = that.$element.offset().left - that.$body.scrollLeft();
|
||||
}
|
||||
//*/
|
||||
}
|
||||
if (e.clientX < listLeft + 16 || e.clientX > listRight - 16) {
|
||||
if (!self.scrollInterval) {
|
||||
self.scrollInterval = setInterval(function() {
|
||||
that.$body.scrollLeft(
|
||||
that.$body.scrollLeft() + (e.clientX < listLeft + 16 ? -16 : 16)
|
||||
);
|
||||
self.drag.listOffset = that.$element.offset().left - that.$body.scrollLeft();
|
||||
}, 100);
|
||||
}
|
||||
} else if (self.scrollInterval) {
|
||||
clearInterval(self.scrollInterval);
|
||||
self.scrollInterval = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function dragpauseColumn(id, e) {
|
||||
}
|
||||
|
||||
function dragendColumn(id, e) {
|
||||
|
@ -707,9 +736,9 @@ Ox.TextList = function(options, self) {
|
|||
self.$heads[pos].toggleClass('OxSelected');
|
||||
self.$heads[pos].next().children().eq(0).toggleClass('OxSelected');
|
||||
self.$titles[pos].css({
|
||||
width: (
|
||||
self.$titles[pos].width() + (self.$heads[pos].hasClass('OxSelected') ? -16 : 16)
|
||||
) + 'px'
|
||||
width: self.$titles[pos].width()
|
||||
+ (self.$heads[pos].hasClass('OxSelected') ? -16 : 16)
|
||||
+ 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -786,9 +815,7 @@ Ox.TextList = function(options, self) {
|
|||
width = column.width - self.options.columnsVisible;
|
||||
$cell.empty()
|
||||
.addClass('OxEdit')
|
||||
.css({
|
||||
width: width + 'px'
|
||||
});
|
||||
.css({width: width + 'px'});
|
||||
$input = Ox.Input({
|
||||
autovalidate: column.input ? column.input.autovalidate : null,
|
||||
style: 'square',
|
||||
|
|
Loading…
Reference in a new issue