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

draggable columns for text list

Browse source
This commit is contained in:
Rolux 2010-07-03 13:31:25 +02:00
parent 16365555e9
commit da29507488
2 changed files with 96 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
build/css/ox.ui.css
View file

@ -875,3 +875,13 @@ Requests
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
/*
================================================================================
Drag & Drop
================================================================================
*/
.OxDrag {
cursor: move;
}

95
build/js/ox.ui.js
View file

@ -2968,6 +2968,7 @@ requires
}); });
$.extend(self, { $.extend(self, {
columnPositions: [],
columnWidths: [], columnWidths: [],
itemHeight: 16, itemHeight: 16,
page: 0, page: 0,
@ -2994,19 +2995,30 @@ requires
that.$head.$content.addClass("OxTitles"); that.$head.$content.addClass("OxTitles");
that.$titles = []; that.$titles = [];
$.each(self.visibleColumns, function(i, v) { $.each(self.visibleColumns, function(i, v) {
var $order, $resize, $left, $center, $right; var $order, $resize, $left, $center, $right, timeout = 0;
self.columnWidths[i] = v.width; self.columnWidths[i] = v.width;
that.$titles[i] = $("<div>") that.$titles[i] = $("<div>")
.addClass("OxTitle") .addClass("OxTitle OxColumn" + Ox.toTitleCase(v.id))
.css({ .css({
width: (v.width - 9) + "px", width: (v.width - 9) + "px",
textAlign: v.align textAlign: v.align
}) })
.html(v.title) .html(v.title)
.click(function() { .mousedown(function(e) {
clickColumn(v.id) timeout = setTimeout(function() {
dragColumn(v.id, e);
timeout = 0;
}, 250);
})
.mouseup(function() {
if (timeout) {
clearTimeout(timeout);
timeout = 0;
clickColumn(v.id);
}
}) })
.appendTo(that.$head.$content.$element); .appendTo(that.$head.$content.$element);
self.columnPositions[i] = Ox.sum(self.columnWidths) - self.columnWidths[i] / 2;
$order = $("<div>") $order = $("<div>")
.addClass("OxOrder") .addClass("OxOrder")
.html(oxui.symbols["triangle_" + ( .html(oxui.symbols["triangle_" + (
@ -3019,12 +3031,12 @@ requires
$resize = $("<div>") $resize = $("<div>")
.addClass("OxResize") .addClass("OxResize")
.mousedown(function(e) { .mousedown(function(e) {
var initialWidth = self.columnWidths[i], var startWidth = self.columnWidths[i],
initialX = e.clientX; startX = e.clientX;
$window.mousemove(function(e) { $window.mousemove(function(e) {
var x = e.clientX, var x = e.clientX,
width = Ox.limit( width = Ox.limit(
initialWidth - initialX + x, startWidth - startX + x,
self.options.columnWidth[0], self.options.columnWidth[0],
self.options.columnWidth[1] self.options.columnWidth[1]
); );
@ -3090,6 +3102,7 @@ requires
} }
function clickColumn(id) { function clickColumn(id) {
Ox.print("clickColumn", id);
var i = getColumnIndexById(id), var i = getColumnIndexById(id),
isSelected = self.options.sort[0].key == self.options.columns[i].id; isSelected = self.options.sort[0].key == self.options.columns[i].id;
that.sort( that.sort(
@ -3118,6 +3131,56 @@ requires
return $item; return $item;
} }
function dragColumn(id, e) {
var startX = e.clientX,
startPos = getColumnPositionById(id),
pos = startPos,
stopPos = startPos,
positions = $.map(self.visibleColumns, function(v, i) {
return self.columnPositions[i] - self.columnPositions[startPos]
});
that.$titles[startPos].addClass("OxDrag").css({ // fixme: why does the class not work?
cursor: "move"
});
Ox.print("positions", positions)
$window.mousemove(function(e) {
var d = e.clientX - startX;
$.each(positions, function(i, v) {
if (d < 0 && d < v) {
stopPos = i;
return false;
} else if (d > 0 && d > v) {
stopPos = i;
}
});
if (stopPos != pos) {
pos = stopPos;
moveColumn(id, pos);
}
});
$window.mouseup(function() {
dropColumn(id, pos);
$window.unbind("mousemove");
$window.unbind("mouseup");
});
}
function dropColumn(id, pos) {
Ox.print("dropColumn", id, pos)
var startPos = getColumnPositionById(id),
stopPos = pos,
$title = that.$titles.splice(startPos, 1)[0],
column = self.visibleColumns.splice(startPos, 1)[0],
width = self.columnWidths.splice(startPos, 1)[0];
that.$titles.splice(stopPos, 0, $title);
self.visibleColumns.splice(stopPos, 0, column);
self.columnWidths.splice(stopPos, 0, width);
Ox.print("s.vC", self.visibleColumns)
that.$titles[stopPos].removeClass("OxDrag").css({
cursor: "pointer"
});
}
function getColumnIndexById(id) { function getColumnIndexById(id) {
var pos = -1; var pos = -1;
$.each(self.options.columns, function(i, v) { $.each(self.options.columns, function(i, v) {
@ -3144,8 +3207,22 @@ requires
return Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize); return Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize);
} }
function moveColumn(id) { function moveColumn(id, pos) {
Ox.print("moveColumn", id, pos)
var startPos = getColumnPositionById(id),
stopPos = pos,
startClassName = ".OxColumn" + Ox.toTitleCase(id),
stopClassName = ".OxColumn" + Ox.toTitleCase(self.visibleColumns[stopPos].id),
$column = $(".OxTitle" + startClassName),
$order = $column.next(),
$resize = $order.next();
$column.detach().insertBefore($(".OxTitle" + stopClassName));
$order.detach().insertAfter($column);
$resize.detach().insertAfter($order);
$.each(that.$body.find(".OxItem"), function(i, v) {
var $v = $(v);
$v.children(startClassName).detach().insertBefore($v.children(stopClassName));
});
} }
function removeColumn(id) { function removeColumn(id) {