jQuery UI, перетаскиваемый на элементах формы - PullRequest
Новая
       4

jQuery UI, перетаскиваемый на элементах формы

2 голосов
/ 26 марта 2012

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

<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/

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

Ответы [ 2 ]

0 голосов
/ 05 ноября 2013

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

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

<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 одинаково, как на элементе формы. Вид боли, но это работает.

0 голосов
/ 26 марта 2012

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

...