glisser le bouton à l'aide de jQuery UI

Je peux facilement faire un <div> élément déplaçable, mais pas un <button> élément. Comment puis-je faire la <button> déplaçable, trop?

JS:

$(init);

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

HTML:

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

Vue sur JSFiddle

InformationsquelleAutor Randomblue | 2011-07-29
  1. 7

    Je n'ai pas testé moi-même, mais j'ai l'intuition qu'il y aura quelque chose à faire avec un bouton par défaut du gestionnaire d'événements pour les événements mousedown. Vous pouvez essayer de l'événement.preventDefault() à l'intérieur d'un mousedown gestionnaire.

    Sinon, vous pouvez envelopper le bouton dans un div que vous, alors draggable().

    • Le <div> astuce ne semble pas fonctionner: jsfiddle.net/q8a7D/22
    • Vous ne pouvez pas faire glisser le bouton, seule la div: si vous cliquez légèrement à droite du bouton, vous devriez voir ça. Ce que cela suggère est que le gestionnaire d'événements sur le bouton est certainement interférer, alors vous avez probablement besoin de l'annuler.
    • Je bifurquais votre violon et cela fonctionne maintenant jsfiddle.net/q8a7D/112
    • forum.jquery.com/topic/draggable-button
    InformationsquelleAutor Bobby Jack
  2. 50

    Ce n'est pas un bug , l'utiliser, le $('input[type=button]').draggable({cancel:false});
    Vous devez annuler le défaut événement click du bouton.

    • A très bien fonctionné pour moi. Merci!
    • +1 certainement la meilleure solution!
    • qui est la logique?
    • Pourquoi n'est-ce pas la accepté de répondre?
    • cela a résolu mon problème aussi.Donc c'est vraiment le corrrect réponse.
    InformationsquelleAutor ravi
  3. 3

    JQuery désactive la traîne de départ sur les éléments suivants par défaut:

    • input, textarea, button, select, option

    Voir les spec ici: https://api.jqueryui.com/draggable/#option-cancel

    C'est (pour moi) inutilement opiniâtre et ennuyeux. Mais heureusement, il est facile à désactiver. Il suffit de régler la cancel option. Par exemple, la suite déplaçable d'initialisation permet traîne pour démarrer sur tous les éléments, à l'exception .no-drag classes:

    $ele.draggable({
    cancel : '.no-drag'
});
    InformationsquelleAutor tohster
  4. 1

    ressemble à un jquery ui bug.

    avec un autre déplaçable plugin, il fonctionne:

    http://jsfiddle.net/CkKgD/

    J'ai trouvé le plugin ici:
    http://devongovett.wordpress.com/2009/12/01/event-delegated-drag-and-drop-jquery-plugin/

    et, en premier lieu, je l'ai utilisé en raison de l'absence de prise en charge la délégation de jquery-ui déplaçable.

    InformationsquelleAutor BiAiB
  5. 0

    Vous pouvez faire un div ressembler à bouton à l'aide de CSS. C'est ce que j'ai fait la plupart du temps dans ce genre de cas.

    • Comment voulez-vous faire une telle chose? Pourriez-vous nous donner un exemple de code?
    • Vous pourriez être en mesure d'obtenir ce travail, mais notez que ce n'est pas idéal, car il est beaucoup moins sémantique et vous aurez à le faire personnalisé de gestion des événements, etc. Beaucoup mieux pour résoudre le problème
    • Vrai! Mais je suis toujours intéressé à voir Taesung l'approche de vivre.
    InformationsquelleAutor Tae-Sung Shin
  6. 0

    Avoir cancel:false code suivant devrait annuler la valeur par défaut cliquez sur l'événement:

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

    Partie Html

    <input type="submit" id="btn1" value="button">
    InformationsquelleAutor Abdul Basit