FAQ Posted June 18, 2007 Share Posted June 18, 2007 I'm playing around with creating drag and drop items with html DOM but seem to be having some issues. This script works just fine except for a few annoying problems. As you drag around the elements, text in and around the element gets highlighted as you move. If you grab the text specifically, the element won't move when you drag the mouse up to the toolbars. It just stops where it met the toolbars initially.I thought about solving this problem just by adding a new div of the exact same side with 0 opacity and use that to move the elements but I think I'd have to go through and change the zindex of all the children nodes then. Anybody have any better ideas? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>testSite</title> <link href="file:///C:/Documents%20and%20Settings/Sean/Desktop/testSite/testSiteStyle.css" rel="stylesheet" type="text/css" /><script type="text/javascript">z = 0;function box() { var newDiv; var myWindow = document.getElementById("window"); newDiv = document.createElement("div"); newDiv.id = "displayBox"; newDiv.onmousedown = function(evt) { return mouseDown(newDiv, evt?evt:window.event);} newDiv.style.zIndex = z; z = z + 1; var newP; newP = document.createElement("p"); newP.innerHTML = "#hello" newDiv.appendChild(newP); myWindow.appendChild(newDiv);}var myObj = null;var myObjX = 0;var myObjY = 0;function mouseDown(obj, evt) { myObj = obj; myObj.style.zIndex = z; z = z + 1; myObj.style.opacity = .25; // Calculate the offset myObjX = evt.clientX - myObj.offsetLeft; myObjY = evt.clientY - myObj.offsetTop;}function mouseMove(evt) { myObj.style.opacity = .25; myObj.style.left = Math.min(Math.max(evt.clientX - myObjX, 0), 500) + "px"; myObj.style.top = Math.min(Math.max(evt.clientY - myObjY, 0), 300) + "px";}function mouseUp(evt) { myObj.style.opacity = .75; myObj.style.left = Math.min(Math.max(evt.clientX - myObjX, 0), 500) + "px"; myObj.style.top = Math.min(Math.max(evt.clientY - myObjY, 0), 300) + "px"; myObj = null;}</script></head><body> <script type="text/javascript"> document.onmousemove = function(evt) { return mouseMove(evt?evt:window.event);} document.onmouseup = function(evt) { return mouseUp(evt?evt:window.event);} </script> <div id="window"> <a href="java script:box()">create box</a> </div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.