1. 程式人生 > >jquery外掛 使任何可見節點移動 節點移動

jquery外掛 使任何可見節點移動 節點移動

 頁面上有時候會遇到需要某個節點移動的情況

這裡提供一個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);