`
teleping
  • 浏览: 903 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

两个关于拖拽的jQuery插件代码

阅读更多
http://dev.iceburg.net/jquery/jqDnR/

/*
 * jqDnR - Minimalistic Drag'n'Resize for jQuery.
 *
 * Copyright (c) 2007 Brice Burgess <bhb@iceburg.net>, http://www.iceburg.net
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * $Version: 2007.02.09 +r1
 */
(function($){
	$.fn.jqDrag=function(r){
		$.jqDnR.init(this,r,'d'); 
		return this;
	};
	
	$.fn.jqResize=function(r){
		$.jqDnR.init(this,r,'r'); 
		return this;
	};
	
	$.jqDnR={
		init:function(w,r,t){
			r=(r)?$(r,w):w;
			
			r.bind('mousedown',{w:w,t:t},function(e){
					var h=e.data; 
					var w=h.w;
					hash=$.extend({oX:f(w,'left'),oY:f(w,'top'),oW:f(w,'width'),oH:f(w,'height'),pX:e.pageX,pY:e.pageY,o:w.css('opacity')},h);
					h.w.css('opacity',0.8); 
					$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
					return false;
				}
			);
		},
		
		drag:function(e) {
			var h=hash; 
			var w=h.w[0];
			if(h.t == 'd') h.w.css({left:h.oX + e.pageX - h.pX,top:h.oY + e.pageY - h.pY});
			else h.w.css({width:Math.max(e.pageX - h.pX + h.oW,0),height:Math.max(e.pageY - h.pY + h.oH,0)});
			return false;
		},
		
		stop:function(){
			var j=$.jqDnR; 
			hash.w.css('opacity',hash.o); 
			$().unbind('mousemove',j.drag).unbind('mouseup',j.stop);
		},
		
		h:false	
	};
	
	
	
	var hash=$.jqDnR.h;
	
	var f=function(w,t){
		return parseInt(w.css(t)) || 0
	};
	
})(jQuery);




http://code.google.com/p/jquery-drag-and-drop/

/*
* dragndrop
* version: 1.0.0 (05/13/2009)
* @ jQuery v1.2.*
*
* Licensed under the GPL:
*   http://gplv3.fsf.org
*
* Copyright 2008, 2009 Jericho [ thisnamemeansnothing[at]gmail.com ] 
*  usage:
*  
*/
//(function($) {
    $.extend($.fn, {
        getCss: function(key) {
            var v = parseInt(this.css(key));
            if (isNaN(v))
                return false;
            return v;
        }
    });
    $.fn.Drags = function(opts) {
        var ps = $.extend({
            zIndex: 20,
            opacity: .7,
            handler: null,
            onMove: function() { },
            onDrop: function() { }
        }, opts);
        var dragndrop = {
            drag: function(e) {
                var dragData = e.data.dragData;
                dragData.target.css({
                    left: dragData.left + e.pageX - dragData.offLeft,
                    top: dragData.top + e.pageY - dragData.offTop
                });
                dragData.handler.css({ cursor: 'move' });
                dragData.onMove(e);
            },
            drop: function(e) {
                var dragData = e.data.dragData;
                dragData.target.css(dragData.oldCss); //.css({ 'opacity': '' });
                dragData.handler.css('cursor', dragData.oldCss.cursor);
                dragData.onDrop(e);
                $().unbind('mousemove', dragndrop.drag)
                    .unbind('mouseup', dragndrop.drop);
            }
        }
        return this.each(function() {
            var me = this;
            var handler = null;
            if (typeof ps.handler == 'undefined' || ps.handler == null)
                handler = $(me);
            else
                handler = (typeof ps.handler == 'string' ? $(ps.handler, this) : ps.handler);
            handler.bind('mousedown', { e: me }, function(s) {
                var target = $(s.data.e);
                var oldCss = {};
                if (target.css('position') != 'absolute') {
                    try {
                        target.position(oldCss);
                    } catch (ex) { }
                    target.css('position', 'absolute');
                }
                oldCss.cursor = target.css('cursor') || 'default';
                oldCss.opacity = target.getCss('opacity') || 1;
                var dragData = {
                    left: oldCss.left || target.getCss('left') || 0,
                    top: oldCss.top || target.getCss('top') || 0,
                    width: target.width() || target.getCss('width'),
                    height: target.height() || target.getCss('height'),
                    offLeft: s.pageX,
                    offTop: s.pageY,
                    oldCss: oldCss,
                    onMove: ps.onMove,
                    onDrop: ps.onDrop,
                    handler: handler,
                    target: target
                }
                target.css('opacity', ps.opacity);
                $().bind('mousemove', { dragData: dragData }, dragndrop.drag)
                    .bind('mouseup', { dragData: dragData }, dragndrop.drop);
            });
        });
    }
//})(jQuery); 


分享到:
评论

相关推荐

    JQuery权威指南源代码

    使用$.isPlainObject()函数检测对象是否为原始对象 使用$.contains()函数检测两个节点是否包含 使用$.param()进行数组元素序列化 使用函数$.extend()扩展工具函数 使用函数$.proxy()改变事件函数的作用域 使用...

    jQuery权威指南-源代码

    《jQuery权威指南》除了理论知识丰富而全面外,它还有一个最大的特点就是注重实战,每个知识点都有一个完整的案例,包括需求分析、代码实现和结果展示三个部分,而且还包含两个综合性的案例,它的实践性之强是目前...

    jquery-images-compare:一个用于比较两个图像的jquery插件

    jQuery Images比较一个用于比较两个图像的jQuery插件徽章产品特点兼容性:ie9 + 努力通过CSS展示外观(更易于皮肤/覆盖) 触摸友好,鼠标拖动,非常感谢 :) React灵敏您可以听更改事件以添加一些逻辑您可以从外部...

    弹出对话框jQuery插件Dialog.zip

    弹出对话框jQuery插件Dialog主要功能是将Javascript中的alert和confirm这两个默认的弹窗进行了美化,支持弹出iframe,自动调整对话框位置,ESC关闭,可拖拽等。

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery...

    jQuery fDialog弹出层插件 v1.0.1.rar

    jQuery fDialog弹出层插件基于jQuery实现,本插件所生成的... 3、默认插件中增加拖拽功能(drag参数为true代码允许拖拽)  4、默认模块中去掉footer高度限制,防止在CSS3 box-sizing: border-box 模式下按钮超出的问题

    JQuery之拖拽插件实现代码

    下面就来说说这个基于 JQuery的简易拖拽插件吧。 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的。 放到我们的DOM上,就是改变它的位置。 它...

    jQuery 图片浏览放大插件 ZoomImage V1.0.rar

    [removed][removed][removed][removed][removed][removed]调用代码 你所需要做的所有事就是使用jQuery的方式选择一个元素并且调用插件。 $('a.myLinks').zoomimage(options); 可选项 一个哈希参数。所有的参数都是可...

    jQuery 拖放插件DragDrop 作者:kele527.rar

    一个不错的jQuery 拖放插件DragDrop,作者:kele527,实现的功能类似物品栏里的物品可相互拖拽,而且可以有限制拖放,如:下面格子里的东西可以拖到上面,但是不能拖到下面的其他格子里,上面格子里的东西可以在上下...

    jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小...

    jQuery DragnDrop拖拽插件Demo下载

    摘要:脚本资源,jQuery,拖拽,jQuery插件 jQuery DragnDrop拖拽插件,...Demo中通过两个层的互相拖拽和遮挡,让大家展示jquery.dragndrop.js的强大功能,相信通过本实例,你将对jquery.dragndrop插件有更深层次的理解。

    JQuery UI/API/1.7 中文帮助文档

    所有的回调函数(start, stop, drag)接受两个参数: 浏览器事件和ui对象, 此对象请查看下面的文档 : ui.helper - 被拖动的jQuery辅助对象 ui.position - 辅助对象相对于上级元素的当前位置, 使用{ top, left } ui....

    dragon:另一个用于 jQuery 的 fn.draggable 插件

    jQuery.fn.dragon 这是另一个拖拽插件! 当 jQueryUI 有一个非常有用的插件来做同样的事情时,为什么我要浪费一个周末来构建另一个拖动插件? 因为速度不够快,无法满足我的需求。 如果您查看事件处理程序回调上的...

    jQuery小插件:网页上下分栏移动,支持拖拽

    内容索引:脚本资源,Ajax/JavaScript,分栏,拖拽,jQuery jQuery写的小插件,支持拖拽分栏的小插件,项目需求 只是做一个上下分栏拖拽的移动,想到以后可以继续使用,做成插件,支持上下左右两种移动方式,希望能给...

    Asp.net 2.0和JQuery做的购物网部分代码

    该项目完全抛弃传统的Table布局,全部采用国际流行的Css+Div,画面绚丽,大量使用JQuery中的Ajax技术和UI插件,图层可自由拖拽,商品能拖入购物车,提高了用户的体验,此系商业网站,因此只能公开部分代码,使用时请...

    弹出对话框jQuery插件Dialog特效代码

    弹出对话框jQuery插件Dialog主要功能是将Javascript中的alert和confirm这两个默认的弹窗进行了美化,支持弹出iframe,自动调整对话框位置,ESC关闭,可拖拽等。

    jQuery fDialog v1.0.1

    更新日志2015-06-03 :发布v1.0.02015-06-12 :更新为v1.0.11、宽高支持 width或w,height或h 两种方式调用2、ajax模块,增加ajaxData参数3、默认插件中增加拖拽功能(drag参数为true代码允许拖拽)4、默认模板中去掉...

    jQuery拖到滑块选择数字插件.zip

    jQuery拖到滑块选择数字插件是一款通过拖动滑块快速输入数值,并可以设置常用的数值快速选择器插件。

    拖动排序插件

    插件描述:实现在两个div中,互相自由的拖动,并且排序. 参考实例:http://www.jq22.com/jquery-info4584

    JQuery zTree v3.0 下载

    zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件。它与 IE、FireFox、Chrome 等浏览器保持兼容,在一个页面内可同时生成多个Tree 实例,支持一次性静态生成和Ajax 异步加载两种方式,...

Global site tag (gtag.js) - Google Analytics