事件的拖拽一

最新推荐文章于 2019-11-28 09:19:39 发布

Surenon

最新推荐文章于 2019-11-28 09:19:39 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/caicaihong/p/9326574.html

版权

/*
* 拖拽的流程
* 1、当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
* 2、当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
* 3、当鼠标松开时，被拖拽函数固定在当前位置 onmouseup
*/

具体实现流程：

　　　　　　　　　　//获取box1
                box1 = document.getElementById("box1");
                //为box1绑定按下事件
                box1.onmousedown = function(){
                    //为document绑定一个移动元素,这样子我鼠标放在任何地方都可以，如果给box1绑定，只有放box才可以。
                    document.onmousemove = function(event){
                        //兼容性
                        event = event || window.event;
                        //获取鼠标的坐标
                        var left = event.clientX;
                        var top = event.clientY;
                        //修改div的坐标
                        box1.style.left = left + "px";
                        box1.style.top = top + "px";
                        //为docment绑定一个1onmouseup，不能为div绑定，如果有多一个div的话
                        //移动到下一个div同位置的话，释放鼠标是没有释放事件的，因为作用于另外一个div了
                        //所以要绑定docment对所有的都有用。
                        //当鼠标松开的时候，就取消移动事件和松开事件
                        document.onmouseup = function(){
                            document.onmousemove = null;
                            document.onmouseup = null;
                        }
                    }
                    
                }

以上是比较简单的情况下，没有考虑到其他的影响下的情况，如果多一个div和文字的话，则需要考虑如下情况

1、/*
* 当我们去拖拽一个内容时，浏览器会默认去搜索引擎中搜索内容，
* 此时会导致拖拽功能的异常，这个是浏览器提供的一个默认行为，
* 如果不希望发生这个行为，则可以通过return false取消默认行为
* 但是这招对IE8不起作用，
*
*/

普通浏览器可以使用return false解决，但是IE8则需要使用捕获来操作，但是捕获对chorm等浏览器不支持，所以也要判断，类似event

//设置box1捕获所有鼠标按下的事件，就是按了别人，也是作用于box1,这样子文字那些就不会跟随变化了
/*setCapture()
* z只有IE支持，但是在火狐中调用时不会报错
* 在chorme会报错
* 那就需要判断是不是有该属性
* box1.setCapture();
* 如果存在该属性，就执行该方法，也可以使用if条件判断
* 就是这个实现就是按下box1的话，文字不会被拖拽，都会拖box1了
*
*/

判断条件如下

box1.setCapture && box1.setCapture();

2、

//但是由于点击div中间，原点也会默认在中间，div的左上角就会跳到鼠标的位置，
//现在要实现，div不随鼠标的位置而改变原点，则需要减去d鼠标在div的左上的长度就可以实现不变了

var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;

这样子就解决了两个问题，如果要对div操作拖拽或者更多图片等，则把该方法包装成功方法，传obj参数即可。

具体代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
            }
            #box2{
                width: 100px;
                height: 100px;
                background: yellow;
                position: absolute;
                left: 100px;
                top: 100px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                box1 = document.getElementById("box1");
                box1.onmousedown = function(event){
                    
                    event = event || window.event;
                    var ol = event.clientX - box1.offsetLeft;
                    var ot = event.clientY - box1.offsetTop;
                    //设置box1捕获所有鼠标按下的事件，就是按了别人，也是作用于box1,这样子文字那些就不会跟随变化了
                    /*setCapture()
                     * z只有IE支持，但是在火狐中调用时不会报错
                     * 在chorme会报错
                     * 那就需要判断是不是有该属性
                     * box1.setCapture();
                     * 如果存在该属性，就执行该方法，也可以使用if条件判断
                     * 就是这个实现就是按下box1的话，文字不会被拖拽，都会拖box1了
                     * 
                     */
                    box1.setCapture && box1.setCapture();
                    
                    
                    document.onmousemove = function(event){
                        event = event || window.event;
                        
                        
                        
                        //但是由于点击div中间，原点也会默认在中间，div的左上角就会跳到鼠标的位置，
                        //现在要实现，div不随鼠标的位置而改变原点，则需要减去d鼠标在div的左上的长度就可以实现不变了
                        var left = event.clientX - ol;
                        var top = event.clientY - ot;
                        
                        box1.style.left = left+"px";
                        box1.style.top = top+"px";
                    }
                    document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmouseup = null;
                        //释放捕获 box1.releaseCapture();
                        box1.releaseCapture && box1.releaseCapture();
                        
                    }
                    
                    /*
                     * 当我们去拖拽一个内容时，浏览器会默认去搜索引擎中搜索内容，
                     * 此时会导致拖拽功能的异常，这个是浏览器提供的一个默认行为，
                     * 如果不希望发生这个行为，则可以通过return false取消默认行为
                     * 但是这招对IE8不起作用，
                     * 
                     */
                    return false
                    
                }
            }
            
        </script>
    </head>
    <body>
        <p>我是一段文字</p>
        <div id="box1"></div>
        //如果要给box2也给拖拽，就把文件设置为一个函数，给多个使用
        <div id="box2">
            
        </div>
    </body>
</html>

转载于:https://www.cnblogs.com/caicaihong/p/9326574.html

Surenon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件的拖拽一

/* * 拖拽的流程 * 1、当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown * 2、当鼠标移动时被拖拽元素跟随鼠标移动onmousemove * 3、当鼠标松开时，被拖拽函数固定在当前位置 onmouseup */具体实现流程：　　　　　　　　　　//获取box1 box1 = document....
复制链接

扫一扫