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

    ios开发者 http://www.codeios.com/   cocoachina http://www.cocoachina.com   code4app http://code4app.com ...

  2. Git 基础操作

    [TOC] 在Linux上安装Git $ git --version #查看git的版本号 $ sudo apt-get install git # 安装git 创建版本库 $ git init # ...

  3. android用户界面详尽教程实例

    android用户界面详尽教程实例 1.android用户界面之AlarmManager教程实例汇总http://www.apkbus.com/android-48405-1-1.html2.andr ...

  4. Jmeter 小攻略（转）

    http://www.myexception.cn/open-source/1346307.html

  5. Oracle注入漏洞

    sqlmap.py -u "http://10.7.82.123:9104/servlet/json" --cookie="JSESSIONID=abcgk26KDf_5 ...

  6. JAVA Day6

    1.对象:用来描述客观事物的一个实体,由一组属性和方法组成 2.属性--对象具有的各种特征    *每个对象的每个属性都拥有特定值    *例如:张浩和李明的年龄.姓名不一样 3.方法--对象执行的操 ...

  7. python 类型判断-- isinstance函数

    判断类型 函数isinstance()可以判断一个变量的类型,既可以用在Python内置的数据类型如str.list.dict,也可以用在我们自定义的类,它们本质上都是数据类型. 假设有如下的 Per ...

  8. vs 中怎么用c改变部分字体颜色

    // test.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <windows.h> #include< ...

  9. java出错

    某天cmd运行java突然莫名其妙的出错:(之前还好好的) Error occurred during initialization of VMjava/lang/NoClassDefFoundErr ...

  10. mongodb学习01介绍

    安装/运行 查看当前mongodb运行情况: pgrep mongo; 在当前路径下建立数据库: mkdir -p data/db 按照一个数据库路径运行mongod --dbpath ./data/ ...