页面上有时候会遇到需要某个节点移动的情况
这里提供一个jquery的移动插件
使用方法
$(移动控件节点||移动控件节点选择器).ElMove(需要移动的jQuery节点)
如
自己移动自己
$("#my").ElMove($("#my"))
自己的标题栏移动自己
$("#my .title").ElMove($("#my"))
(function ($){
/**
* @name 移动El v0.2
* @example $('移动控件').ElMove(需要移动的jQuery节点)
* @author hank
*/
$.fn.ElMove = function (PEl){
var my = $(this);
my.each(function (){
var now = $(this);
now.css({"cursor": "move"});
now.bind({"mousedown.ElMove":function (eve){
eve.preventDefault();
$(this).attr('is_elmove',"1");
},"mouseup.ElMove":function (){
$(this).attr('is_elmove',"0");
$(this).removeData('ElMove_pageXY');
},
"mousemove.ElMove":function (eve,myeve){
var moveMy = $(this);
if(!moveMy.is('[is_elmove="1"]'))
return;
if(typeof myeve !== 'undefined')
eve = myeve;
else
eve.stopPropagation();
var oldpageXY = moveMy.data('ElMove_pageXY');
var nowpageXY = {"X":eve.pageX,"Y":eve.pageY};
if(!oldpageXY){
oldpageXY = {"X":eve.pageX,"Y":eve.pageY};
}
var Mleft = nowpageXY.X - oldpageXY.X;
var Mtop = nowpageXY.Y - oldpageXY.Y;
moveMy.data('ElMove_pageXY',nowpageXY);
if(!PEl.is(':visible'))
return;
var nowOffset = PEl.offset();
if(PEl.css('position') == "fixed"){
PEl.css('position',"absolute");
PEl.offset(nowOffset);
}
PEl.offset({left:nowOffset.left+Mleft,top:nowOffset.top+Mtop});
if(Mleft != 0 || Mtop != 0)
PEl.trigger("ElMove");
},
"dragstart.ElMove":function (eve){
eve.preventDefault();
}
}).attr('data-Elmove-child','1');
});
PEl.attr('data-Elmove-parent','1');
return my;
};
$(function (){
$('body').bind({"mousemove.ElMove":function (eve){
var Elmove = $('[is_elmove="1"]');
if(Elmove.length > 0)
Elmove.each(function (){
$(this).triggerHandler('mousemove.ElMove',eve);
});
},"mouseup.ElMove":function (){
$('[is_elmove="1"]').attr('is_elmove',"0").removeData('ElMove_pageXY');
},
"mouseleave.ElMove":function (){
//移出body是否取消
//$('[is_elmove=1]').attr('is_elmove',"0").removeData('ElMove_pageXY');
}
});
});
})(jQuery);