jQuery模仿win拖动插件
来源:互联网 发布:appletv如何安装软件 编辑:程序博客网 时间:2024/04/30 05:25
这个是插件是在以前的插件的基础上修改的,主要是在IE6下的时候,如果被拖动的区域内容很多的时候,有select就有点托屏,就该成win下没有主题的拖动样式,下边是源码:
(function($){
$.fn.jqDrag = function(h,bf,ed){
return i(this, h, 'd',bf,ed);
};
$.fn.jqResize = function(h){
return i(this, h, 'r');
};
$.jqDnR = {
dnr: {},
e: 0,
ed:function(){},
drag: function(v){
if (M.k == 'd') {
var l = M.X + v.pageX - M.pX;
var t = M.Y + v.pageY - M.pY;
if (l < 0) {
l = 0;
}
else
if (l > (B.W - M.W)) {
l = B.W - M.W;
}
if (t < 0) {
t = 0;
}
else
if (t > (B.H - M.H)) {
t = B.H - M.H;
}
E.css({
left: l,
top: t
});
}
else {
E.css({
width: Math.max(v.pageX - M.pX + M.W, 0),
height: Math.max(v.pageY - M.pY + M.H, 0)
});
}
return false;
},
stop: function(){
ED(dt);
dt.css({
opacity: M.o,
top:E.offset().top,
left:E.offset().left
});
E.remove();
$().unbind('mousemove', J.drag).unbind('mouseup', J.stop);
}
};
var B = {
W: $(window).width(),
H: $(window).height()
};
var J = $.jqDnR;
var M = J.dnr;
var E;
var dt;
var ED= J.ed;
var i = function(e, h, k,bf,ed){
if(bf==undefined){
bf=function(){};
}
if(ed==undefined){
ed=function(){};
}
ED = ed;
return e.each(function(){
h = (h) ? $(h,e) : e;
h.bind('mousedown', {
e: e,
k: k
}, function(v){
var d = v.data, p = {};
dt = d.e;
bf(dt);
E=$('<div id="drag_div"></div>').appendTo(document.body)
.css({
position:'absolute',
top:dt.offset().top+'px',
left:dt.offset().left+'px',
width:dt.width()+'px',
height:dt.height()+'px',
border:'#DDD 3px solid'
});
// attempt utilization of dimensions plugin to fix IE issues
if (E.css('position') != 'relative') {
try {
E.position(p);
}
catch (e) {
}
}
M = {
X: p.left || f('left') || 0,
Y: p.top || f('top') || 0,
W: f('width') || E[0].scrollWidth || 0,
H: f('height') || E[0].scrollHeight || 0,
pX: v.pageX,
pY: v.pageY,
k: d.k,
o: E.css('opacity')
};
E.css({
opacity: 1
});
$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
return false;
});
});
}
var f = function(k){
return parseInt(E.css(k)) || false;
};
})(jQuery);
调用方式:$('#test').jqDrag($('#test1'));
演示地址:http://www.cssrain.cn/demo/win_drag/
(function($){
$.fn.jqDrag = function(h,bf,ed){
return i(this, h, 'd',bf,ed);
};
$.fn.jqResize = function(h){
return i(this, h, 'r');
};
$.jqDnR = {
dnr: {},
e: 0,
ed:function(){},
drag: function(v){
if (M.k == 'd') {
var l = M.X + v.pageX - M.pX;
var t = M.Y + v.pageY - M.pY;
if (l < 0) {
l = 0;
}
else
if (l > (B.W - M.W)) {
l = B.W - M.W;
}
if (t < 0) {
t = 0;
}
else
if (t > (B.H - M.H)) {
t = B.H - M.H;
}
E.css({
left: l,
top: t
});
}
else {
E.css({
width: Math.max(v.pageX - M.pX + M.W, 0),
height: Math.max(v.pageY - M.pY + M.H, 0)
});
}
return false;
},
stop: function(){
ED(dt);
dt.css({
opacity: M.o,
top:E.offset().top,
left:E.offset().left
});
E.remove();
$().unbind('mousemove', J.drag).unbind('mouseup', J.stop);
}
};
var B = {
W: $(window).width(),
H: $(window).height()
};
var J = $.jqDnR;
var M = J.dnr;
var E;
var dt;
var ED= J.ed;
var i = function(e, h, k,bf,ed){
if(bf==undefined){
bf=function(){};
}
if(ed==undefined){
ed=function(){};
}
ED = ed;
return e.each(function(){
h = (h) ? $(h,e) : e;
h.bind('mousedown', {
e: e,
k: k
}, function(v){
var d = v.data, p = {};
dt = d.e;
bf(dt);
E=$('<div id="drag_div"></div>').appendTo(document.body)
.css({
position:'absolute',
top:dt.offset().top+'px',
left:dt.offset().left+'px',
width:dt.width()+'px',
height:dt.height()+'px',
border:'#DDD 3px solid'
});
// attempt utilization of dimensions plugin to fix IE issues
if (E.css('position') != 'relative') {
try {
E.position(p);
}
catch (e) {
}
}
M = {
X: p.left || f('left') || 0,
Y: p.top || f('top') || 0,
W: f('width') || E[0].scrollWidth || 0,
H: f('height') || E[0].scrollHeight || 0,
pX: v.pageX,
pY: v.pageY,
k: d.k,
o: E.css('opacity')
};
E.css({
opacity: 1
});
$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
return false;
});
});
}
var f = function(k){
return parseInt(E.css(k)) || false;
};
})(jQuery);
调用方式:$('#test').jqDrag($('#test1'));
演示地址:http://www.cssrain.cn/demo/win_drag/
- jQuery模仿win拖动插件
- jQuery模仿win拖动插件
- Jquery拖动插件
- jQuery 表格拖动插件:tableDnD
- jquery 拖动排序插件tableDnD
- jquery插件:拖动任意层
- (jquery.drag) jquery拖动插件?方法
- Jquery拖动插件,可以任意拖动任意东西
- 拖动表头的一个jquery插件
- 基于jquery的html5简单拖动插件
- jquery拖动兼交换位置插件
- jQuery实现自由拖动DIV插件
- javascript 模仿windows拖动
- 模仿360buy商品比较的jquery插件
- 分享一个jquery插件-poshytip(模仿显示微博人的图像)
- 【jquery仿dataList】应用之——模仿igoogle【定制化、拖动排序,最大化、分屏】
- 模仿人人网 拖动滚动条到页面底端时加载新消息[AJAX、jQuery、web service]
- Jquery colResizable 插件 可拖动表格的宽度
- C#打印绘图
- DSP在电力系统同步交流采样中的应用
- Openfire源代码调试、编译开发环境
- jQuery的事件模式(翻译jQuery in action第四章6)
- MT6235
- jQuery模仿win拖动插件
- Windows 2008 IIS7 架设 NET1.1 WEB (aspx网站转移2008上时常会出出现错误哦)
- 工作流引擎(JBPM)实现企业内部信息化建设
- 社区里的微软面试题及我的解答(1)
- sql常见错误
- 推荐一个下载开源项目的网站
- 什么时候出第一个版本?
- tomcat 5日志配置笔记(解决中文乱码)
- C#操作IIS的代码