Перетаскиваемая кнопка с использованием jQuery UI

Я могу легко создать элемент <div> draggable, но не элемент <button>. Как я могу перетащить <button> тоже?

$(init);

function init() {
  $('#makeMeDraggable1').draggable();
  $('#makeMeDraggable2').draggable();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>

<div id="makeMeDraggable1">Drag me!</div>
<button id="makeMeDraggable1">Drag me!</button>

Ответы

Ответ 1

Я не тестировал это сам, но у меня есть интуиция, что он будет иметь какое-то отношение к обработчику событий по умолчанию для мыши. Возможно, вы захотите поэкспериментировать с событием .preventDefault() внутри обработчика mousedown.

В качестве альтернативы вы можете обернуть кнопку в div, после чего вы draggable().

Ответ 2

Это не ошибка, используйте это, $('input[type=button]').draggable({cancel:false}); Вам нужно отменить событие click по умолчанию для кнопки.

Ответ 3

JQuery отключает перетаскивание от запуска по следующим элементам по умолчанию:

input, textarea, button, select, option

См. текущую спецификацию здесь: https://api.jqueryui.com/draggable/#option-cancel

Это (для меня) излишне упрямый и раздражающий. Но, к счастью, его легко отключить. Просто отрегулируйте параметр cancel. Например, следующая перетаскиваемая инициализация позволяет начать перетаскивание всех элементов, кроме .no-drag classes:

$ele.draggable({
    cancel : '.no-drag'
});

Ответ 4

выглядит как ошибка jquery ui.

с другим плагином для перетаскивания он работает:

http://jsfiddle.net/CkKgD/

Я нашел плагин здесь: http://devongovett.wordpress.com/2009/12/01/event-delegated-drag-and-drop-jquery-plugin/

и в первую очередь я использовал его из-за отсутствия поддержки делегирования в jquery-ui draggable.

Ответ 5

Вы можете сделать кнопку div похожим на кнопку с помощью CSS. Это то, что я делал большую часть времени в таких случаях.

Ответ 6

Имея cancel:false, следующий код отменит событие click по умолчанию:

$( "#btn1 " ).draggable({
   appendTo: "body",
   helper: "clone",
  cancel:false
});

Html часть

<input type="submit" id="btn1" value="button">