JS拖曳效果

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      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          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    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';
  }
}