Hi, I am trying to work on a completely contenteditable page - that is, every element can be moved and(depending on the element) resized. Here is my code so far: To show my problem to you, I will give you my HTML code. Paste it into a HTML page and then read below.
<html> <head> <head> <style> <!-- .DraggableElement { position:relative; cursor:move } --> </style> <script language="JavaScript"> <!-- var CanMoveElement=false var myElement,x,y function MoveHTMLElement(){ if (event.button==1&&CanMoveElement){ myElement.style.pixelLeft=temp1+event.clientX-x myElement.style.pixelTop=temp2+event.clientY-y return false } } function Drag(){ if (!document.all) return CanMoveElement=true myElement=event.srcElement temp1=myElement.style.pixelLeft temp2=myElement.style.pixelTop x=event.clientX y=event.clientY document.onmousemove=MoveHTMLElement } document.onmousedown=Drag document.onmouseup=new Function("CanMoveElement=false") //--> </script> </head> </head> <body contenteditable=true> <input class="DraggableElement" contenteditable=true> </input> </body> </html>
Create a HTML page with that code. It looks fine. Now try moving the textbox. That works fine also. Now try RESIZING the textbox. You will see that it tries to move it as well as resize it, creating an ugly mess. This is my problem. Is there any way that I can get the above script to first check if the element is being resized? I know that there are complete scripts out there I could use, and I also know I could build in a Keyboard shortcut(like hold shift to resize it), but if at all possible I would like to keep this as simple as possible, and code it by myself(with the exception of this bit). Thanks for your help,cod.