昨天在做新插件时加入DIV层的拖动效果,开始时试用了好多方法,都有很多的问题,要么就是只支持IE,不支持FF等其它浏览器,要么都支持,但是在FF里这个DIV里面的东西却得不到焦点,也就不用输入和选择等,一点都不方便,直到我找到一个好代码,将里面的东西稍微修改一下,就很好做了.
好东西放到最后,先放出两个我用过的,有些问题的方法,以供大家讨论,哈哈
--------------------------------------------------------------------------------
第一个,测试后发现只支持IE: 使用方法:onmousemove=onMouseMove(DIV_ID);
[CODE=javascript]
var Obj=''
var index=10000;//z-index;
document.onmouseup=onMouseUp
document.onmousemove=onMouseMove
function onMouseDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}
function onMouseMove(){
if(Obj!=''){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
}
}
function onMouseUp(){
if(Obj!=''){
document.all(Obj).releaseCapture();
Obj='';
}
}
function onFocus(obj){
if(obj.style.zIndex!=index) {
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
}
}
function onRemove(){
if (event){
lObj = event.srcElement ;
n=0;
while (lObj && n<2) {
lObj = lObj.parentElement ;
if(lObj.tagName=="DIV") n++;
}
}
var id=lObj.id
document.getElementById(id).removeNode(true);
}
function ShowBox(dname)
{
var buyDiv=document.getElementById(dname+'SelName');
var objDiv=document.getElementById('objText');
var disable=document.getElementById('disableDiv');
if(buyDiv.style.display=='none')
{
buyDiv.style.display='block';
disable.style.display='block';
buyDiv.innerHTML=objDiv.innerHTML;
}else{
buyDiv.style.display='none';
disable.style.display='none';
}
}
[/CODE]
--------------------------------------------------------------------------------
第二个办法:IE和FF下都能拖动,但是在FF下,这个DIV层里的东西不能得到焦点等,相当于是只读的,而且还不能选中内容 :使用办法比较复杂, 将下面代码中的"bfla"改成你要拖动的层的class.
[CODE=javascript]
// Author: Unkonw
// Modify: 枫岩@CnLei.com
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
} ;
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "bfla") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="bfla") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
} ;
[/CODE]
--------------------------------------------------------------------------------
好了,现在亮出最好的办法,经过我的加工,现在有两种拖动效果了,一种是直接拖放到位,另一种是拖放后慢慢移动到位, 两种方式通过一个参数来分别,而且两种方式都有一个很COOL的影子效果(哈哈,加个版权,最近乱转载的现象太严重了,这个博客都是我原创的,心血啊.本文由:巴士飞扬原创,www.busfly.cn),,这个JS函数很好,很强大,这几天等我的插件发布后,大家可以通过使用我的插件来感受一下,顺便也透露一下,这个插件从头部上点击拖动,是第一种效果,直接拖放到位,从底部拖放是第二种效果,很美哦. 哈哈,真的很好很强大的JS函数,顶顶顶.
使用方法:onmousedown=""MyMove.Move('divID',event,0或者1)""
[CODE=javascript]
// onmousedown=""MyMove.Move('divID',event,0或者1)""
// id 要移动的层ID
// Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;
// T 为 int 有数字1是拖动(直接拖放到位), 0是慢慢移动(拖放后慢慢移动到位)
//通用 移动 Div 类
//请保留一下我的信息,谢谢
//Edit By Skybot
//QQ:35287352
function Tong_MoveDiv()
{
//参数说明
// id 要移动的层ID
// Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;
// T 为 int 有数字是拖动 没有是慢慢移动
this.Move=function(Id,Evt,T)
{
if(Id=="") return;
var o = document.getElementById(Id);
if(!o) return;//如果这个东东不在
evt = Evt ? Evt : window.event;
o.style.position = "absolute";//设定他的样式为绝对定位
o.style.zIndex = 200;//这里显示上下的
var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素 使它在FF中也可以用
//得到当前对要移动对象的 坐标
var w = o.offsetWidth;
var h = o.offsetHeight;
var l = o.offsetLeft;
var t = o.offsetTop;
var div = document.createElement("DIV");//新原素DIV
document.body.appendChild(div);
div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px;top:"+t+"px;left:"+l+"px;position:absolute;background:#000";//设定 filter； 注意opacity 是FF中的 Opacity
div.setAttribute("id", Id +"temp");
//拖动
this.Move_OnlyMove(Id,evt,T);
}
//移动函数
//参数 Id 要移动的层ID
//Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;
this.Move_OnlyMove = function(Id,Evt,T)
{
var o = document.getElementById(Id+"temp");
if(!o) return;
evt = Evt?Evt:window.event;//都是FF 才要这么写的
var relLeft = evt.clientX - o.offsetLeft;//得到左边的 宽度
var relTop = evt.clientY - o.offsetTop;//得到上边的 宽度
//抓取 事件
if (!window.captureEvents)
{
o.setCapture(); //指定 抓取 事件
}
else
{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//文档的 onmousemove 事件
document.onmousemove = function(e)
{
if (!o) return;
e = e ? e : window.event;
if (e.clientX - relLeft <= 0)
o.style.left = 0 +"px";
else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)
o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) +"px";
else
o.style.left = e.clientX - relLeft +"px";
if (e.clientY - relTop <= 1)
o.style.top = 1 +"px";
else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)
o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) +"px";
else
o.style.top = e.clientY - relTop +"px";
}
//文档的 onmouseup 事件
document.onmouseup = function()
{
if (!o) return;
if (!window.captureEvents)
o.releaseCapture();
else
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
var o1 = document.getElementById(Id);
if (!o1) return;
var l0 = o.offsetLeft;
var t0 = o.offsetTop;
var l = o1.offsetLeft;
var t = o1.offsetTop;
MyMove.Move_e(Id, l0 , t0, l, t,T);
document.body.removeChild(o);
o = null;
}
}
this.Move_e = function(Id, l0 , t0, l, t,T)
{
if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);
var o = document.getElementById(Id);
if (!o) return;
var sl = st = 8;
var s_l = Math.abs(l0 - l);
var s_t = Math.abs(t0 - t);
if (s_l - s_t > 0)
if (s_t)
sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;
else
sl = 0;
else
if (s_l)
st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;
else
st = 0;
if (l0 - l < 0) sl *= -1;
if (t0 - t < 0) st *= -1;
if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;
if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;
if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;
if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;
if (s_l == 0 && s_t == 0) return;
if(T)
{
o.style.left = l0 +"px";
o.style.top = t0 +"px";
return;
}
else
{
if (Math.abs(l + sl - l0) < 2)
o.style.left = l0 +"px";
else
o.style.left = l + sl +"px";
if (Math.abs(t + st - t0) < 2)
o.style.top = t0 +"px";
else
o.style.top = t + st +"px";
window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +","+T+")", 1);
}
}
}
var MyMove = new Tong_MoveDiv();
[/CODE]
我在这里也把这个很好很强大的JS函数上传上来,大家一起分享下吧.哈哈
很好的DIV移动FF,IE,很好.rar
Tags: javascript
原创文章如转载，请注明：转载自：巴士飞扬-技术BLOG : http://www.busfly.cn/
本文链接地址：http://www.busfly.cn/post/JS-DIV-move-good-busfly-like.html
如果你喜欢本文，请顶一下，支持我，你的支持是我继续发好文章的最大动力。谢谢。
好东西需要分享，快把本文发给你的朋友吧~!~
