公用拖拽功能插件

(function($){
        var defaults = {
            // 是否可拖拽默认为true
            enable : true,

            // 要拖动的对象,默认为handle的父级的父级元素
            target : null,

            // 回调
            callback : {
                // move时的回调
                onMove : function(e){

                },

                // drop时的回调
                onDrop : function(e){

                }
            }
        };

        $.fn.name= function(options){                               //name处为要绑定拖拽效果的对象名
            var opts = $.extend({}, defaults, options);

            return this.each(function(){
                if(opts.enable){
                    var $this = $(this);

                    $this.bind(‘mousedown‘, function(e){
                        var target = opts.target || $this.parent().parent(), // 要拖拽的目标对象

                            height = target.outerHeight(),

                            width = target.outerWidth(),

                            offset = target.offset(),

                            left = offset.left,

                            top = offset.top,

                            lastElemLeft = left,

                            lastElemTop = top,

                        // 拖动开始时记录下鼠标的位置以及要拖动对象的位置
                            data = {
                                left : left,
                                top : top,
                                pageX : e.pageX,
                                pageY : e.pageY
                            },

                        // 辅助对象
                            help = $("<div></div>")
                                .appendTo(document.body),

                            $d = $(document),

                            body = document.documentElement || document.body,

                            cw = Math.max(body.scrollWidth, body.clientWidth),

                            ch = Math.max(body.scrollHeight, body.clientHeight),

                        // 拖动事件处理函数
                            handler = {
                                move : function(e){
                                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

                                    left = lastElemLeft + e.pageX - e.data.pageX;
                                    top = lastElemTop + e.pageY - e.data.pageY;
                                    // 防止拖出
                                    if(parseInt(left) < 0) left = 0;
                                    if(parseInt(top) < 0) top = 0;
                                    if(top > ch - height) top = ch - height;
                                    if(left > cw - width) left = cw - width;

                                    help.css({
                                        left: left,
                                        top: top
                                    });

                                    opts.callback.onMove(e);
                                },

                                drop : function(e){
                                    // 删除辅助对象
                                    help.remove();

                                    // 对目标对象进行定位
                                    target.css({
                                        left: left,
                                        top: top
                                    });

                                    var shim = target.data("shim");

                                    if(shim){
                                        shim.css({
                                            left: left,
                                            top: top
                                        });
                                    }

                                    $d.unbind("mousemove", handler.move).css("cursor", "");

                                    opts.callback.onDrop(e);
                                }
                            };

                        $d.css("cursor", "move");

                        /** 设置辅助div的样式 */
                        help.css({
                            height : target.outerHeight(),
                            width : target.outerWidth(),
                            border : "1px dotted #333",
                            position : "absolute",
                            zIndex : parseInt(target.css("z-index")) + 1,
                            left : left,
                            top : top
                        })

                        /** 监听document的mousemove和mouseup */
                        $d.bind(‘mousemove‘, data, handler.move).bind(‘mouseup‘, data, handler.drop);
                    });
                }
            });
        }
    })(jQuery);

  

时间: 2024-10-07 09:10:18

公用拖拽功能插件的相关文章

JQuery UI的拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能. JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念. ource:拖拽源,要拖动的元素. taerge

sortable实现拖拽功能

使用sortable这个强力插件就很容易实现拖拽功能,它是目前比较牛逼的拖拽插件,无需jquery,就可以全面支持pc和移动,参考以下github文档就有很详细的说明,也给了很多 demo,插件就用我给你的那个就可以,不用额外添加其他库 GitHub:https://github.com/RubaXa/Sortable 以下的simple demo是我自己写的,就这么几行简单代码就完事了 simple demo: html code: <input type="hidden" v

JAVA UI 拖拽功能

java GUI拖拽功能是很实用也相对高级一些的功能. 有一小部分的GUI控件支持他们有dragEnabled属性.这些JComponent包括:javax.swing.JColorChooserjavax.swing.JFileChooserjavax.swing.JListjavax.swing.JTablejavax.swing.JTreejavax.swing.text.JTextComponent 大部分的控件不支持没有这个属性,尤其是常用的jpanel和jframe. 一种简单的方法

Atitit。D&amp;D drag&amp;drop拖拽功能c#.net java swing的对比与实现总结

Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制.必须有DragEnter事件(单独写DragDrop事件是不会具有拖拽功能的) 2 3. ---java黑头的拖曳..必须有DragEnter事件(单独写 Drop事件是不会具有拖拽功能的) 2 4. 代码 3 5. 参考 5 1. 实现一个D&D操作一般包括三个步骤: 首先实现一个拖拽源,这个拖拽

bcb ole拖拽功能的实现

最近项目中用到了OLE 拖拽功能 和BCB 一个Form的Drag 不同的是,只有实现了OLE 拖拽才能,从其他程序拖拽数据到Form 下面的代码实现了,同HTML网页拖拽到Form时,Form获得HTML数据 其核心思想是, 1,要实现 COM的 IDropTarget 接口 2,RegisterDragDrop(handle,this); 注册窗口的拖拽 3,窗口类构造 OleInitialize(NULL); 4,窗口类析构时 OleUninitialize(); 5,在下面的代码中,我将

文件拖拽功能失效,原来是UAC把它过滤了

碰到这样一个问题,文件拖拽功能在没有以管理员身份运行的时候是正常的,但是一旦使用管理员身份运行,这个功能就失效了,搜索了好久总算找到原因了. 在window visa以上版本里引入了用户账户控制(UAC),在管理员权限上会过滤掉一些窗口消息,文件拖拽正好也也被过滤了,解决的方法就是使用ChangeWindowMessageFilterEx()解除过滤 //解除window7以上窗口对该消息的过滤 ChangeWindowMessageFilterEx(hwndDlg, WM_DROPFILES,

js实现登陆页面的拖拽功能

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登陆页面的拖拽功能实现</title> </head> <style type="text/css"> *{ margin:0; padding:0; } a{ text-decoration: none; } .dialog{ width: 380px;

使用UGUI实现拖拽功能(拼图小游戏)

实现方式 1.引入UGUI自带的事件系统 UnityEngine.EventSystems 2.为我们的类添加接口 IBeginDragHandler, IDragHandler, IEndDragHandler 1 using UnityEngine; 2 using System.Collections; 3 using UnityEngine.EventSystems; 4 5 public class DragOnPic : MonoBehaviour,IBeginDragHandler

我的开源框架之可拖拽功能实现

需求: (1)实现元素可拖拽 (2)自定义拖拽范围 (3)自定义按下触发拖拽的元素 (4)支持拖拽过程中的事件监听 实现思路: 元素可拖拽的实现关键为,mousedown.mousemove.mouseup三大事件.mousedown为按下触发拖动的事件,可以定义到元素本身或其他元素:mousemove为拖动范围元素的事件,该事件负责重新设置拖动元素的位置属性:mouseup为拖动范围元素的事件,该事件主要为了释放mousemove.mouseup事件. 为避免当拖动元素内容有较大内容时,重新绘