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);
分享到:
相关推荐
使用$.isPlainObject()函数检测对象是否为原始对象 使用$.contains()函数检测两个节点是否包含 使用$.param()进行数组元素序列化 使用函数$.extend()扩展工具函数 使用函数$.proxy()改变事件函数的作用域 使用...
《jQuery权威指南》除了理论知识丰富而全面外,它还有一个最大的特点就是注重实战,每个知识点都有一个完整的案例,包括需求分析、代码实现和结果展示三个部分,而且还包含两个综合性的案例,它的实践性之强是目前...
jQuery Images比较一个用于比较两个图像的jQuery插件徽章产品特点兼容性:ie9 + 努力通过CSS展示外观(更易于皮肤/覆盖) 触摸友好,鼠标拖动,非常感谢 :) React灵敏您可以听更改事件以添加一些逻辑您可以从外部...
弹出对话框jQuery插件Dialog主要功能是将Javascript中的alert和confirm这两个默认的弹窗进行了美化,支持弹出iframe,自动调整对话框位置,ESC关闭,可拖拽等。
一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery...
jQuery fDialog弹出层插件基于jQuery实现,本插件所生成的... 3、默认插件中增加拖拽功能(drag参数为true代码允许拖拽) 4、默认模块中去掉footer高度限制,防止在CSS3 box-sizing: border-box 模式下按钮超出的问题
下面就来说说这个基于 JQuery的简易拖拽插件吧。 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的。 放到我们的DOM上,就是改变它的位置。 它...
[removed][removed][removed][removed][removed][removed]调用代码 你所需要做的所有事就是使用jQuery的方式选择一个元素并且调用插件。 $('a.myLinks').zoomimage(options); 可选项 一个哈希参数。所有的参数都是可...
一个不错的jQuery 拖放插件DragDrop,作者:kele527,实现的功能类似物品栏里的物品可相互拖拽,而且可以有限制拖放,如:下面格子里的东西可以拖到上面,但是不能拖到下面的其他格子里,上面格子里的东西可以在上下...
左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小...
摘要:脚本资源,jQuery,拖拽,jQuery插件 jQuery DragnDrop拖拽插件,...Demo中通过两个层的互相拖拽和遮挡,让大家展示jquery.dragndrop.js的强大功能,相信通过本实例,你将对jquery.dragndrop插件有更深层次的理解。
所有的回调函数(start, stop, drag)接受两个参数: 浏览器事件和ui对象, 此对象请查看下面的文档 : ui.helper - 被拖动的jQuery辅助对象 ui.position - 辅助对象相对于上级元素的当前位置, 使用{ top, left } ui....
jQuery.fn.dragon 这是另一个拖拽插件! 当 jQueryUI 有一个非常有用的插件来做同样的事情时,为什么我要浪费一个周末来构建另一个拖动插件? 因为速度不够快,无法满足我的需求。 如果您查看事件处理程序回调上的...
内容索引:脚本资源,Ajax/JavaScript,分栏,拖拽,jQuery jQuery写的小插件,支持拖拽分栏的小插件,项目需求 只是做一个上下分栏拖拽的移动,想到以后可以继续使用,做成插件,支持上下左右两种移动方式,希望能给...
该项目完全抛弃传统的Table布局,全部采用国际流行的Css+Div,画面绚丽,大量使用JQuery中的Ajax技术和UI插件,图层可自由拖拽,商品能拖入购物车,提高了用户的体验,此系商业网站,因此只能公开部分代码,使用时请...
弹出对话框jQuery插件Dialog主要功能是将Javascript中的alert和confirm这两个默认的弹窗进行了美化,支持弹出iframe,自动调整对话框位置,ESC关闭,可拖拽等。
更新日志2015-06-03 :发布v1.0.02015-06-12 :更新为v1.0.11、宽高支持 width或w,height或h 两种方式调用2、ajax模块,增加ajaxData参数3、默认插件中增加拖拽功能(drag参数为true代码允许拖拽)4、默认模板中去掉...
jQuery拖到滑块选择数字插件是一款通过拖动滑块快速输入数值,并可以设置常用的数值快速选择器插件。
插件描述:实现在两个div中,互相自由的拖动,并且排序. 参考实例:http://www.jq22.com/jquery-info4584
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件。它与 IE、FireFox、Chrome 等浏览器保持兼容,在一个页面内可同时生成多个Tree 实例,支持一次性静态生成和Ajax 异步加载两种方式,...