////
// ¥°¡¦½¼¥Ð¡¦EÑ¿¡¦
//
// @var zcount Á´¥É¥é¥Ã¥¬¥Ö¡¦EIVÃæ¤Ç¸½ºß¤ÎzindexºÇÁ°ÌÌ
// @var clickElement ¸½ºß¥É¥é¥Ã¥°Ãæ¤ÎDIV¤ÎID̾
// @var canvas document.body ¤ÎDOCTYPEɸ½à¥â¡¼¥ÉÂбþ
// @array dragableFloatId Á´¥É¥é¥Ã¥¬¥Ö¡¦EIV¤ÎID̾¤ò³ÊǼ
//
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
////
// ÀßÄꤵ¡¦E¿Á´¥É¥é¥Ã¥¡¦Ö¥¡¦IV¤ò³«»Ï
//
//
function doDragableFloat()
{
if(!(is.safari || is.khtml))
{
//¥¹¥¯¡¦½¼¡¦E¡¦ÎÆ°º¡¦
window.onscroll = function(e){
startDragableFloat()
}
} else {
aaa=setInterval("startDragableFloat()",100)
}
}
//Á´¥É¥é¥Ã¥¬¥Ö¡¦EIV¤Î¥Õ¡¦½¼¥È¤ò¥¹¥¿¡¼¥È
function startDragableFloat()
{
for(i in dragableFloatId ){
var oj = document.getElementById(dragableFloatId[i]) ;
moveDiv(oj,oj.style.left,oj.style.top);
}
}
//DIV¤òÉ⤫¤¹
function moveDiv (oj,ofx,ofy)
{
if(oj.draging)return ;//¥É¥é¥Ã¥°Ãæ¤Ï̵¡¦E
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"
}
////
//¥Ö¥é¥¦¥¶È½¡¦E
//
// @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
}
////
// ¥É¥é¥Ã¥¬¥Ö¡¦EÕ¥ú½¼¥Ç£IVÀ¸À®
//
// @sample div1 = dragableFloat("aaa",100,200)
//
function dragableFloat(id,x,y)
{
if(!!dragableFloatId[id]) return document.getElementById(id)
////
// DIVÀ¸À®
// @param id DIV¤ÎID̾
//
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 ;
recx1 = x
recy1 = y
div.onmouseout = function (e){
follow(e)
//dbg.innerHTML += getMouseX(e)+"--"+getMouseY(e)+"
"
div.style.zIndex = zcount++
return false
}
div.onmouseover = function (e){ return false }
div.onmousedown = function (e)
{
div.draging = true ;
div.dragcnt ++ ;
selLay=div
clickElement = selLay.id
//DIV¤Îleft,top¤«¤é¥«¡¼¥½¡¦EÌÃ֤ޤǤΥ¡¦Õ¥»¥Ã¥È¤ò¥¥ã¥×¥Á¥¡¦
if (selLay){
selLay.offLeft = getMouseX(e) - getLEFT(selLay.id)
selLay.offTop = getMouseY(e) - getTOP(selLay.id)
}
return false
}
dragableFloatId[div.id] = div.id;//window¤ØÅÐÏ¿
div.index++;
return div;
}
//¥Þ¥¦¥¹°ÜÆ°»þ¤ÎÆ°¡¦E
document.onmousemove = function (e)
{
if(!clickElement) return
selLay=document.getElementById(clickElement);
if(selLay.draging){
recTimeOffset(e) //rec
follow(e)
return false
}
}
//¥Þ¥¦¥¹¥¢¥Ã¥×»þ¤ÎÆ°¡¦E
document.onmouseup = function (e)
{
if(!clickElement) return
selLay=document.getElementById(clickElement);
//¥É¥é¥Ã¥°Ãæ¤Ê¤Î¤Ë¤Ï¤º¡¦EÁ¤ã¤Ã¤¿¾¡¦¡¦
follow(e)
//¥É¥é¥Ã¥°Ãæ»ß
selLay.draging = false ;
selLay.style.zIndex = zcount++
//²èÌÌÆâ¤Î¥ª¥Õ¥»¥Ã¥Èleft,top°ÌÃÖ¤ò¥¥ã¥×¥Á¡¦E
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
}
return false
}
function follow(e)
{
if(!clickElement) return
selLay=document.getElementById(clickElement);
var x = getMouseX(e)
var y = getMouseY(e)
x = (x == -1)? recx2+=recxOffset : x ;
y = (y == -1)? recy2+=recyOffset : y ;
if(selLay.draging){
//¥ª¥Õ¥»¥Ã¥È¤ò°ú¤¤¤ÆÄÉ¡¦E
movetoX = x - selLay.offLeft
movetoY = y - selLay.offTop
selLay.style.left = parseInt(movetoX,10) +"px"
selLay.style.top = parseInt(movetoY,10) +"px"
}
}
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
}
//--¥Þ¥¦¥¹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
}
//--¡¦E¤¥ä¡Ýº¸ÊÖúºÂɸ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):""
}
//--¡¦E¤¥ä¡Ý¾åÊÖûºÂɸ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()
function db1(e)
{
dbg.innerHTML += getMouseX(e)+"-1000-"+getMouseY(e)+"
"
}
return this.mkDiv(id) ;
}
////
// Æ°ºûÏ«»Ï
//
// ¥Ú¡¼¥¸Æɹþ¤ß»þ¤ËÆ°ºûÏ«»Ï
//
window.onload = function ()
{
setDragableFloat() //Àß¡¦E
}
////
// Àß¡¦E
//
// @syntax oj = dragableFloat("DIV¤ÎID̾",½é¡¦EÌÃÕ·,½é¡¦EÌÃÕ¸)
//
// @sample div1 = dragableFloat("aaa",100,200) //À¸À®
// @sample div1.innerHTML="¤¢¤¤¤¦¤¨¤ª" //HTML¤òÁÞÆþ
// @sample div1.style.backgroundColor='orange' //CSS¤Ç½¤¾þ
// @sample doDragableFloat() //³«»Ï
//
function setDragableFloat()
{
//var myX = document.body.clientWidth - 280;
var myX = document.getElementById('noerFlash2').offsetLeft +document.getElementById('noerFlash2').offsetWidth -268;
var myY = document.getElementById('noerFlash2').offsetTop +10;
var viewport = getViewPort();
var myXA = viewport.width -860;
var myXB = myXA/2;
myX = myXB +860 -268;
//¥É¥é¥Ã¥¬¥Ö¡¦EÕ¥ú½¼¥Ç£IV¤òÀ¸À®
div1 = dragableFloat("aaa",myX,myY)
//HTML¤òÁÞÆþ
div1.innerHTML= '' +"\n"
+'
' +"\n"
+'