var neverModules = window.neverModules || {};
neverModules.modules = neverModules.modules || {};
neverModules.modules.customlayout = function (drag_table_Id) {
return this._defaultInitializer.apply(this, arguments);
};
neverModules.modules.customlayout.prototype = {
_defaultInitializer: function (drag_table_Id) {
this.eDraging = null;
this.drag_column = null;
this.objContainer = null;
this.containerId = drag_table_Id;
this._ownInstance = this;
return this;
},
init: function () {with(this){
eDraging = document.createElement("div");
document.body.appendChild(eDraging);
eDraging.className = "draging";
eDraging.style.display = "none";
objContainer = document.getElementById(containerId);
var _this = this._ownInstance;
if (!!objContainer==false) { return; }
else { document.onmousedown = function(event) { _this.mouseDownHandler(event, _this); }; }
}},
mouseDownHandler: function (evt, _this) {with(_this){
evt = evt?evt:window.event;
var element = evt.target?evt.target:window.event.srcElement;
if (element.className=="title") {
drag_column = queryColumn(element, "DIV");
var element_offsets = getCoordinate(drag_column);
eDraging.style.display = "block";
evaluate_coordinate(eDraging, element_offsets);
eDraging.innerHTML = drag_column.outerHTML;
eDraging.dragx = evt.clientX-element_offsets.left;
eDraging.dragy = evt.clientY-element_offsets.top;
document.onmousemove = function (event) {
mouseMoveHandler(event, eDraging);
}
document.onmouseup = function () {
eDraging.style.display = "none";
drag_column.style.border = "none";
document.onmousemove = null;
document.onmouseup = null;
}
}
}},
mouseMoveHandler: function (evt, eDraging) {with(this){
evt = evt?evt:window.event;
var cx = evt.clientX; var cy = evt.clientY;
var nleft = cx-eDraging.dragx;
var ntop = cy-eDraging.dragy;
eDraging.style.left = nleft+'px';
eDraging.style.top = ntop+'px';
for (var i=0; i<objContainer.childNodes.length; i++) {
var column = objContainer.childNodes[i];
var subTbls = getDragElements(column);
var column_offsets = getCoordinate(column);
if (cx>=column_offsets.left &&
cx<=column_offsets.right &&
cy>=column_offsets.top &&
cy<=column_offsets.bottom) {
if (subTbls.length==0) {
if (cx>=column_offsets.left &&
cx<=column_offsets.right &&
cy>=column_offsets.top &&
cy<=column_offsets.bottom) {
column.appendChild(drag_column);
drag_column.style.border = "1px dotted #eee";
}
break;
}
for (var j=0; j<subTbls.length; j++) {
var drag_element = subTbls[j];
var drag_offsets = getCoordinate(drag_element);
if (cx>=drag_offsets.left &&
cx<=drag_offsets.right &&
cy>=drag_offsets.top &&
cy<=drag_offsets.bottom) {
column.insertBefore(drag_column, drag_element);
drag_column.style.border = "1px dotted #eee";
break;
} else {
column.appendChild(drag_column);
drag_column.style.border = "1px dotted #eee";
}
}
}
}
}},
dispose: function () {with(this){
eDraging = drag_column = null;
objContainer = null;
containerId = null;
}}
}
var queryColumn = function (e, tagname) {
while (e.parentNode.tagName!=tagname) { //父節點
e = e.parentNode;
}
return e.parentNode;
}
var getDragElements = function (e) {
var a = e.childNodes; var r=[];
for (var i=0; i<a.length; i++) {
if (a[i].tagName=="DIV") {
r.push(a[i]);
}
}
return r;
}
var getCoordinate = function (e) {
var width = e.offsetWidth;
var height = e.offsetHeight;
var left = e.offsetLeft;
var top = e.offsetTop;
while (e=e.offsetParent) {
left += e.offsetLeft;
top += e.offsetTop;
}
var right = left+width;
var bottom = top+height;
return {
'width': width,
'height': height,
'left': left,
'top': top,
'right': right,
'bottom': bottom
}
}
var evaluate_coordinate = function (o, c) {
with (o.style) {
left = c.left+'px';
top = c.top+'px';
height = c.height+'px';
width = c.width +'px';
}
}