该插件乃本博客作者所写，目的在于提升作者的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

jquery插件之拖拽的更多相关文章

  1. jQuery插件（拖拽）

    拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...

  2. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  3. jquery插件-自由拖拽

    最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...

  4. jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...

  5. jQ插件--时间线插件和拖拽API

    这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的 ...

  6. jquery 实现页面拖拽并保存到cookie

    实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7 ...

  7. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  8. jquery实现可拖拽的div

    由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...

  9. Jquery.Sorttable 桌面拖拽自定义

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. 在source insight中集成astyle

    转自:http://www.cnblogs.com/xuxm2007/archive/2013/04/06/3002390.html 好吧,我有代码格式的强迫症,代码不整齐,我看的都头疼,之前一直喜欢 ...

  2. VS2010 水晶报表的使用

    在VS2010中新建一个“Windows 窗体应用程序”项目,在该项目中添加一个水晶报表“CrystalReport1.rpt”,然后在项目上点击鼠标右键属性,将“目标框架”改为“.Net Frame ...

  3. jquery audio player

    <!DOCTYPE html><html lang="en"> <head>  <meta charset="utf-8&quo ...

  4. 真机测试INSTALL_FAILED_INSUFFICIENT_STORAGE 的解决方法

    来源:http://blog.csdn.net/aikongmeng/article/details/9793809 INSTALL_FAILED_INSUFFICIENT_STORAGE 的解决方法 ...

  5. 如何在Salesforce中进行代码开发

    两种方式: 1):用Salesforce自带的在线开发模式 Setup --> App Setup --> Develop --> than you can select 'Page ...

  6. codeforces 45C C. Dancing Lessons STL

    C. Dancing Lessons   There are n people taking dancing lessons. Every person is characterized by his ...

  7. html table之 全选，全不选

    就是这个小功能让我和组长引发争端,就是这个小功能让我差点"被"辞职,就是这个自封装的js方法让我放下了对组长的敬畏之心,现在分享一下,其实也很简单,但是真的有这么简单吗? < ...

  8. apk签名（不打包）

    apk提交给应用市场加固后,需要重新签名 签名工具:360签名 下载地址:http://yunpan.cn/cm8GqVWL7Y8Eh 签名步骤:http://jiagu.360.cn/qcms/he ...

  9. 【MongoDB --番外】错误集合

    1.在第一次安装成功之后,就瞬间发现了如下问题 mongodb无法启动,由于目标计算机积极拒绝,无法连接 解决方法: 这不是mongodb无法启动,是你还没有启动mongodb就来连接使用它了,肯定是 ...

  10. Sigar介绍与使用

    Sigar是Hyperic-hq产品的基础包,是Hyperic HQ主要的数据收集组件.它用来从许多平台收集系统和处理信息. 这些平台包括:Linux, Windows, Solaris, AIX, ...