draggable columns for text list
This commit is contained in:
Rolux
parent
16365555e9
commit
da29507488
2 changed files with 96 additions and 9 deletions
|
|
@ -875,3 +875,13 @@ Requests
|
|||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
Drag & Drop
|
||||
================================================================================
|
||||
*/
|
||||
|
||||
.OxDrag {
|
||||
cursor: move;
|
||||
}
|
||||
|
|
@ -2968,6 +2968,7 @@ requires
|
|||
});
|
||||
|
||||
$.extend(self, {
|
||||
columnPositions: [],
|
||||
columnWidths: [],
|
||||
itemHeight: 16,
|
||||
page: 0,
|
||||
|
|
@ -2994,19 +2995,30 @@ requires
|
|||
that.$head.$content.addClass("OxTitles");
|
||||
that.$titles = [];
|
||||
$.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;
|
||||
that.$titles[i] = $("<div>")
|
||||
.addClass("OxTitle")
|
||||
.addClass("OxTitle OxColumn" + Ox.toTitleCase(v.id))
|
||||
.css({
|
||||
width: (v.width - 9) + "px",
|
||||
textAlign: v.align
|
||||
})
|
||||
.html(v.title)
|
||||
.click(function() {
|
||||
clickColumn(v.id)
|
||||
.mousedown(function(e) {
|
||||
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);
|
||||
self.columnPositions[i] = Ox.sum(self.columnWidths) - self.columnWidths[i] / 2;
|
||||
$order = $("<div>")
|
||||
.addClass("OxOrder")
|
||||
.html(oxui.symbols["triangle_" + (
|
||||
|
|
@ -3019,12 +3031,12 @@ requires
|
|||
$resize = $("<div>")
|
||||
.addClass("OxResize")
|
||||
.mousedown(function(e) {
|
||||
var initialWidth = self.columnWidths[i],
|
||||
initialX = e.clientX;
|
||||
var startWidth = self.columnWidths[i],
|
||||
startX = e.clientX;
|
||||
$window.mousemove(function(e) {
|
||||
var x = e.clientX,
|
||||
width = Ox.limit(
|
||||
initialWidth - initialX + x,
|
||||
startWidth - startX + x,
|
||||
self.options.columnWidth[0],
|
||||
self.options.columnWidth[1]
|
||||
);
|
||||
|
|
@ -3090,6 +3102,7 @@ requires
|
|||
}
|
||||
|
||||
function clickColumn(id) {
|
||||
Ox.print("clickColumn", id);
|
||||
var i = getColumnIndexById(id),
|
||||
isSelected = self.options.sort[0].key == self.options.columns[i].id;
|
||||
that.sort(
|
||||
|
|
@ -3118,6 +3131,56 @@ requires
|
|||
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) {
|
||||
var pos = -1;
|
||||
$.each(self.options.columns, function(i, v) {
|
||||
|
|
@ -3144,8 +3207,22 @@ requires
|
|||
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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue