Родительский div препятствует фокусировке своего ребенка

Question

Я пытаюсь сделать простой плагин, чтобы иметь возможность перетаскивать div. Разумеется, у div может быть содержимое внутри (обычно это форма), и его нужно перетаскивать.

Вот прототип: http://jsfiddle.net/Xcb8d/539/

Проблема заключается в том, что texbox внутри этого никогда Div не получает фокус, поэтому я не могу набрать в нем:

<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> 

Как вы можете видеть, это не происходит к другим элементам формы. Флажок можно использовать регулярно, а также кнопку.

Кроме того, я бы хотел, чтобы только серый цвет области был перетаскиваемый, а не внутренние элементы. В этом примере вы можете поместить курсор мыши в текстовое поле и начать перетаскивание всего родительского div.

Answer 1

OnMouseDown обработчик на перетаскиваемом элемент возвращают ложные и там, остановив распространение событий, позволяя это сделать фокус ввода-состоянии и увлекая все еще работает. (По крайней мере, на хроме) ответ

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

В вашем onmousedown обработчике вы заканчиваете return false. Это предотвращает событие щелчка, когда вы нажимаете на вход, и, таким образом, он никогда не фокусируется. То, что я думаю, что вы ищете это:

// 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 был прав, утверждая, что return false на mousedown мероприятия является предотвращение распространения всех других событий.

На любом элементе, который слушает событие mousedown, у вас не возникнут проблемы, потому что событие происходит для них сначала, и только после этого для самого окна. Но вход прослушивает событие focus, которое никогда не происходит из-за return false в событии коробки.

Раствор для предотвращения onmousedown от барботирования из дочерних элементов в поле, например, так:

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

Работы скрипка: http://jsfiddle.net/Xcb8d/546/