//=====================================================================
// SYSTEM : DragableFloat DIV
// PROGRAM : É¥Ã¥Ç¤Æ¡í¡¼Ë¤Ï²Ì¤Î¸Ö¤ß¤DIV
// FILE NAME : jsgt_dragfloat.js
// CALL FROM : HTML
// AUTHER : Toshirou Takahashi http://jsgt.org/mt/01/
// SUPPORT URL : http://jsgt.org/mt/archives/01/000419.html
// CREATE : 2005.7.8
// UPDATE : 2005.11.20 v08 쥯ȤǤʤʤΤdocument.onmousemovereturn false򥳥ȥ
// UPDATE : 2005.9.26 v07 floatEnabled boundEnabled setBounds chkBoundsɲ
// UPDATE : 2005.9.22 v06 getTOP getLEFT getMouseX getMouseYdivΥץѥƥ
// UPDATE : 2005.8.12 v05ɥåieȯselectonselectstartǥ󥻥
// UPDATE : 2005.8.10 v04ɥåiframeǥ٥Ȥ򽦤ʤΤ¿ޤ
// UPDATE : 2005.8.8 dbg_echo()ɲ
// UPDATE : 2005.8.8 body̵ѥߡbodyϤɲá
// UPDATE : 2005.7.8 DOCTYPE ɸ⡼ɤб
// http://otd8.jbbs.livedoor.jp/877597/bbs_tree?base=9322&range=1
//
//
// ΥϲѤ⾦Ѥ⼫ͳǤ
// μͳ뤿ޤ
//---------------------------------------------------------------------
// ⶶлϯ (Toshirou Takahashi http://jsgt.org/mt/01/) 2005.7.8
/*
//=====================================================================
// ʲ ץ
<-- 饤֥ jsgt_dragfloat.js-->
// ץ뤳ޤ
//=====================================================================
*/
////
// í¡¼Ð¥Ñ¿
//
// @var zcount ɥå֥DIVǸߤzindex
// @var clickElement ߥɥåDIVID̾
// @var canvas document.body DOCTYPEɸ⡼б
// @array dragableFloatId ɥå֥DIVID̾Ǽ
//
var zcount = 0 ;
var clickElement = "" ;
if(document.getElementsByTagName('BODY').length==0)document.write(''); //ß¡body
var canvas = document[ 'CSS1Compat' == document.compatMode ? 'documentElement' : 'body'];
var dragableFloatId=[];
var recx1,recy1,recx2,recy2,recxOffset,recyOffset;
////
// ꤵ줿ɥå֥DIV򳫻
//
//
function doDragableFloat(){
for(i in dragableFloatId){
var oj = document.getElementById(dragableFloatId[i]);
//alert("dragableFloatId[i] = "+dragableFloatId[i]);
if(oj.floatEnabled){
if(!(is.safari || is.khtml)){
//í¡¼Æ°
window.onscroll = function(e){
moveDiv(oj,oj.style.left,oj.style.top);
}
}else{
aaa=setInterval(function(){
moveDiv(oj,oj.style.left,oj.style.top);
},100)
}
}
}
}
//ɥå֥DIVÎ¥Õ¥í¡¼È¤ò¥¹¥
function startDragableFloat(){
for(i in dragableFloat ){
var oj = document.getElementById(dragableFloat[i].id);
moveDiv(oj,oj.style.left,oj.style.top);
}
}
//DIV⤫
function moveDiv (oj,ofx,ofy){
if(oj.draging)return; //ɥå̵
if(oj.dragcnt == 0 ){
ofx = parseInt(ofx,10);
ofy = parseInt(ofx,10);
oj.dragcnt++;
}else{ //ɥåλ֤եå
ofx = parseInt(oj.pageOffLeft,10);
ofy = parseInt(oj.pageOffTop,10);
}
var l = parseInt(canvas.scrollLeft,10);
var t = parseInt(canvas.scrollTop,10);
oj.style.left = l + ofx+"px";
oj.style.top = t + ofy+"px";
}
////
//֥饦Ƚ
//
// @sample alert(is.ie)
//
var is =
{
ie : !!document.all ,
mac45 : navigator.userAgent.indexOf('MSIE 4.5; Mac_PowerPC') != -1 ,
opera : !!window.opera ,
safari : navigator.userAgent.indexOf('Safari') != -1 ,
khtml : navigator.userAgent.indexOf('Konqueror') != -1
}
////
// É¥Ã¥Ö¥Õ¥í¡¼DIV
//
// @sample div1 = dragableFloat("aaa",100,200)
//
function dragableFloat(id,x,y){
if(!!dragableFloatId[id]) return document.getElementById(id);
////
// DIV
// @param id DIVID̾
//
this.mkDiv = function (id){
var canvas = document[ 'CSS1Compat' == document.compatMode ? 'documentElement' : 'body'];
var doc = document ; // documentÖ¥
var body = doc.body ;
var elem = doc.createElement("DIV") ; //DIVǤ
var div = body.appendChild(elem);
div.setAttribute("id",id) ;
div.style.position = "absolute" ;
div.style.left = x + "px" ;
div.style.top = y + "px" ;
div.innerHTML = "" ;
div.offLeft = 0 ;
div.offTop = 0 ;
div.pageOffLeft = x-parseInt(canvas.scrollLeft,10)+ "px";
div.pageOffTop = y-parseInt(canvas.scrollTop,10) + "px";
div.dragcnt = 0 ;
div.draging = false ;
div.getTOP = getTOP ;
div.getLEFT = getLEFT ;
div.getMouseX = getMouseX ;
div.getMouseY = getMouseY ;
recx1 = x
recy1 = y
div.floatEnabled = true ; //Õ¥í¡¼È²Ç½ true|false
div.boundEnabled = false ; //ưǽΰ褢 true|false
div.setBounds = function (a,b,c,d){
div.minX=a;div.minY=b;div.maxX=c;div.maxY=d;
div.boundEnabled = true;
}
div.onmouseout = function (e){
if(!clickElement) return;
selLay=document.getElementById(clickElement);
//xy顼xyå
x = recx2+=recxOffset;
y = recy2+=recyOffset;
dofollow(x,y);
x = recx2+=recxOffset;
y = recy2+=recyOffset;
setTimeout('"dofollow('+x+','+y+')"',10);
//follow(e);
//dbg.innerHTML += getMouseX(e)+"--"+getMouseY(e)+"
";
div.style.zIndex = zcount++;
return false;
}
div.onselectstart = function (e){ return false; }
div.onmouseover = function (e){ return false; }
div.onmousedown = function (e){
div.draging = true;
div.dragcnt++;
selLay = div;
clickElement = selLay.id;
//DIVleft,top饫֤ޤǤΥեåȤò¥¥×¥
if (selLay){
selLay.offLeft = getMouseX(e) - getLEFT(selLay.id);
selLay.offTop = getMouseY(e) - getTOP(selLay.id);
}
return false;
}
dragableFloatId[div.id] = div.id; //windowϿ
//alert("dragableFloatId[div.id] = "dragableFloatId[div.id]);
div.index++;
return div;
}
//ޥưư
document.onmousemove = function (e){
recTimeOffset(e); //rec
follow(e);
//return false;
}
//ޥå׻ư
document.onmouseup = function (e){
if(!clickElement) return;
selLay=document.getElementById(clickElement);
//ɥåʤΤˤϤä
follow(e);
//ɥå
selLay.draging = false;
selLay.style.zIndex = zcount++;
//Υեåleft,topÖ¤ò¥¥×¥
if(selLay){
var sl = parseInt(canvas.scrollLeft,10);
var st = parseInt(canvas.scrollTop,10);
selLay.pageOffLeft = getLEFT(selLay.id)-sl;
selLay.pageOffTop = getTOP(selLay.id)-st;
// ߤäɲʬ20090106
mySetCookie(clickElement,selLay.pageOffLeft + "\t" + selLay.pageOffTop,1);
// ߤäɲʬ20090106
}
return false;
}
//ɥåԻ
function follow(e){
if(!clickElement) return;
selLay=document.getElementById(clickElement);
//Þ¥Ö¼
var x = getMouseX(e);
var y = getMouseY(e);
//xy顼xyå
x = (x == -1)? recx2+=recxOffset : x ;
y = (y == -1)? recy2+=recyOffset : y ;
if(x == -1 && y == -1)setTimeout('follow('+e+')',100);
dofollow(x,y);
}
//Þ¥
function dofollow(x,y){
if(!clickElement) return;
selLay=document.getElementById(clickElement);
if(!chkBounds(selLay)){
return;
}else{
if(selLay.draging){
//եåȤɿ
movetoX = x - selLay.offLeft;
movetoY = y - selLay.offTop;
selLay.style.left = parseInt(movetoX,10) +"px";
selLay.style.top = parseInt(movetoY,10) +"px";
}
}
// window.status = selLay.style.left;
}
//ޥ֤Ͽ
function recTimeOffset(e){
if(x == -1 || y == -1)return ;
recx2= recx1;
recy2= recy1;
recx1= getMouseX(e);
recy1= getMouseY(e);
recxOffset= recx1 - recx2;
recyOffset= recy1 - recy2;
}
//ΰ⤫ɤå
function chkBounds(oj){
var layName = oj.id;
if(oj.boundEnabled){
//ּ߰
var nowX = getLEFT(layName);
var nowY = getTOP(layName);
//Ã¥
if(
nowX >= oj.minX &&
nowY >= oj.minY &&
nowX <= oj.maxX &&
nowY <= oj.maxY
){
return true; //ΰʤtrue
}else{
returnPOS(nowX,nowY,oj);
return false;
}
}else{
return true;
}
}
//ΰ᤹
function returnPOS(nowX,nowY,oj){
if(nowX < oj.minX) oj.style.left = oj.minX +"px";
if(nowY < oj.minY) oj.style.top = oj.minY +"px";
if(nowX > oj.maxX) oj.style.left = oj.maxX +"px";
if(nowY > oj.maxY) oj.style.top = oj.maxY +"px";
}
//ޥXɸget
function getMouseX(e){
if(document.all) //e4,e5,e6
return canvas.scrollLeft+event.clientX
else if(document.getElementById) //n6,n7,m1,o7,s1
return e.pageX;
}
//ޥYɸget
function getMouseY(e){
if(document.all) //e4,e5,e6
return canvas.scrollTop+event.clientY
else if(document.getElementById) //n6,n7,m1,o7,s1
return e.pageY;
}
//쥤ݺXɸget
function getLEFT(layName){
//ǥХå
//document.getElementById('aaa').innerHTML+=layName+'
';
if(document.all) //e4,e5,e6,o6,o7
return document.all(layName).style.pixelLeft
else if(document.getElementById) //n6,n7,m1,s1
return (document.getElementById(layName).style.left!="")
?parseInt(document.getElementById(layName).style.left):"";
}
//쥤ݾYɸget
function getTOP(layName){
if(document.all) //e4,e5,e6,o6,o7
return document.all(layName).style.pixelTop
else if(document.getElementById) //n6,n7,m1,s1
return (document.getElementById(layName).style.top!="")
?parseInt(document.getElementById(layName).style.top):"";
}
//ǥХå
function dbg_echo(){
////////dbg.innerHTML += selLay.draging+"
";
var debugDIV = document.createElement("DIV"); //DIVǤ
var dbg = document.body.appendChild(debugDIV);
dbg.setAttribute("id","dbg");
dbg.style.position = "absolute";
dbg.style.left = "400px";
dbg.style.top = "0px";
dbg.innerHTML = "dbg";
return dbg;
} //dbg = dbg_echo();
// ߤäɲʬ20090106
/* åϿѴؿ */
/* : mySetCookie(å̾,,Í) */
/* : ʤ(void) */
function mySetCookie(myCookie,myValue,myDay){
myExp = new Date();
myExp.setTime(myExp.getTime()+(myDay*24*60*60*1000));
myItem = "@" + myCookie + "=" + escape(myValue) + ";";
myExpires = "expires="+myExp.toGMTString();
document.cookie = myItem + myExpires;
}
// ߤäɲʬ20090106
function db1(e){
dbg.innerHTML += getMouseX(e)+"-1000-"+getMouseY(e)+"
";
}
return this.mkDiv(id);
}
// ߤäɲʬ20090106
/* åѴؿ */
/* : myGetCookie(å̾) */
/* : (string) null:ʤ */
function myGetCookie(myCookie){
myCookie = "@" + myCookie + "=";
myValue = null;
myStr = document.cookie + ";" ;
myOfst = myStr.indexOf(myCookie);
if (myOfst != -1){
myStart = myOfst + myCookie.length;
myEnd = myStr.indexOf(";" , myStart);
myValue = unescape(myStr.substring(myStart,myEnd));
}
return myValue;
}
// ߤäɲʬ20090106