Перетаскивание отключает ввод текстового поля! Помоги мне?

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

И вуаля! Вы только что сделали divgable div, но вы все равно можете ввести поле ввода, так как оно не будет перетаскивать элемент.

В качестве альтернативы вы можете указать ручку. Таким образом, вы можете перетащить div только с указанным дочерним элементом.

HTML, CSS

же, как и предыдущий

JavaScript

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

Указать несколько элементов, разделенных запятой (т.е. '#el1, #el2, #el3').

Answer 2

Добавьте к этому appendFunction:

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

Это отменит mousedown события для элемента с идентификатором inputId0.