jquery插件 使任何可见节点移动 节点移动

3 篇文章 0 订阅
2 篇文章 0 订阅

 页面上有时候会遇到需要某个节点移动的情况

这里提供一个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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值