父级div妨碍了其子级的注意力

Question

I'm trying to make a simple plugin to be able to make a div draggable. Of course a div can have a content inside (typically a form) and it should be dragged with it.

Here is a prototype: http://jsfiddle.net/Xcb8d/539/

The problem is that the texbox inside this div never gets focus, so I cannot type in it:

<div id="draggable-element">Drag me!
<form>
    <input type="text" style="width:50px;"/>
    <button>ok</button><br><br>
    <input type="checkbox">check it</input>
 </form>
</div>

As you can see, this does not happen to other elements on the form. Checkbox can be regularily used, as well as the button.

In addition, I would like only the grey coloured area to be draggable, and not the inner elements. On this example, you can place the mouse cursor fully inside the textbox and start the drag of the whole parent div.

Answer 1

the onmousedown handler on the draggable element return false and there by stopping event propagation, allowing it will make the input focus-able and the dragging still works. (at least on chromium)

document.getElementById('draggable-element').onmousedown = function (e) {
    // memorize the offset to keep is constant during drag!
    x_offset = e.clientX - x_elem;
    y_offset = e.clientY - y_elem;    
    _drag_init(this);
    return true;
};

Answer 2

In your onmousedown handler you end with a return false . This prevents the click event from happening when you click on the input, and thus it never gets focus. What I think you are looking for is this:

// Bind the functions...
document.getElementById('draggable-element').onmousedown = function (e) {
    if (e.id == 'draggable-element') {
        // memorize the offset to keep is constant during drag!
        x_offset = e.clientX - x_elem;
        y_offset = e.clientY - y_elem;    
        _drag_init(this);
        return false;
    }
};

Answer 3

paradoxix's answer was correct in stating that the return false on the mousedown event is preventing the propagation of all other events.

On any element listening to the mousedown event you won't have any problems, because the event happens for them first, and only after for the box itself. But the input listens to the focus event, which never happens due to the return false in the box's event.

The solution is to prevent onmousedown from bubbling from the child elements into the box, like so:

var nodes = document.getElementById('draggable-element').childNodes;
for(var i=0; i<nodes.length; i++) {
    nodes[i].onmousedown = function(e) {
        e.stopPropagation();
    }
}

Working fiddle: http://jsfiddle.net/Xcb8d/546/