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; }) } } }) }) }