//=====================================================================
// 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.onmousemoveのreturn falseをコメントアウト
// UPDATE : 2005.9.26 v07 floatEnabled boundEnabled setBounds chkBounds追加
// UPDATE : 2005.9.22 v06 getTOP getLEFT getMouseX getMouseYをdivのプロパティ化
// UPDATE : 2005.8.12 v05ドラッグ時にieで発生するselectをonselectstartでキャンセル
// 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
// UPDATE : 2009.6.30 (株)フューチャーイン
// ドラッガブルフロートdivを「生成」から「既存div利用」に変更
// safari用コードを修正 等
//
// このソースは改変も商用利用も自由ですが、
// その自由を護るために著作権は放棄しません。
//---------------------------------------------------------------------
// 高橋登史朗 (Toshirou Takahashi http://jsgt.org/mt/01/) 2005.7.8
/*
//=====================================================================
// 以下 サンプル
<-- ライブラリ jsgt_dragfloat.js-->
// サンプルここまで
//=====================================================================
*/
////
// グローバル変数
//
// @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()
{
for(i in dragableFloatId){
var oj = document.getElementById(dragableFloatId[i]) ;
if(oj.floatEnabled){
//2009/06/30-----------------
//if(!(is.safari || is.khtml))
//{
//2009/06/30-----------------
//スクロール時の動作
window.onscroll = function(e){
moveDiv(oj,oj.style.left,oj.style.top);
}
//2009/06/30-----------------
//} else {
// aaa=setInterval(function(){
// moveDiv(oj,oj.style.left,oj.style.top);
// },3000)
//}
//2009/06/30-----------------
}
}
}
//全ドラッガブル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(ofy,10)
oj.dragcnt++
} else {//ドラッグ終了位置がオフセット
ofx = parseInt(oj.pageOffLeft,10)
ofy = parseInt(oj.pageOffTop,10)
}
//2009/06/30 -----------------------
//var l = parseInt(canvas.scrollLeft,10)
//var t = parseInt(canvas.scrollTop,10)
var l = parseInt(scrlLeft(),10)
var t = parseInt(scrlTOP(),10)
//2009/06/30 -----------------------
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)
{
// 2009/06/30[start]----------------------------------------------------
//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);
var div = document.getElementById(id);
// 2009/06/30[ end ]----------------------------------------------------
div.setAttribute("id",id) ;
div.style.position = "absolute" ;
div.style.left = x + "px" ;
div.style.top = y + "px" ;
// 2009/06/30[start]------------------------------------------------
div.style.visibility = "visible" ;
//div.innerHTML = "" ;
// 2009/06/30[ end ]------------------------------------------------
div.offLeft = 0 ;
div.offTop = 0 ;
// 2009/06/30[start]------------------------------------------------
// div.pageOffLeft = x-parseInt(canvas.scrollLeft,10)+ "px";
// div.pageOffTop = y-parseInt(canvas.scrollTop,10) + "px";
div.pageOffLeft = x-parseInt(scrlLeft(),10)+ "px";
div.pageOffTop = y-parseInt(scrlTOP(),10) + "px";
// 2009/06/30[ end ]------------------------------------------------
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
//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){
//2009/06/30
//var sl = parseInt(canvas.scrollLeft,10)
//var st = parseInt(canvas.scrollTop,10)
var sl = parseInt(scrlLeft(),10)
var st = parseInt(scrlTOP(),10)
//2009/06/30
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)
//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用
//2009/06/30
//return canvas.scrollLeft+event.clientX
return scrlLeft()+event.clientX
//2009/06/30
}else{ if(document.getElementById) //n6,n7,m1,o7,s1用
return e.pageX
}
}
//マウスY座標get
function getMouseY(e)
{
if(document.all){ //e4,e5,e6用
//2009/06/30
//return canvas.scrollTop+event.clientY
return scrlTOP()+event.clientY
//2009/06/30
}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) ;
}
//=====================================================================
// (株)フューチャーイン 追加プログラム
// ADD : 2009.06.30
//=====================================================================
//グローバル変数
//[HTMLにあわせて編集可]-----------------------------------------------
var div1name = "button_scroll"; //動く資料請求ボタンdivのid名
var con_name = "wrapper"; //コンテンツの幅を決定するdiv名
var div_top = 115; //動く資料請求ボタンdivのトップからのpx数
//[HTMLにあわせて編集可]----ここまで------------------------------------
////ページ読込み時に動作開始
window.onload = function (){
//ページのトップを表示
window.scrollTo(0,0);
setDragableFloat() //設定
}
////ドラッガブルフロートDIVを設定
function setDragableFloat(){
//ドラッガブルフロートDIVを生成
div1 = dragableFloat(div1name,calcDivLeft(),div_top); //div名,左位置,上位置
//開始
doDragableFloat();
}
////動く資料請求ボタンdivの左位置を計算
function calcDivLeft(){
var div_left;
//コンテンツ全体の横幅を取得
var con = document.getElementById(con_name);
var con_style = con.currentStyle || document.defaultView.getComputedStyle(con, '');
var c_width = con_style.width.replace("px","");
//divの横幅を取得
var d1 = document.getElementById(div1name);
var d1_style = d1.currentStyle || document.defaultView.getComputedStyle(d1, '');
var d_width = d1_style.width.replace("px","");
//ウインドウの横幅を取得
var w_width = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
if(!w_width) w_width = 800;
//左位置計算（「23」は右からの余白分）
if(w_width - c_width <= 0){
div_left = w_width - d_width - 7;
}else{
div_left = c_width - d_width - 7 + (w_width - c_width)/2;
}
return div_left;
}
////ウインドウリサイズ時の処理
window.onresize=function(){
//ボタンがクリック後だったら何もしない
if(clickElement) return
//リサイズ幅に合わせて移動
var oj = document.getElementById(div1name) ;
var div_left = calcDivLeft();
oj.pageOffLeft = div_left + "px";
oj.style.left = div_left + "px";
}
////divをクローズする
function closeFloat(div_name){
document.getElementById(div_name).style.display = "none";
return
}
////スクロール量を取得する
function scrlLeft(){
return document.body.scrollLeft || document.documentElement.scrollLeft;
}
function scrlTOP(){
return document.body.scrollTop || document.documentElement.scrollTop;
}