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

news/2024/7/10 22:42:24 标签: jquery, js, 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);


http://www.niftyadmin.cn/n/1448128.html

相关文章

JavaScript初应用:找到数组中出现最多的字母并给出个数以及每一个所在的位置...

刚刚接触JS一周的时间,熟悉了最基本的js知识,这是自己面对的第一个js的逻辑性的代码题目,自己尝试了写了,结果还算可以,因为有好多知识涉及到了后面的dom知识,就有点吃力了。以下代码总结于网上前辈给出的参…

编程之美 1.2中国象棋将帅问题

题目: 下过中国象棋的朋友都知道,双方的“将”和“帅”相隔遥远,并且它们不能照面。在象棋残局中,许多高手能利用这一规则走出精妙的杀招。假设棋盘上只有“将”和“帅”二子(如图1-3 所示)(为了…

免费午餐 用活系统配置实用程序(转)

初学者在使用电脑过程中,肯定会碰到各种各样的问题:如怎么管理电脑的自启动程序、如何查看加载的系统服务、怎样从安装光盘提取丢失的系统文件等。为了解决类似问题,微软在系统中提供了一个实用工具——系统配置实用程序(Msconfig…

Codeforces 460A Vasya and Socks(水题)

题目链接&#xff1a;Codeforces 460A Vasya and Socks 题目大意&#xff1a;Aasya有n双新袜子&#xff0c;他妈每m天给他买一双新袜子&#xff0c;问不洗袜子的话能连续多少天有袜子穿。 解题思路&#xff1a;水题&#xff0c;注意取整后的余数。 #include <cstdio> #i…

Git使用手册

一下博文为全文出处&#xff0c;其它分支表明我学习到那一章节 http://blog.csdn.net/javafreely/article/details/18217273转载于:https://www.cnblogs.com/oscar1987121/p/5110282.html

OkHttpUtils java post 异步post 提交

工具 package com.wjj.application.util;import com.alibaba.fastjson.JSON; import okhttp3.*; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Component;import java.io.IOException; import java.net.URLEncoder; impo…

LCID地区代码(转)

语言 LCID 阿拉伯语&#xff08;沙特阿拉伯&#xff09; 1025 中文&#xff08;香港&#xff09; 3076 中文&#xff08;中国&#xff09; 2052 中文&#xff08;台湾&#xff09; 1028 克罗地亚语 1050 捷克语 1029 丹麦语 1030 荷兰语&#xff08;标准&#xff09; 1043 英语…

Cygwin安装时,选择163的源后出错:Unable to get setup.ini from http://mirrors.163.com/cygwin/...

【问题】 折腾&#xff1a; 【记录】Cygwin下把make从v3.82换成v3.81 期间&#xff0c;选择了163的源&#xff0c;结果出错&#xff1a; Cygwin Setup Unable to get setup.ini from <http://mirrors.163.com/cygwin/>如图&#xff1a; 【解决过程】 1.去 http://mirrors…