拖动层

最新推荐文章于 2018-03-26 12:42:56 发布
最新推荐文章于 2018-03-26 12:42:56 发布
阅读量409 收藏
点赞数
文章标签： function xhtml javascript html border table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
/*
*className Xdrag
@param obj 被拖动的dom节点
@param box obj被拖动的范围默认为document.body
*/
function Xdrag(obj,box){
    var mask=0;//设置监听是否鼠标按下
        obj.style.position="absolute";
        var Ow=obj.offsetWidth;//获取拖动对象的宽高
        var Oh=obj.offsetHeight;
        if(!box){
                box=document.body;
        }
    var Bw=box.offsetWidth;//获取拖动容器的宽高
    var Bh=box.offsetHeight;
        obj.style.position="absolute";
        obj.οnmοusedοwn=function(e){
                var e=e||window.event;
                this.onselectstart=function(){return false;}
                var eSrc=e.srcElement||e.target;
                mask=1;
                XCapture(obj,"start");
        Ex=XmouseCoords(e).x-XgetPosition(obj).x;
                Ey=XmouseCoords(e).y-XgetPosition(obj).y;
        }
        document.οnmοusemοve=function(e){
            var e=e||window.event;
                if(mask==1){
                  var Ox=XmouseCoords(e).x-Ex;
                  var Oy=XmouseCoords(e).y-Ey;
                  if(box){
                        var Bx=XgetPosition(box).x;
                        var By=XgetPosition(box).y;
                        if(Ox<Bx){
                                Ox=Bx;
                        }
                        else if(Ox>Bx+Bw-Ow){
                                Ox=Bx+Bw+-Ow;
                        }
                        if(Oy<By){
                                Oy=By;
                        }
                        else if(Oy>By+Bh-Oh){
                            Oy=By+Bh-Oh;
                       
                        }
                  }
                 obj.style.left=Ox+"px";
                 obj.style.top=Oy+"px";
                }
        }
        obj.omouseup==function(e){
                maks=0;
                XCapture(obj,"end");
       
        }
        document.body.οnmοuseup=function(){
                mask=0;
                XCapture(obj,"end");
        }
}
/*获取鼠标位置*/
function XmouseCoords(ev){
        if(ev.pageX || ev.pageY){
                return {x:ev.pageX, y:ev.pageY};
        }
        return {
                x:ev.clientX + document.documentElement.scrollLeft,
                y:ev.clientY + document.documentElement.scrollTop
        };
}
/*设置事件捕获
*function  XCapture
@param o, 捕获事件的对象
@param mak，状态 "start" or "end"
*/
function XCapture(o,mak){
    if(mak=="start"){
          if(o.setCapture){o.setCapture();}
          else if(window.captureEvents)
                         {window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}
        }
        if(mak=="end"){
          if(o.releaseCapture){o.releaseCapture();}
          else if(window.captureEvents)
                        {window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}
         }
       
}
/*获取指定节点的坐标*/
function XgetPosition(e){
        var left = 0;
        var top  = 0;
        while(e.offsetParent){
                left += e.offsetLeft;
                top  += e.offsetTop;
                e= e.offsetParent;
        }
        left += e.offsetLeft;
        top  += e.offsetTop;
        return {x:left, y:top};
}
</script>
</head>
<body οnlοad="Xdrag(mm,kk);"><table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="15" width="700" bgcolor="#0099CC" id="kk"><img id="mm" src="2.png"  /></td>
  </tr>
</table>
</body>
</html>

wzj_119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS可拖动层
11-23
JS可拖动层 javascript可拖动层
拖拽(拖动)层
rx78zlm的专栏
07-24 512
此文也可以命名为好的拖动层必须做的几个细节在一个拖拽系统中,做出来容易细节,细节却并不尽如人意..拖拽中没有一个完美(或者说比较完美)的解决方案,原因在于:我们所知道拖拽的实现的方法(cross-browser)是有三个事件的:onmousedown,onmousemove,onmouseup,即onmousedown来捕获,onmousemove拖拽,onmouseup释放事件.这在一般
鼠标拖动层的JS方法
07-06 368
Javascript 如何实现对象的拖动？ 解决思路      这个效果并不算常见，通常用于游戏或个人站点中。因为拖曳是靠鼠标来操作的，所以对鼠标的位置的捕获是问题的重点，然后才是根据鼠标的位置设置层的位置。 具体步骤： 1.在对象(层)上按下鼠标时，先捕获到需要拖曳的对象，然后获取或设置该对象的相关属性。 obj=event.srcElement obj.setCapture() z=o
简单拖拽层
雨轩伊族
07-26 134
[code="html"] 拖拽层 Move 移动的试试 [/code] drag.js文件 [code="js"] var loginDIV = document.getElementById("loginDIV"); var loginTopDIV = document.getElementById("...
可拖动DIV层
MyBlog
06-20 707
定义好DIV后，只要把DIV的ID传进去就能实现拖动效果： var oBox=document.getElementById("divID"); //拖动层
javascript实现漂亮的拖动层，窗口拖拽特效
10-24
一个可关闭、可随意拖动位置的网页弹出层代码，美化的相当漂亮，简洁实用，还可拖动改变大小，通过八个方向改变大小，学习这类特效编写的网页设计者可参阅一下
jQuery实现的简单拖动层示例
10-20
主要介绍了jQuery实现的简单拖动层,可实现响应鼠标拖动div层及动态显示坐标值的功能,涉及jQuery鼠标响应及页面元素属性相关操作技巧,需要的朋友可以参考下
jQuery 拖动层(在可视区域范围内)
10-28
获取层元素，在浏览器可视区域的最左、最边，最上、最下的值。并且在拖动层的过程中，把当前层的坐标值，去和这几个值，做比较，如果超过这些值。那么就不能再拖动这个方向，即把值设为最小或最大
利用javascript移动div层-javascript 拖动层
10-30
利用javascript开发在界面上随意拖动以下html code中的div层
可拖拽层
greatzheng的专栏
07-31 598
转自http://bbs.blueidea.com/thread-2738273-1-1.html body {margin:0px;padding:0px;font-size:12px;text-align:center;}body > div {text-align:center; margin-right:auto; margin-left:auto;} .content{width:9
JS特效——层的拖动
mini_yangmi的博客
03-26 222
用到的JavaScript知识：event.clientX, event.clientY。用到了三个事件：onmousedown，onmousemove，onmouseup。源码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;可以拖动的层&lt;/title&gt; &lt;meta charset="utf-8"..
完整的简单层拖动代码
asp、.net专栏
05-30 728
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">HTML>HEAD>TITLE> how to make a drag division - a href="http://www.never-online.net" target="_blank">a href="http://www.never-online.net" t
鼠标拖动层， W3C标准，兼容IE6 & Firefox
记事本
09-11 2366
经历了好一段的调试，终于调出了兼容IE、Firefox的鼠标拖动层。源码附上。html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>Binny.cntitle>script> var obj=0; var x=0; var y=0; var ie = (navigator.a
Js拖动层
字串8的专栏
01-08 450
JS拖动层 层的标题 层的内容 var posX; var posY; fdiv = document.getElementById("f"); document.getElementById("title").onmousedown=function(e) { if(!e) e = window.event; //IE posX =
js层拖动
tgyd2006的专栏
09-16 117
&lt;script&gt; var x,y,z,down=false,obj    function init(){ obj=event.srcElement      //事件触发对象 obj.setCapture()             //设置属于当前对象的鼠标捕捉 z=obj.style.zIndex           //获取对象的z轴坐标值 //设置对象的z轴坐标值为100，确...
拖动层效果
代码将军
11-30 539
很多网站都有这样一个功能，比如51job，它用的就是和这样差不多，当你点击一个事件时 它会弹出一个层，而这个层是可以拖动的，代码如下：html>head>style type="text/css">...body {...}{    margin: 0px;}#div1 {...}{    display: block;    position: absolute;    z-index:
简单拖动层
dianjiangdian1813的博客
06-28 81
View Code <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>drag div demo</title&gt...
超级简单拖动层
康董--致力于JavaScript
04-25 881
嘿嘿，这个层简单点，就是觉得用的事件太多了，三个事件啊老大，为一个拖动值吗？ 不过本人觉得很适合初学者，注释写得更详细了，而且当你拖动的时候页面会即时显示鼠标在窗口的xy点和在层上的xy点，很容易理解望高手批阅，谢谢 康董--我也写个拖动层！var x=null;var y=null;var KangTao=0; function Tao_Div(e)
树层结构表如何用java实现拖动排序
最新发布
03-09
可以使用Java中的树形结构类(TreeModel)来实现树层结构表的拖动排序。具体实现方法是，通过实现TreeModel中的方法，包括getChild、getChildCount、getParent、isLeaf、getIndexOfChild、valueForPathChanged、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值