该插件乃本博客作者所写，目的在于提升作者的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. WPF 实现带标题的TextBox

    这篇博客将分享在WPF中如何创建一个带Title的TextBox.首先请看一下最终的效果, 实现思路:使用TextBlock+TextBox来实现,TextBlock用来显示Title. 实现代码, ...

  2. PAT A 1016. Phone Bills (25)【模拟】

    题目:https://www.patest.cn/contests/pat-a-practise/1016 思路:用结构体存储,按照名字和日期排序,然后先判断是否有效,然后输出,时间加减直接暴力即可 ...

  3. 在Salesforce中对Object实现Trigger的绑定

    Trigger的相关属性详细解读请看如下链接: http://www.salesforce.com/us/developer/docs/apexcode/Content/apex_triggers_c ...

  4. loj 1412(树上最长直径的应用)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1412 思路:好久没写题解了,有点手生,这题从昨天晚上wa到现在终于是过了...思想其实 ...

  5. CE搜索内存数据的原理

      最近发现有朋友在玩游戏时, 使用一款工具来修改游戏的部分数据,作弊的效果, 也就是CE(Cheat Engine),这款工具是 delphi 编写的, 于是好奇, 然后瞬间想到API OpenPr ...

  6. 为什么要使用 Node.js

    这是一个移动端工程师涉足前端和后端开发的学习笔记,如有错误或理解不到位的地方,万望指正. Node.js 是什么 传统意义上的 JavaScript 运行在浏览器上,这是因为浏览器内核实际上分为两个部 ...

  7. Asp.Net Mvc 控制器与视图的数据传递

    数据传递也就是控制器和视图之间的交互,比如在视图中提交的数据,在控制器怎么获取,或者控制器从业务层获得一些数据,怎么传递到视图中,让视图显示在客户端呢?带着这些疑问,我们接着看..        下面 ...

  8. hdu2191 多重背包

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2191 多重背包:有N种物品和一个容量为V的背包.第i种物品最多有n[i]件可用,每件费用是 ...

  9. css布局1

    body <body> <header id='title'> <h1>Holla</h1> </header> <div id='c ...

  10. 彻底搞懂Html5本地存储技术（一）

    一.H5之前客户端本地存储的实现 1. cookies cookies的应用比较广泛,但有以下几个问题: (1)每次http请求头上会带着,浪费资源 (2)每个域名客户端只能存储4K大小 (3)会造成 ...