Question

我正在尝试创建一个简单的插件，以便能够使div可拖动。当然div可以在里面有一个内容（通常是一个表单），它应该随之拖动。

问题是这个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

draggable元素上的onmousedown处理程序返回false，并通过停止事件传播，允许它使输入可聚焦并且拖动仍然有效。（至少在铬上）

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/

父母div阻碍了孩子的注意力

3 个答案: