drag.js

学生选课系统 赶快来下载啊啊好东西 呵呵啊啊 啊啊啊啊啊

var DragUtil = new Object();

DragUtil.getUserAgent = navigator.userAgent;
DragUtil.isGecko = DragUtil.getUserAgent.indexOf("Gecko") != -1;
DragUtil.isOpera = DragUtil.getUserAgent.indexOf("Opera") != -1;
DragUtil.getOffset = function (el, isLeft) {
    var retValue = 0;
      while (el != null) {
        retValue += el["offset" + (isLeft ? "Left" : "Top")];
        el = el.offsetParent;
      }

    return retValue;
};

DragUtil.bindFunction = function (el, fucName) {
    return function () {
        return el[fucName].apply(el, arguments);
    };
};
DragUtil.re_calcOff = function (el) {
    for (var i = 0; i < DragUtil.dragArray.length; i++) {
        var ele = DragUtil.dragArray[i];
        ele.elm.pagePosLeft = DragUtil.getOffset(ele.elm, true);
        ele.elm.pagePosTop = DragUtil.getOffset(ele.elm, false);
    }
    var nextSib = el.elm.nextSibling;
    while (nextSib) {
        nextSib.pagePosTop -= el.elm.offsetHeight;
        nextSib = nextSib.nextSibling;
    }
};

DragUtil.hide = function () {
    DragUtil.rootElement.style.display = "none";
};
DragUtil.show = function () {
    DragUtil.rootElement.style.display = "";
};

DragUtil.ghostElement = null;
DragUtil.ghostClass = "refPos";
DragUtil.getGhostElement = function () {
    if (!DragUtil.ghostElement) {
        DragUtil.ghostElement = document.createElement("DIV");
        DragUtil.ghostElement.className = DragUtil.ghostClass;
        DragUtil.ghostElement.innerHTML = "&nbsp;";
    }
    return DragUtil.ghostElement;
};

function Draggable(el) {
    this._dragStart = start_Drag;
    this._drag = when_Drag;
    this._dragEnd = end_Drag;
		this._dragCancel = cancel_Drag;
    this._afterDrag = after_Drag;
    this.isDragging = false;
    this.elm = el;
    this.header = document.getElementById(el.id + "_h");
    this.hasIFrame = this.elm.getElementsByTagName("IFRAME").length > 0;
    if (this.header) {
        this.header.style.cursor = "move";
        Drag.init(this.header, this.elm);
        this.elm.onDragStart = DragUtil.bindFunction(this, "_dragStart");
        this.elm.onDrag = DragUtil.bindFunction(this, "_drag");
        this.elm.onDragEnd = DragUtil.bindFunction(this, "_dragEnd");
				this.elm.onDragCancel = DragUtil.bindFunction(this, "_dragCancel");
    }
}

function start_Drag() {
    DragUtil.re_calcOff(this);
    this.origNextSibling = this.elm.nextSibling;
	  this.elm.nextObj = this.origNextSibling;
    var _ghostElement = DragUtil.getGhostElement();
    var offH = this.elm.offsetHeight;
    var offW = this.elm.offsetWidth;
    
    if (DragUtil.isGecko){
       offH -= 4; 
       offW -= 4;
    }else{
       offH -= 4; 
       offW -= 4;
       //alert(offW);
       //alert(this.elm.cwidth);
       //offW = offW*2 - this.elm.offsetWidth;
       //alert(offW);
    }

   
    var offLeft = DragUtil.getOffset(this.elm, true);
    var offTop = DragUtil.getOffset(this.elm, false);
    DragUtil.hide();
    //this.elm.style.width = offW + "px";
    _ghostElement.style.height = offH + "px";
	  _ghostElement.style.width = offW + "px";
    this.elm.parentNode.insertBefore(_ghostElement, this.elm.nextSibling);
    this.elm.style.position = "absolute";
    this.elm.style.zIndex = 100;
    this.elm.style.left = offLeft + "px";
    this.elm.style.top = offTop + "px";
    DragUtil.show();
    this.isDragging = false;
    return false;
}

function when_Drag(clientX, clientY) {
    if (!this.isDragging) {
        this.elm.style.filter = "alpha(opacity=70)";
        this.elm.style.opacity = 0.7;
        this.isDragging = true;
    }
    var found = null;
    var max_distance = 100000000;
    for (var i = 0; i < DragUtil.dragArray.length; i++) {
        var ele = DragUtil.dragArray[i];
        var distance = Math.sqrt(Math.pow(clientX - ele.elm.pagePosLeft, 2) + Math.pow(clientY - ele.elm.pagePosTop, 2));
        if (ele == this) {
            continue;
        }
        if (isNaN(distance)) {
            continue;
        }
        if (distance < max_distance) {
            max_distance = distance;
            found = ele;
        }
    }
    var _ghostElement = DragUtil.getGhostElement();
    if (found != null && _ghostElement.nextSibling != found.elm) {
        found.elm.parentNode.insertBefore(_ghostElement, found.elm);
        if (DragUtil.isOpera) {
            document.body.style.display = "none";
            document.body.style.display = "";
        }
    }
}

function end_Drag() {
    if (this._afterDrag()) {
        //remote call to save the change
    }
    return true;
}

function after_Drag() {
    var returnValue = false;
    DragUtil.hide();
    this.elm.style.position = "";
    //this.elm.style.width = "";
    this.elm.style.zIndex = "";
    this.elm.style.filter = "";
    this.elm.style.opacity = "";
    var ele = DragUtil.getGhostElement();
    if (ele.nextSibling != this.origNextSibling) {
        ele.parentNode.insertBefore(this.elm, ele.nextSibling);
        returnValue = true;
    }
    ele.parentNode.removeChild(ele);
    DragUtil.show();
    if (DragUtil.isOpera) {
        document.body.style.display = "none";
        document.body.style.display = "";
    }
    return returnValue;
}

function cancel_Drag(){
		var returnValue = false;
    DragUtil.hide();
    this.elm.style.position = "";
    //this.elm.style.width = "";
    this.elm.style.zIndex = "";
    this.elm.style.filter = "";
    this.elm.style.opacity = "";
    var ele = DragUtil.getGhostElement();
    ele.parentNode.removeChild(ele);
	Drag.obj.nextObj.parentNode.insertBefore(Drag.obj, Drag.obj.nextObj);
    DragUtil.show();
    if (DragUtil.isOpera) {
        document.body.style.display = "none";
        document.body.style.display = "";
    }
    return returnValue;
}
var Drag = {
	obj:null, 
	init:function (elementHeader, element) {
    elementHeader.onmousedown = Drag.start;
    elementHeader.obj = element;
    if (isNaN(parseInt(element.style.left))) {
        element.style.left = "0px";
    }
    if (isNaN(parseInt(element.style.top))) {
        element.style.top = "0px";
    }
    //element.cwidth = element.clientWidth;
    //element.cheight = element.clientHeight;
    element.onDragStart = new Function();
    element.onDragEnd = new Function();
    element.onDrag = new Function();
		element.onDragCancel = new Function();
	},
	start:function (event) {
	    var element = Drag.obj = this.obj;
	    event = Drag.fixE(event);
	    if (event.which != 1) {
	        return true;
    	}
	    element.onDragStart();
	    element.lastMouseX = event.clientX;
	    element.lastMouseY = event.clientY;
	    document.onmouseup = Drag.end;
	    document.onmousemove = Drag.drag;
			document.onkeydown = Drag.cancel;
	    return false;
	}, 
	drag:function (event) {
	    event = Drag.fixE(event);
	    if (event.which == 0) {
	        return Drag.end();
    	}
	    var element = Drag.obj;
	    var _clientX = event.clientY;
	    var _clientY = event.clientX;
	    if (element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
	        return false;
	    }
	    var _lastX = parseInt(element.style.top);
	    var _lastY = parseInt(element.style.left);
	    var newX, newY;
	    newX = _lastY + _clientY - element.lastMouseX;
	    newY = _lastX + _clientX - element.lastMouseY;
	    element.style.left = newX + "px";
	    element.style.top = newY + "px";
	    element.lastMouseX = _clientY;
	    element.lastMouseY = _clientX;
	    element.onDrag(newX, newY);
	    return false;
	},
	end:function (event) {
	    event = Drag.fixE(event);
	    document.onmousemove = null;
	    document.onmouseup = null;
			document.onkeydown = null;
	    var _onDragEndFuc = Drag.obj.onDragEnd();
	    Drag.obj = null;
	    return _onDragEndFuc;
	}, 
	cancel:function (event) {
			event = Drag.fixE(event);
			if(event.keyCode == 27){
				document.onmousemove = null;
				document.onmouseup = null;
				document.onkeydown = null;
				var _onDragCancelFuc = Drag.obj.onDragCancel();
				Drag.obj = null;
				return _onDragCancelFuc;
			}
	},
	fixE:function (ig_) {
	    if (typeof ig_ == "undefined") {
	        ig_ = window.event;
	    }
	    if (typeof ig_.layerX == "undefined") {
	        ig_.layerX = ig_.offsetX;
	    }
	    if (typeof ig_.layerY == "undefined") {
	        ig_.layerY = ig_.offsetY;
	    }
	    if (typeof ig_.which == "undefined") {
	        ig_.which = ig_.button;
	    }
    	return ig_;
	}
};

function Drag_getDrags(){
  var itemOrder = new Array();
  var counter = 0;
  for (var i = 0; i < DragUtil.column.length; i++) {
    var ele = DragUtil.column[i];
    var eles = Element.getElementsByClassName(ele, "pageItemOrder");
    for(var j=0;j<eles.length;j++){
      itemOrder[counter] = eles[j].id;
      counter ++;
      if ($(eles[j].id + "_item_layoutid") != null)
      {
        $(eles[j].id + "_item_layoutid").value = ele.id;
      }
    }
  }
  return itemOrder;
}

function Drag_addDrag(el){
  el = $(el);
  if($("layout_id_select").value == ""){
    alert("请先选择放置容器!");
    $("layout_id_select").focus();
    return false;
  }
  var ele = $($("layout_id_select").value);
  //ele.insertBefore(el, ele.firstChild);
  ele.appendChild(el);
  el.style.display = "";
  el.style.position = "";
  el.style.zIndex = "";
  el.style.filter = "";
  el.style.opacity = "";
  var dragEl = new Draggable(el);
  DragUtil.dragArray[DragUtil.dragArray.length] = dragEl;
  return true;
}

function Drag_delDrag(el){
  el = $(el);
  var storage = $("storage");
  el.style.display = "none";
  storage.insertBefore(el, storage.firstChild);
  var newArray = new Array;
  for (var i = 0; i < DragUtil.dragArray.length; i++) {
    var ele = DragUtil.dragArray[i];
    if(ele.elm.id != el.id){
      newArray.push(ele);
    }
  }
  DragUtil.dragArray = newArray;
}

function Drag_initDrag(el) {
    el = $(el);
    DragUtil.rootElement = el;
    DragUtil.column = Element.getElementsByClassName(DragUtil.rootElement, "layout_grid"); 
    //DragUtil.rootElement.tBodies[0].getElementsByTagName("TD");
    DragUtil.dragArray = new Array();
    var counter = 0;
    for (var i = 0; i < DragUtil.column.length; i++) {
        var ele = DragUtil.column[i];
        for (var j = 0; j < ele.childNodes.length; j++) {
            var ele1 = ele.childNodes[j];
            if (ele1.tagName == "DIV") {
                DragUtil.dragArray[counter] = new Draggable(ele1);
                counter++;
            }
        }
        if($("layout_id_select").tagName == "SELECT"){
          $("layout_id_select").options.add(new Option(ele.id, ele.id));
        }
    }
}