该插件乃本博客作者所写，目的在于提升作者的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. hdu 4069 福州赛区网络赛I DLC ***

    再遇到一个DLC就刷个专题 #include <stdio.h> #include <string.h> #include <iostream> #include ...

  2. UDP穿透NAT原理解析

    转自:http://www.2cto.com/net/201201/116793.html NAT(Network Address Translators),网络地址转换:网络地址转换是在IP地址日益 ...

  3. selenium实战-自动退百度云共享群

    必备知识 在官网上下好selenium-3.0.1-py2.py3-none-any.whl,然后进入下载文件所在的位置 pip install selenium-3.0.1-py2.py3-none ...

  4. pig的各种运行模式与运行方式详解

    一.pig的运行模式: Pig 有两种运行模式: Local 模式和 MapReduce 模式.当 Pig 在 Local 模式运行的时候, Pig 将只访问本地一台主机:当 Pig 在 MapRed ...

  5. java的几种对象(PO,VO,DAO,BO,POJO)解释

    java的几种对象(PO,VO,DAO,BO,POJO)解释     一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中 ...

  6. react-基础(1)

    props 创建组件 React.createClass; 直接继承React.Component;与上面不同的是初始化props和state的方法: export class Counter ext ...

  7. bootstrap datetimepicker 中只显示年或者只显示月份

    1.只显示datetimepicker  日历中只显示年份 $("#day-access-calendar").datepicker({ startView: 2, maxView ...

  8. git 学习笔记6--remote & log

    git 学习笔记6--remote & log 创建SSH Keys ssh-keygen -t rsa -C "1050244110@qq.com" 本地关联远程 git ...

  9. Codeforces 552C Vanya and Scales（思路）

    题目大概说有101个质量w0.w1.w2.....w100的砝码,和一个质量m的物品,问能否在天平两边放物品和砝码使其平衡. 哎,怎么没想到..注意到w0.w1.w2.....w100—— 把m转化成 ...

  10. EF框架step by step(1)—Database-First

    ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案,现已经包含在 Visual Studio 2008 S ...