该插件乃本博客作者所写，目的在于提升作者的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. MySQL5.7更改密码时出现ERROR 1054 (42S22): Unknown column 'password' in 'field list'

    转自:http://blog.csdn.net/u010603691/article/details/50379282 新安装的MySQL5.7,登录时提示密码错误,安装的时候并没有更改密码,后来通过 ...

  2. 第十二篇：SOUI的utilities模块为什么要用DLL编译？

    SOUI相对于DuiEngine一个重要的变化就是很多模块变成了一个单独的DLL. 然后很多情况下用户可能希望整个产品就是一个EXE,原来DuiEngine提供了LIB编译模式,此时链接LIB模式的D ...

  3. LoadRunner替换字符串（可以同时替换多个）

    在global.h中添加代码 /* * @param char* dest 目标串,也就是替换后的新串 * @param const char* src 源字符串,被替换的字符串 * @param c ...

  4. 解决ScrollView嵌到listView冲突问题

    方法一: 把下面的方法放在绑定适配器操作的下面就行. /** * 重新计算ListView的高度,解决ScrollView和ListView两个View都有滚动的效果,在嵌套使用时起冲突的问题 * @ ...

  5. RTTI （Run-Time Type Identification，通过运行时类型识别） 转

    参考一: RTTI(Run-Time Type Identification,通过运行时类型识别)程序能够使用基类的指针或引用来检查这些指针或引用所指的对象的实际派生类型.   RTTI提供了以下两个 ...

  6. 捕获异常try：except

    常见的异常有:1.NameError 没有定义这个变量2.SyntaxError 这是语法错误3.IOEtror 这里是想打开的文件不存在4.10/0: ZeroDivsionertor 这个是除零错 ...

  7. css自适应代码-iphone端

    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {/* 兼容iphone4/4s */} @media (dev ...

  8. SlidesJS的使用

    项目中对slideshow要求要有触屏滑动换图功能,就想到了SlidesJS这个Jquery插件 例排,先把静态html写好 <div id="cm_slides"> ...

  9. 后缀数组 POJ 3974 Palindrome && URAL 1297 Palindrome

    题目链接 题意:求给定的字符串的最长回文子串 分析:做法是构造一个新的字符串是原字符串+反转后的原字符串(这样方便求两边回文的后缀的最长前缀),即newS = S + '$' + revS,枚举回文串 ...

  10. PHP历程（封装的增删改查方法）

    db.class.php   主要方法 <?php /** * 数据库配置信息 */ define('DB_HOST','127.0.0.1'); //服务器 define('DB_USER', ...