动态添加数据,实现从一个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;
					})
				}
			}
		})
	})
}

  

posted @ 2018-08-15 12:35  董七  阅读(1229)  评论(0编辑  收藏  举报