知识点（鼠标跟随）：

mousedown: 当用户用鼠标点击在某一元素上就会触发该事件
mouseover: 当鼠标指针在某一元素上移动就会触发改事件

下面这个例子的效果就是鼠标点击元素后，元素跟着鼠标移动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>独秀不爱秀</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #one {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="one"></div>
    <script type="text/java script">
        window.onload = function () {
            var one = document.getElementById('one');
            // mousedown鼠标事件：当用户点击鼠标在元素上就会触发该事件
            one.addEventListener('mousedown', function () {
                // mousemove 鼠标事件：当鼠标指针在元素上移动就会触发此事件
                /**
                 * e：指事件，在火狐浏览器中事件用window.event,所以只有把 event
                 *    所以只有把event传给函数使用。为了兼容火狐和浏览器，一般会在函数里自动
                 *    重新赋值: e = e || window.event;
                */
                document.addEventListener('mousemove', function (e) {
                    one.style.left = e.clientX + 'px';
                    one.style.top = e.clientY + 'px';
                });
            });
        }
    </script>
</body>
</html>

知识点（鼠标拖拽）

dragstart: 用户开始拖拽时触发该事件
drag: 用户正在拖拽时触发该事件
dragend: 用户结束拖拽时触发该事件

　　以上3个事件的控制对象为被拖拽的元素（整个过程我们可以称之为拖拽区）

dragenter: 当被拖拽的元素对象进入其容器范围内时触发该事件
dragover: 当被拖拽的元素对象在其容器范围内拖拽时触发该事件
dragleave: 当被拖拽的元素对象离开其容器范围内触发该事件
drop: 在一个拖拽过程中，鼠标释放触发该事件

　　以上4个事件的控制对象为被拖追元素的目的容器（整个过程我们可以称之为投放区）

实例1（将一个容器拖放到另一个容器中）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>独秀不爱秀</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #one {
            width: 200px;
            height: 200px;
            border: 1px solid rebeccapurple;
        }
        #two {
            width: 100px;
            height: 100px;
            background-color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="one"></div><br>
    <!-- draggable属性：设置改元素是否能够被拖拽 -->
    <div id="two" draggable="true"></div>
    <script type="text/java script">
        window.onload = function () {
            function $(id) {
                return document.getElementById(id);
            }

            // 鼠标拖拽事件(注意控制对象为被拖拽的元素)
            // dragstart: 用户开始拖拽时触发
            $('two').addEventListener('dragstart', function (e) {
                // $('one').innerHTML = '开始拖拽';
            });
            // drag: 用户正在拖拽时触发
            $('two').addEventListener('drag', function (e) {
                // $('one').innerHTML = '移动当中';
            });
            // dragend:用户结束拖拽时触发
            $('two').addEventListener('dragend', function (e) {
                // $('one').innerHTML = '移动结束';
            });


            // 投放过程事件(注意控制对象为拖拽元素的目的地元素)
            // dragenter: 当被拖拽的元素对象进入其范围内时触发
            $('one').addEventListener('dragenter', function (e) {
                // $('one').innerHTML = '进入';
                e.preventDefault();     // 阻止默认事件
            });
            // dragover: 当被拖拽的元素对象在该容器范围内拖拽时触发
            $('one').addEventListener('dragover', function (e) {
                // $('one').innerHTML += '我就在里面';
                e.preventDefault();     // 阻止默认事件（拖动的默认事件为在新窗口中打开）

            });
            // dragleave: 当被拖拽的元素对象离开其容器范围内触发
            $('one').addEventListener('dragleave', function (e) {
                // $('one').innerHTML += '离开';
                e.preventDefault();     // 阻止默认事件
            });

            // 投放事件(注意控制对象为拖拽元素的目的地元素)
            // drop: 在一个拖动过程中，鼠标释放触发
            $('one').addEve

首页上一页 1 2 下一页尾页 1/2/2
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：Vue.js前端MVVM框架实战篇	下一篇：jQuery火箭图标返回顶部代码