перетаскиваемая кнопка с помощью jQuery UI

Question

Я легко могу сделать перетаскиваемый элемент <div>, но не элемент <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>

Вид на JSFiddle

Answer 1

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

Answer 2

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

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

Answer 3

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

• input, textarea, button, select, option

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

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

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

Answer 4

похоже, что это ошибка jquery UI.

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

http://jsfiddle.net/CkKgD/

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

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

Answer 5

Наличие cancel:false следующего кода отменит событие щелчка по умолчанию:

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

HTML часть

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

Answer 6

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