javascript之DIV拖动类 支持在FF下拖动,调用简单

调用方法
onmousedown="MyMove.Move('InfoKuang',event,1)"
想问的问题是:如何当我拖到一个指定的地方时 层自动吸到指定地方.
相当于拖拽布局

Div Move Temp

#InfoKuang {
position:absolute;
width:130px;
height:85px;
z-index:1;
filter:alpha(Opacity=60,style=0);
opacity:0.6;
padding: 3px;
border: 1px dashed #000000;
z-index:5000;
bottom:31px;
font-size:9pt;

}
#InfoKuang ul {
margin: 1px;
padding: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
color: #000000;
background-color:#0faead;
}
#InfoKuang li {
height:24px;
padding: 1px;
line-height: 24px;
}

点我调用 拖动窗口

  • 显示窗口
  • 最大化窗口

//通用 移动 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");

if(T)//看看是拖动还是 变大小
{
this.Move_OnlyMove(Id,evt);
}
else
{

}
}

//移动函数
//参数 Id 要移动的层ID
//Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;
this.Move_OnlyMove = function(Id,Evt)
{
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 = 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 = 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);
document.body.removeChild(o);
o = null;
}
}

this.Move_e = function(Id, l0 , t0, l, 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 ? 2 : -2;
if (Math.abs(t + st - t0) 0 ? 2 : -2;
if (Math.abs(l + sl - l0) 0 ? 1 : -1;
if (Math.abs(t + st - t0) 0 ? 1 : -1;
if (s_l == 0 && s_t == 0) return;
if (Math.abs(l + sl - l0)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • Javascript实现的类似Google的Div拖动效果代码

    复制代码 代码如下: JScript 文件: //检测浏览器 MSIE Firefox var ie=false,moz=false; (function() {//check the browser var userAgent=navigator.userAgent; if(userAgent.indexOf("MSIE")!=-1) ie=true; else if(userAgent.indexOf("Firefox")!=-1) moz=true; })()

  • javascript实现拖动元素交换位置

    本文实例讲述了javascript实现拖动元素交换位置的代码.分享给大家供大家参考.具体如下: 实现目标:可拖动元素拖动到另外一个元素位置的时候,互相交换位置. 启发来源:最初形式是网上看到的一个拼图小游戏. 运行效果截图如下: 具体代码如下: 代码: body,ul,li{margin:0;padding:0;} ul{list-style: none;} body{font:13px/1.5 Tahoma;} #box{position:relative;width:435px;height

  • 比较精简的Javascript拖动效果函数代码

    拖动效果函数演示 by Longbill.cn body { font-size:12px; color:#333333; border : 0px solid blue; } div { position : absolute; background-color : #c3d9ff; margin : 0px; padding : 5px; border : 0px; width : 100px; height:100px; } function drag(o,s) { if (typeof

  • JavaScript简单实现鼠标拖动选择功能

    复制代码 代码如下: <style><!--body{padding-top:50px;padding-left:100px;padding-right:150px;}  .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;margin-bottom:10px;} 

  • javascript之可拖动的iframe效果代码

    // HISTORY// ------------------------------------------------------------------// Jan 23, 2004: Fixed problems which caused the script not to work in//               some framed situations. Improved browser support.//               Added easier "addH

  • Javascript简单实现可拖动的div

    复制代码 代码如下: <html> <head> <script type="text/javascript"> var x; var y; function $(id) { return document.getElementById(id) } function mousedown() { x=event.clientX-$("px").style.pixelLeft; y=event.clientY-$("px&q

  • html+javascript实现可拖动可提交的弹出层对话框效果

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JAVASCRI

  • javascript之DIV拖动类 支持在FF下拖动,调用简单

    调用方法 onmousedown="MyMove.Move('InfoKuang',event,1)" 想问的问题是:如何当我拖到一个指定的地方时 层自动吸到指定地方. 相当于拖拽布局 Div Move Temp #InfoKuang { position:absolute; width:130px; height:85px; z-index:1; filter:alpha(Opacity=60,style=0); opacity:0.6; padding: 3px; border:

  • 利用javascript移动div层-javascript 拖动层

    利用javascript移动div层-javascript 拖动层: 程序功能:利用javascript开发在界面上随意拖动以下html code中的div层. javascript移动div层-javascript 拖动层代码-html code: 复制代码 代码如下: <div id="div_Info" style="display: none; dz-index: 101; left: 175px; width: 650px; position: absolut

  • JavaScript实现DIV层拖动及动态增加新层的方法

    本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法.分享给大家供大家参考.具体分析如下: 无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动层代码很流行,GG和YAHOO等大网站经常可以看到这种效果. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

  • JS实现的自定义网页拖动类

    本文实例讲述了JS实现的自定义网页拖动类.分享给大家供大家参考,具体如下: 先来看运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-zdy-web-drug-pic-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

  • JS中Select下拉列表类(支持输入模糊查询)功能

    下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: <span style="font-size:14px;"> <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>可输入的下拉框</TITLE> </HEAD> <BODY

  • Javascript使用function创建类的两种方法(推荐)

    1.使用function类 //myFunction.js var CMyFunc=function() { //类的公共方法,供外部调用 this.Func1=function() { var i=0; return i; } this.Func2=function() { _privateFunc(); } //类中的私有方法,供公共方法调用 function _privateFunc() { return 0; ] } CMyFunc myFunc=new CMyFunc(); 使用:其它

  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

  • javascript控制Div层透明属性由浅变深由深变浅逐渐显示

    搬运的留着以后自己看! 复制下面蓝色的代码保存为html格式的文件,使用网页浏览器浏览效果 代码支持IE6.7.8/firefox/Chrome浏览器 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • javaScript手机号码校验工具类PhoneUtils详解

    本文实例为大家分享了javaScript手机号码校验工具类PhoneUtils的具体代码,供大家参考,具体内容如下 //PhoneUtils命名空间 PhoneUtils = { phoneRegexs: { //中国电信号码段 CHINA_TELECOM_PATTERN: /^(?:\+86)?1(?:33|53|7[37]|8[019])\d{8}$|^(?:\+86)?1700\d{7}$/, //中国联通号码段 CHINA_UNICOM_PATTERN: /^(?:\+86)?1(?:3

  • 基于javascript的拖拽类封装详解

    效果图如下 github地址如下: github地址 使用方法 引入js和对应的css import Drag from '../../static/dragger.js' import './assets/css/dragger.css' 之后,实例化 new Drag({ id: 'box-dragger', showAngle: true, isScale: false, showBorder: false }) new Drag({ id: 'box-dragger2', canZoom

随机推荐