文档章节

模块拖动 鼠标位置,对象位置(实录五)

own1991
 own1991
发布于 2017/07/26 17:27
字数 769
阅读 13
收藏 0

拖拽--Clone http://www.fgm.cc/learn/lesson8/02.html

<!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=utf-8" />
    <title>拖拽--Clone</title>
    <style type="text/css">
    body,
    div {
        margin: 0;
        padding: 0;
    }
    
    body {
        background: #3e3e3e;
    }
    
    div {
        position: absolute;
        width: 100px;
        height: 100px;
        cursor: move;
        /*border: 1px solid #888;*/
        background: #fff;
    }
    
    #drag1 {
        top: 100px;
        left: 100px;
    }
    
    #drag2 {
        top: 100px;
        left: 300px;
    }
    
    #temp {
        opacity: 1;
        filter: alpha(opacity=30);
    }
    </style>
    <script type="text/javascript">
    var zIndex = 1;
    window.onload = function() {
        var oDrag1 = document.getElementById("drag1");
        var oDrag2 = document.getElementById("drag2");
        drag(oDrag1);
        drag(oDrag2);
    };

    function drag(oDrag) {
        var disX = dixY = 0;
        oDrag.onmousedown = function(event) {
            //浏览器兼容
            var event = event || window.event;
            //鼠标指针位置-对象偏移位置120px不拖定;
            disX = event.clientX - this.offsetLeft;
            disY = event.clientY - this.offsetTop;

            var oTemp = document.createElement("div");
            oTemp["id"] = "temp";
            //getComputedStyle是一个可以获取(只读)当前元素所有最终使用的CSS属性值。其中俩个参数:元素,伪类。
            //和style的区别是 style只能获取属性style的值并不能获取.css里的属性,且还可以设置。
            oTemp.style.left = this.currentStyle ? this.currentStyle["left"] : getComputedStyle(this, null)["left"];
            oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];
            oTemp.style.zIndex = zIndex++;
            document.body.appendChild(oTemp);

            document.onmousemove = function(event) {
                var event = event || window.event;
                var iL = event.clientX - disX;
                var iT = event.clientY - disY;
                //offsetWidth对象的宽度包括 margin padding  border;
                var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;//当拖的距离大于屏幕时 等于最大值
                var maxT = document.documentElement.clientHeight - oDrag.offsetHeight

                iL <= 0 && (iL = 0);当小于零是=0
                iT <= 0 && (iT = 0);
                iL >= maxL && (iL = maxL);当值大于屏幕时 =最大值
                iT >= maxT && (iT = maxT);

                oTemp.style.left = iL + "px";
                oTemp.style.top = iT + "px";
                return false;
            };

            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
                oDrag.style.left = oTemp.style.left;
                oDrag.style.top = oTemp.style.top;
                oDrag.style.zIndex = oTemp.style.zIndex;
                document.body.removeChild(oTemp);
                oDrag.releaseCapture && oDrag.releaseCapture()
            };

            this.setCapture && this.setCapture();
            return false
        }
    }
    </script>
</head>

<body>
    <div id="drag1"></div>
    <!-- <div id="drag2"></div> -->
</body>

</html>

1、getComputedStyle:是一个可以获取当前元素所有最终使用的CSS属性值; ~~~~

2、是如何理解var e=e||window.event的?相信很多人都能给我个回答说是:为了实现多种浏览器兼容。

3、js中运算符的优先级

4、clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别

5、offsetwidth/clientwidth的区别

6、关于页面中拖动事件中 setCapture 和 releaseCapture 的使用(Js中)

比如说页面上的一个块,你想拖动它,一般就会给它上onmousedown和onmouseup事件,

当然,onmousedown为触发, onmouseup为事件结束, 可是实际中你如果这样给块增加事件,

你就会发现这时候,onmouseup事件不感应,情况是这样的,你拉动太快了,鼠标这时可能没在

块上了,怎么办呢,  我们做页面不能做概率事件吧,这时候setCapture方法就开始派上用场了.

onmouse事件的原主人为html,setCapture的作用就是让块临时为onmouse事件的主人,使用为

var obj=document.getElementByIdx_xx_x_x(‘块ID’);

obj.setCapture();

这时你给它上的鼠标事件就会统统让块管理了,onmouseup结束事件就100%感应了,

当然, 东西只是临时借用的,用完就得归还,所以有onmouseup事件里得使用releaseCapture 方法

来释放权限,也就是

obj.releaseCapture();

希望大家可以用得上它们哥俩:setCapture和releaseCapture

这个不兼容非IE浏览器,还要相应的加上window.captureEvents和window.releaseEvents.

 

© 著作权归作者所有

own1991
粉丝 0
博文 61
码字总数 29561
作品 0
黄浦
私信 提问
jquery gridster 拖拽功能 中文文档

先上git连接 http://git.oschina.net/alexgaoyh/Draging/blob/master/src/main/webapp/gridster/adding-widgets-dynamically.html 效果截图: 1)动态添加模块(http://gridster.net/demos/a......

alexgaoyh
2015/06/19
1K
0
vc++ mfc中拖动效果的实现 借助于CImageList

vc++ mfc中拖动效果的实现 借助于CImageList 拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道。纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做...

yousss
2018/04/18
0
0
[转] 鼠标拖动层的JS方法

Javascript 如何实现对象的拖动? 解决思路 这个效果并不算常见,通常用于游戏或个人站点中。因为拖曳是靠鼠标来操作的,所以对鼠标的位置的捕获是问题的重点,然后才是根据鼠标的位置设置层...

鉴客
2011/01/23
369
0
jquery.ui.draggable中文文档jquery 自由拖拽类~study~

JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动. Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging. 如果需要的不仅仅是拖, 而是一个完整的拖放...

diydit
2013/08/12
863
0
淘宝滑动验证码研究

悠闲的时候,总会去找些事做做。前些天在登录淘宝的时候,发现了滑动验证码,虽然已经不是什么新事物,但还是产生了很大的兴趣。 传统的字符输入验证码,变为了滑动验证码,这一看就是产品大...

李朝强
2016/06/21
905
0

没有更多内容

加载失败,请刷新页面

加载更多

parseint和isNaN用法

本文转载于:专业的前端网站➭parseint和isNaN用法 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><script> var a='12'; alert......

前端老手
37分钟前
6
0
Kylin 精确去重在用户行为分析中的妙用

作者:史少锋,Apache Kylin committer & PMC,2019/10/11 在上次文章《如何在 1 秒内做到大数据精准去重》中,我们介绍了 Apache Kylin 为什么要支持大数据集上的精确去重,以及基于 Bitmap...

ApacheKylin
48分钟前
5
0
学习记录(二) es6基本语法(rest参数,模板化,axios模块,拦截器)

日常学习记录 模块化:把一个大文件分成多个小文件,按照一定规范进行拼接 es5写法: 导出:module.exports = 数据 导入:require("路径") /路径未添加后缀名时 //默认添加.js //把路径作为文件名...

Pole丶逐
52分钟前
4
0
以程序员的角度怎么购买一台「性价比高的电视」

前俩天有小伙伴在我的文章下留言,说能否把 【国内电视机都介绍一下】,今天我已在TV端开发多年的程序员的角度。谈谈已程序员的角度如何购买一台性价比高的电视。 国内大的电视机品牌介绍 长...

我们都很努力着
55分钟前
3
0
PhotoShop 色调:理解直方图/RGB通道信息

一、直方图:图表的形式,展示图像像素分布的情况 1.平均值:表示平均亮度 2.标准偏差值:表示亮度值范围内的中间值 3.像素: 表示用于计算直方图的像素总数 4.色阶:显示指针下面的区域亮度...

东方墨天
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部