jquery插件之拖拽

该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。

此插件旨在实现目前较为流行的拖拽效果，您可以根据自己的实际需求来设置被拖拽元素是否可以被拖拽至可视区域以外。整体代码如下：

<!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>无标题文档</title>
<style>
*{margin:0;padding:0;}
.box{position:absolute;left:100px;top:100px;border:1px solid #eee;width:150px;height:150px;padding:10px;cursor:move;}
</style>
<script type="text/javascript" src="../test/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.drag.js"></script>
</head>

<body>
<div class="box">拖拽我吧！</div>
<script>
$(function(){
    $(".box").drag({
        out:false    //false 默认匹配元素不能被拖拽至可视区域以外
        });
    })
</script>
</body>
</html>

拖拽插件jquery.drag.js代码：

/*
*drag 0.1
*Copyright (c) 2015 小坏 http://tnnyang.cnblogs.com
*Dependenc jquery-1.7.1.js
*/
;(function(a){
    a.fn.drag = function(options){
        var defaults = {   //默认参数
            out:false   //默认匹配元素不会被拖至可视区域以外
            }
        var opts = a.extend(defaults, options);
        
        this.each(function(){
            var obj = a(this);    
            obj.mousedown(function(e){    
                var e = e || event;    //区分IE和其他浏览器事件对象
                var x = e.pageX - obj.offset().left;    //获取鼠标距离匹配元素左侧的距离                        
                var y = e.pageY - obj.offset().top;     //获取鼠标距离匹配元素顶端的距离
                
                $(document).mousemove(function(e){
                    var e = e || event;
                    var _x = e.pageX - x;        //动态获取元素左侧距离
                    var _y = e.pageY - y;
                    if(!opts.out){                        
                        var maxW = $(window).width() - obj.outerWidth();    //除去匹配元素宽度后的可视区域的宽度
                        var maxH = $(window).height() - obj.outerHeight();   //除去匹配元素高度后的可视区域的高度
                        _x = _x < 0 ? 0 : _x;      //保证匹配元素不会被拖至可视区域以外
                        _x = _x > maxW ? maxW : _x;
                        _y = _y <0 ? 0 : _y;
                        _y = _y > maxH ? maxH : _y;
                        }else{
                            _x = _x;
                            _y = _y;
                            }        
                    obj.css({left:_x,top:_y});
                }).mouseup(function(){
                    $(this).unbind("mousemove");  //当鼠标抬起  删除移动事件   匹配元素停止移动
                    });
                });
            
            })
        }
    })(jQuery);

点击下载拖拽DEMO

posted @ 2015-09-09 17:33  豫见世家公子  阅读(306)  评论(0)  编辑  收藏  举报