JQuery UI перетаскивать на элементах формы

Question

у меня есть элемент с некоторыми элементами форм в нем:

<div id="draggable"> 
    <button>Drag this</button> 
</div>​ 

Я делаю это перетаскивание с JQuery UI:

$('#draggable').draggable();​ 

и форма элемента занимает большую часть пространство в перетаскиваемом элемента:

#draggable { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #000; 
    background: #efe; 
    padding: 10px; 
} 
#draggable button { 
    width: 100px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; 
    background: rgba(0, 0, 0, .05); 
    border: none; 
}​ 

я могу нажать на DIV и перетащить его вокруг, но если я щелкая в элемент формы и пытаться перетащить, ничего не происходит. Попробуйте это: http://jsfiddle.net/ACQrg/

Я также попытался указание handle параметра 'button':

$('#draggable').draggable({ handle: 'button' });​ 

К сожалению, это не работает. Попробуйте это: http://jsfiddle.net/ACQrg/1/

Я также попытался передать событие MouseDown через к перетаскиваемому элементу:

$('#draggable').draggable() 
    .find('button').mousedown(function (e) { 
     $('#draggable').trigger(e); 
    }); 

УПРАЖНЕНИЯ: http://jsfiddle.net/ACQrg/4/

Есть ли способ сделать перетаскивать элементы перетаскиваемых по элементы формы, которые они содержат?

Answer 1

Это может произойти из-за того, что кнопка захватывает события кликов и не пузырится их. Попробуйте использовать другой внутренний элемент, например: http://jsfiddle.net/ACQrg/3/

Answer 2

Это может быть похоже на ответ Цачи, но в результате я создал мой оригинальный контейнер div, содержащий два div, один для моего окна ввода и один для моей кнопки , Это приятно тянет. Затем, позже, когда пользователь использует мою систему, я не в редакторе, поэтому, когда они нажимают на объект, я использую jquery, чтобы заменить divs на поле ввода и код кнопки. (Я прошу пользователю вводить их электронной почты и нажмите на кнопку отправить)

Так это выглядит, как это в моем режиме редактора:

<div id="holder"> 
    <div class="inputelem">Enter Email</div> 
    <div class="buttonelem">Submit</div> 
</div> 

Затем перенесите, что по желанию. На время выполнения, я делаю это:

$('#holder').html('<input class="inputelem" type="text" name="email"><input class="buttonelem" type="submit" value="submit">'); 

Единственный трюк, чтобы убедиться, что класс вы определили для inputelem и buttonelem выглядят одинаково на DIV, как они делают на элементе формы. Вид боли, но он работает.