init on github

dragJS/dragJS.css

@@ -0,0 +1,8 @@
+/* drag/resize container */
+.drag{border:5px solid; width:200px; height:100px; position:fixed; top:100px; left:100px; cursor:move; z-index:20;}
+/* inner container (DRdiv object) */
+.indrag{width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:0; background:lightgray;}
+/* resize borders */
+.resz{border:none;  position:absolute; opacity:0.5; width:100%; height:100%;}
+.resz:hover{border:1px dotted; background:gray;}
+

dragJS/dragJS.js

@@ -0,0 +1,197 @@
+/*
+ * function DRdiv(insideHTML)
+ * creates draggable and resizible div
+ * arguments:
+ *    insideHTML - optional, data inside created div
+ * returns div element avaiable for user's manipulations
+ * returned object has following attributes:
+ *    place:  set element's position
+ *    resize: set element's size
+ *    delete: remove element from DOM tree
+ */
+
+function DRdiv(insideHTML){
+	var el = _DRdiv.init(insideHTML);
+	el.place = _DRdiv.setp;
+	el.resize = _DRdiv.resize;
+	el.delete = function(){this.parentNode.parentNode.removeChild(this.parentNode)};
+	return el;
+}
+
+_DRdiv = function(){
+/*
+var elementsCache = {};
+function $(id) {
+	if (elementsCache[id] === undefined)
+		elementsCache[id] = document.getElementById(id);
+	return elementsCache[id];
+}
+*/
+/*
+ *         BASE CONSTANTS
+ */
+// main div extremal size:
+const minW = 100, minH = 100, maxW = 700, maxH = 400;
+// size of "resize" div
+const resHW = "30px";
+function mkDiv(insideHTML){
+	var L = ["top" , "width" , "left"  , "w", resL];
+	var R = ["top" , "width" , "right" , "e", resR];
+	var U = ["left", "height", "top"   , "n", resU];
+	var D = ["left", "height", "bottom", "s", resD];
+	var borders =[[L, null], [R, null], [U, null], [D, null],
+				  [U, L], [U, R], [D, R], [D, L]];
+	var d = document.createElement("div");
+	d.className = "drag";
+	d.id = "Big";
+	d.onmousedown = ds;
+	var _cursor = "";
+	function setstyle(el, stl){
+		el.style[stl[1]] = resHW;
+		el.style[stl[2]] = "0px";
+		_cursor += stl[3];
+		el.resizefn.push(stl[4]);
+	}
+	var inside = document.createElement("div");
+	inside.id = "indrag";
+	inside.className = "indrag";
+	if(insideHTML) inside.innerHTML = insideHTML;
+	d.appendChild(inside);
+	for(var i = 0; i < 8; i++){
+		var el = document.createElement("div");
+		el.className = "resz";
+		el.resizefn = new Array();
+		setstyle(el, borders[i][0]);
+		var zi = 20;
+		if(borders[i][1]) setstyle(el, borders[i][1]);
+		else{ zi = 19; el.style[borders[i][0][0]] = "0px"; el.resizefn.push(null);}
+		el.style.cursor = _cursor + "-resize";
+		_cursor = "";
+		el.onmousedown = rs;
+		d.appendChild(el);
+	}
+	document.body.appendChild(d);
+	return inside;
+}
+function getPosition(el) {
+	var left = 0, top = 0;
+	while(el){
+		left += el.offsetLeft;
+		top += el.offsetTop;
+		el = el.parentOffset;
+	}
+	return {left: left, top: top};
+}
+function getStyleProp(el, prop){
+	var p = window.getComputedStyle(el, null).getPropertyValue(prop);
+	return parseInt(p);
+}
+function pE(e){
+	if(e.preventDefault) e.preventDefault();
+	if(e.stopPropagation) e.stopPropagation();
+}
+var maxX, maxY, X, Y;;
+var oldmove, oldup;
+var activeEl;
+var moving = false;
+function ds(e){
+	activeEl = this;
+	setProps(e, dro);
+}
+function setProps(e, onmove){
+	pE(e);
+	moving = true;
+	oldmove = window.onmousemove;
+	oldup = window.onmouseup;
+	window.onmousemove = onmove;
+	window.onmouseup = de;
+	var pos = getPosition(activeEl);
+	X = pos.left - e.clientX - getStyleProp(activeEl, "margin-left");
+	Y = pos.top - e.clientY - getStyleProp(activeEl, "margin-top");
+	maxX = window.innerWidth - (activeEl.offsetWidth + getStyleProp(activeEl, "margin-right"));
+	maxY = window.innerHeight - (activeEl.offsetHeight + getStyleProp(activeEl, "margin-bottom"));
+}
+var oW, oH, oX, oY;
+var resizeF;
+function rs(e){
+	activeEl = this.parentElement;
+	setProps(e, res);
+	resizeF = this.resizefn;
+	oX = e.clientX; oY = e.clientY;
+	oW = activeEl.clientWidth;
+	oH = activeEl.clientHeight;
+}
+function dro(e){
+	if(!moving) return true;
+	pE(e);
+	var L = X + e.clientX;
+	var T = Y + e.clientY;
+	if(L < 0) L = 0; if(T < 0) T = 0;
+	if(L > maxX) L = maxX; if(T > maxY) T = maxY;
+	activeEl.style.left = L + "px";
+	activeEl.style.top = T + "px";
+	return false;
+}
+function res(e){
+	if(!moving) return true;
+	pE(e);
+	resizeF[0](e);
+	if(resizeF[1]) resizeF[1](e);
+	return false;
+}
+function resLR(e, Left){
+	var L = X + e.clientX;
+	if(Left && L < 0) L = 0;
+	if(!Left && L > maxX) L = maxX;
+	var dW = (L - X - oX) * ((Left) ? -1 : 1);
+	var nW = oW + dW;
+	if(nW > minW && nW < maxW){
+		activeEl.style.width = nW;
+		if(Left) activeEl.style.left = L + "px";
+	}
+}
+function resL(e){
+	resLR(e, true);
+}
+function resR(e){
+	resLR(e, false);
+}
+function resUD(e, Up){
+	var T = Y + e.clientY;
+	if(Up && T < 0) T = 0;
+	if(!Up && T > maxY) T = maxY;
+	var dH = (T - Y - oY) * ((Up) ? -1 : 1);
+	var nH = oH + dH;
+	if(nH > minH && nH < maxH){
+		activeEl.style.height = nH;
+		if(Up) activeEl.style.top = T + "px";
+	}
+}
+function resU(e){
+	resUD(e, true);
+}
+function resD(e){
+	resUD(e, false);
+}
+function de(e){
+	pE(e); moving = false;
+	resizeF = []; activeEl = null;
+	window.onmousemove = oldmove;
+	window.onmouseup = oldup;
+}
+function placeDiv(left, top){
+	var El = this.parentElement;
+	El.style.left = left + "px";
+	El.style.top = top + "px";
+}
+function resizeDiv(w, h){
+	var El = this.parentElement;
+	El.style.width = w;
+	El.style.height = h;
+}
+return{
+	init:   mkDiv,
+	setp:  placeDiv,
+	resize: resizeDiv
+};
+}();