jQuery实现自由拖动DIV插件

最新推荐文章于 2024-06-05 10:04:13 发布

summer7310

最新推荐文章于 2024-06-05 10:04:13 发布

阅读量7.1k

点赞数 1

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/summer7310/article/details/54313868

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现简单Div的拖动效果，主要分为三步。
1，需要拖动的Div拖动绑定，mousedown事件，鼠标mousedown的时候记录此时的鼠标相对浏览器的x轴和y轴，以及需要拖动Div的相对浏览器的left，top值，并且给拖曳标记赋值为true,代表拖动动作就绪。
2，绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用实现拖动区域的Div上绑定事件，而不用DIV元素的事件，mousemove事件动态获取鼠标的x轴和y轴值，然后计算出拖动Div的新的left和top值，并重新赋值改变css使其实现拖动效果。
3，鼠标mouseup事件触发时，拖动标记赋值为false,结束拖动。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>拖动DIV</title> 
<style type="text/css"> 
.wrapper{
    width: 600px;
    height :600px;
    background-color: lightgreen;
}
.content{
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;

}

</style> 

</head> 
<body> 
    <div class="wrapper">
        <div class="content">
            拖动Div
        </div>
    </div>
    <p>鼠标指针的坐标是: <span></span>.</p>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){ 
    $('.content').dragDiv();
}) 

;(function($) {
    $.fn.dragDiv = function(options) {
        return this.each(function() {
            var _moveDiv = $(this);//需要拖动的Div
            var _moveArea = options ? $(options) : $(document);//限定拖动区域，默认为整个文档内
            var isDown = false;//mousedown标记
            //ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
            if(document.attachEvent){
                _moveDiv[0].attachEvent('onselectstart', function() {
                    return false;
                });
            }
            _moveDiv.mousedown(function(event) {            
                var e = event || window.event;
                //拖动时鼠标样式
                _moveDiv.css("cursor", "move");
                //获得鼠标指针离DIV元素左边界的距离
                var x = e.pageX - _moveDiv.offset().left;
                //获得鼠标指针离DIV元素上边界的距离 
                var y = e.pageY - _moveDiv.offset().top;
                _moveArea.on('mousemove', function(event) {
                    var ev = event || window.event;
                    //获得X轴方向移动的值 
                    var abs_x = ev.pageX - x;
                    //获得Y轴方向移动的值 
                    var abs_y = ev.pageY - y;
                    //div动态位置赋值
                    _moveDiv.css({'left': abs_x, 'top': abs_y});
                })
            });
            _moveDiv.mouseup(function() {
                _moveDiv.css('cursor', 'default');
                //解绑拖动事件
                _moveArea.off('mousemove');

            });

        })
    }
})(jQuery)

summer7310

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现自由拖动DIV插件

实现简单Div的拖动效果，主要分为三步。 1，需要拖动的Div拖动绑定，mousedown事件，鼠标mousedown的时候记录此时的鼠标相对浏览器的x轴和y轴，以及需要拖动Div的相对浏览器的left，top值，并且给拖曳标记赋值为true,代表拖动动作就绪。 2，绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用实现拖动区域的Div上绑定事件，而不用DIV元素的事件，mou
复制链接

扫一扫