javascript - 父 div 阻碍了它的 child 的焦点

Question

我正在尝试制作一个简单的插件来使 div 可拖动。当然，一个 div 可以包含一个内容(通常是一个表单)，它应该被拖动。

这是一个原型(prototype):http://jsfiddle.net/Xcb8d/539/

问题是这个 div 中的 texbox 永远不会获得焦点，所以我不能在里面输入:

<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 处理程序返回 false 并在那里停止事件传播，允许它使输入可聚焦并且拖动仍然有效。 (至少在 Chrome 上)

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