拖放禁用輸入文本框！幫我？

Question

我有一個容器內的輸入文本框。 這個容器是可拖動的，但現在我不能再輸入文本到文本框中了。 可能因爲您必須在文本框內單擊以鍵入， 現在鼠標向下意味着拖動！

或者，也許它的東西完全地不同

有誰知道我可以解決這個問題？ 在此先感謝

，你可以在這裏檢查代碼，但它非常.. http://www.jsfiddle.net/AVG5a/

Answer 1

使用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，但仍然可以輸入輸入字段，因爲它不會拖動該元素。

或者，您可以指定一個句柄。這樣，你只能拖動指定的孩子的股利。

HTML，CSS

相同先前

的JavaScript

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

指定由逗號（即'#el1, #el2, #el3'）分離的多個元件。

Answer 2

一下添加到appendFunction：

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

這將取消0​​事件與ID的元素inputId0。