Pregunta botón arrastrable usando jQuery UI


Puedo hacer un <div> elemento arrastrable, pero no un <button> elemento. ¿Cómo puedo hacer que <button> arrastrable, también?

$(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>

Ver en JSFiddle


11
2017-07-29 14:59


origen


Respuestas:


No lo he probado yo mismo, pero tengo la intuición de que tendrá algo que ver con el manejador de eventos predeterminado de un botón para mousedown. Es posible que desee experimentar con el evento.preventDefault() dentro de un controlador de mousedown.

Alternativamente, puede ajustar el botón en un div que luego draggable().


7
2017-07-29 15:08



No es un error, usa esto, $('input[type=button]').draggable({cancel:false});  Debe cancelar el evento de clic predeterminado del botón.


46
2018-02-02 07:18



JQuery deshabilita las demoras para que no se inicien en los siguientes elementos de forma predeterminada:

  • input, textarea, button, select, option

Vea la especificación actual aquí: https://api.jqueryui.com/draggable/#option-cancel

Esto es (para mí) innecesariamente obstinado y molesto. Pero afortunadamente es fácil de desactivar. Simplemente ajusta el cancel opción. Por ejemplo, la siguiente inicialización arrastrable permite que los arrastres comiencen en todos los elementos excepto .no-drag clases:

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

3
2017-07-21 06:03



parece que es un error de jquery ui.

con otro complemento arrastrable funciona:

http://jsfiddle.net/CkKgD/

Encontré el complemento aquí: http://devongovett.wordpress.com/2009/12/01/event-delegated-drag-and-drop-jquery-plugin/

y en primer lugar, lo utilicé debido a la falta de apoyo de la delegación en jquery-ui draggable.


1
2017-07-29 15:30



Puedes hacer que un div parezca un botón usando CSS. Eso es lo que hice la mayoría del tiempo en ese tipo de casos.


0
2017-07-29 15:02



Teniendo cancel:false el siguiente código cancelaría el evento click predeterminado:

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

Parte Html

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

0
2018-06-18 14:06