Question

I have this code http://jsfiddle.net/xNHKP/6/ (not working in the fiddle for some reason which i dont get, but it works on my site – http://bit.ly/JV5I0Z )

What i want is that the contact form (click last menu item to make it appear) can be dragged, but when someone drags or clicks on the text fields, they do not gain focus and so you can’t type in them. Ironically, it works on internet explorer.

So how can i make the fields gain focus when clicked on? I don’t mind making them non-draggable.

Thanks

edit: code below (tried to keep it as simple as possible, including only the relevant stuff)

dragDrop = {
initialMouseX: undefined,
initialMouseY: undefined,
startX: undefined,
startY: undefined,
draggedObject: undefined,

initElement: function (element) {
    if (typeof element == 'string')
        element = document.getElementById(element);
    element.onmousedown = dragDrop.startDragMouse;
}}

<form id="contactForm" onSubmit="return sendMail();">
  <textarea id="message" rows="8"></textarea>
</form>

<script type="text/javascript">
  dragDrop.initElement(document.getElementById('contactForm'));
</script>

Answer 1

Okay, seems you’re struggling with it, here’s what would I do considering what you want :

• addEventlistener to your form, make it not bubble so if you click on an inner element it doesn’t trigger.
• let every inner element live it’s life like usual, don’t try to add messy events on them.

If you really want/need the user to be able to drag the form by dragging on a label or something you should explicitely filter what are the draggable elements. Then you can go back to a bubbling event and filter out what’s not draggable. If it’s not draggable, don’t do anything else than a return so you don’t have trouble with text selection.

Here’s a fiddle