//=====================================================================
// 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.8.10 ドラッグ時に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
////
// グローバル変数
//
// @var zcount 全ドラッガブルDIV中で現在のzindex最前面
// @var clickElement 現在ドラッグ中のDIVのID名
// @var canvas document.body のDOCTYPE標準モード対応
// @array dragableFloatId 全ドラッガブルDIVの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
////
// 設定された全ドラッガブルDIVを開始
//
//
function doDragableFloat()
{
if(!(is.safari || is.khtml))
{
//スクロール時の動作
window.onscroll = function(e){
startDragableFloat()
}
} else {
aaa=setInterval("startDragableFloat()",100)
}
}
//全ドラッガブルDIVのフロートをスタート
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 ;//ドラッグ中は無視
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 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からカーソル位置までのオフセットをキャプチャ
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;
}
//マウス移動時の動作
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
}
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){
//オフセットを引いて追随
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
}
//--レイヤ－左辺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()
function db1(e)
{
dbg.innerHTML += getMouseX(e)+"-1000-"+getMouseY(e)+"
"
}
return this.mkDiv(id) ;
}
//---追加
function getBrowserWidth(){
if(window.innerWidth){return window.innerWidth;}
else if(document.documentElement && document.documentElement.clientWidth !=0){return document.documentElement.clientWidth;}
else if(document.body){return document.body.clientWidth;}
return 0;
}