拖放禁用的输入文本字段！帮我？

Question

我在容器中有一个输入文本字段。 这个容器是可拖动的，但现在我不能再将文本输入文本字段了。 可能是因为您必须在文本字段内单击才能输入， 现在鼠标按下意味着拖动！

或许它的东西完全不同

有谁知道我怎么解决这个问题？ 提前致谢

你可以在这里检查代码，但它几乎...... http://www.jsfiddle.net/AVG5a/

Answer 1

将此添加到appendFunction：

document.getElementById("inputId0").addEventListener("mousedown", function(e) {
    e.stopPropagation();
}, false);

这将取消ID为mousedown的元素的inputId0个事件。

Answer 2

使用jQuery ^[docs] 和jQuery UI ^[docs] 。 我差不多完成了转换为jQuery的工作，当我完成它时，我会发布一个jsFiddle链接。

在这里：http://jsfiddle.net/pswRh/

在学习了jQuery和jQuery UI之后，很容易使元素可拖动，并且 - 可选 - 禁止使用指定的子元素拖动它。

<强> HTML

<div id='myDiv'>
    <img src='http://dummyimage.com/100x100.png' id='pic' />
    <input id='textInput' />
</div>

CSS （可选）

#myDiv {
    width: 150px;
    height: 200px;
    border: 1px solid;
    background: blue;
    color: white;
}

<强>的JavaScript

$('#myDiv').draggable({
    cancel: '#textInput'
});

瞧！你刚刚创建了一个可拖动的div，但你仍然可以输入输入字段，因为它不会拖动元素。

或者，您可以指定句柄。这样，您只能使用指定的子项拖动div。

HTML，CSS

与之前的

相同

<强>的JavaScript

$('#myDiv').draggable({
  handle: '#pic'
});

指定以逗号分隔的多个元素（即'#el1, #el2, #el3'）。