• 动态添加数据,实现从一个div(A)拖到另一个div(B),在B中随意拖动,放在B中任意地方


    function tuozhuai(){
    	var box2 = document.getElementById("box2");
    	var box3 = document.getElementById("box3");
    	var endpointX = box2.offsetLeft; //+200
    	var endpointY = box2.offsetTop; //+300
    	console.log("endPointX"+endpointX);
    	console.log(document.getElementById("box2").clientWidth);
    	$(".td1").each(function(index, item) {
    		var id = $(this).attr("id");
    		var td1 = document.getElementById(id);
    		console.log("id+"+id);
    		$(this).mousedown(function(e) {
    			console.log($(this));
    			var td = $(this);
    			e.preventDefault();
    			//		alert($(this).attr("id"));
    			console.log("11111:" + e.clientX);
    			document.onmouseover = function(e) {
    				console.log("M:" + e.clientX);
    				if(e.clientX > endpointX && e.clientX < (endpointX + 800)) {
    					console.log("eventX:"+e.clientX);
    //					console.log(index);
    					td.attr("id", "tt" + id);
    //					console.log("offsetP:" + td1.offsetWidth);
    					$("#box3").append(td);
    					$("#box3").find("#tt" + id).mousedown(function(e) {
    						var box = document.getElementById("#box" + id);
    						//						console.log("boxOffset:"+box.offsetWidth);
    						e.preventDefault();
    						//						alert($(this).attr("id"));
    						var evnt = e || event; // 得到鼠标事件
    						disX = evnt.clientX - td1.offsetLeft; // 鼠标横坐标 - div1的left
    						disY = evnt.clientY - td1.offsetTop; // 鼠标纵坐标 - div1的top
    	
    						//				        console.log("box:"+box.offset().left);
    						// 鼠标移动时
    						document.onmousemove = function(e) {
    							var evnt = e || event;
    							var x = evnt.clientX - disX;
    							var y = evnt.clientY - disY;
    							var window_width = document.getElementById("box2").clientWidth - td1.offsetWidth;
    							var window_height = document.getElementById("box2").clientHeight - td1.offsetWidth;
    	
    							x = (x < 0) ? 0 : x; // 当div1到窗口最左边时
    							x = (x > window_width) ? window_width : x; // 当div1到窗口最右边时
    							y = (y < 0) ? 0 : y; // 当div1到窗口最上边时
    							y = (y > window_height) ? window_height : y; // 当div1到窗口最下边时
    	
    							//				            box.css({"left":x+'px',"top":y+'px'});
    	
    							td1.style.left = x + "px";
    							td1.style.top = y + "px";
    						}
    	
    						// 鼠标抬起时
    						document.onmouseup = function() {
    							document.onmousemove = null;
    							document.onmouup = null;
    						};
    						return false;
    					})
    				}
    			}
    		})
    	})
    }
    

      

  • 相关阅读:
    Maven---右键Servlet模板
    付宇泽 20191128-1 总结
    付宇泽20191121-1 每周例行报告
    付宇泽20191114-1 每周例行报告
    安装tensorflow时出现找不到模块问题
    罗杨美慧 20191128-1 总结
    罗杨美慧 20191121-1 每周例行报告
    罗杨美慧 20191114-1 每周例行报告
    罗杨美慧 20191107-1 每周例行报告
    罗杨美慧 20191031-1 每周例行报告
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/9480732.html
Copyright © 2020-2023  润新知