这个是插件是在以前的插件的基础上修改的,主要是在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/