Comment appeler par programme jQuery UI Draggable Drag start?

Je crée un nouvel élément jQuery une fois que la souris est abaissée et avant de la relâcher. (Après la souris).

Je souhaiterais déclencher par programme le dragging sur le nouvel élément à l’aide de l’interface utilisateur jQuery, afin qu’il commence automatiquement à glisser avec le mouvement de la souris. Je ne veux pas avoir à relâcher puis à nouveau cliquer avec la souris.

J’ai essayé ce qui suit …

 var element = $(""); element.appendTo("body").draggable().sortinggger("mousedown");

…Cependant, cela ne fonctionne pas.

Quelqu’un a-t-il des suggestions sur la manière d’accomplir cela?

MISE À JOUR: Après quelques recherches, l’affiche de cette question pose le même problème. Cependant, la solution proposée, qui se résume à …

 $("body").on("mousedown", function(e) { $("").draggable().appendTo("body").sortinggger(e); });

… ne fonctionne plus dans les dernières versions, jQuery et jQuery-UI, et génère à la place une erreur Maximum Call Stack Exceeded.

C’est totalement un bidouillage, mais cela semble faire l’affaire:

  var myDraggable = $('#mydraggable').draggable(); // Yeah... we're going to hack the widget var widget = myDraggable.data('ui-draggable'); var clickEvent = null; myDraggable.click(function(event){ if(!clickEvent){ widget._mouseStart(event); clickEvent = event; } else { widget._mouseUp(event); clickEvent = null; } }); $(document).mousemove(function(event){ console.log(event); if(clickEvent){ // We need to set this to our own clickEvent, otherwise // it won't position correctly. widget._mouseDownEvent = clickEvent; widget._mouseMove(event); } });

Voici le plunker

Mon exemple utilise un élément qui existe déjà au lieu d’en créer un, mais il devrait fonctionner de la même manière.

Le plugin déplaçable s’attend à ce que ses événements mousedown utilisent son espace de noms et pointent vers l’object déplaçable en tant que cible. La modification de ces champs dans l’événement fonctionne avec jQuery 1.8.3 et jQuery UI 1.9.2.

 $("body").on("mousedown", function(e) { var div = $("
").draggable().appendTo("body"); e.type = "mousedown.draggable"; e.target = div[0]; div.sortinggger(e); });

Démo ici: http://jsfiddle.net/maCmB/1/

Créez votre fonction glissable au passage de la souris

 $('#futureDragableElement').mouseover(function() { $(this).draggable(); });

Comme l’initialisation déplaçable a déjà été effectuée, votre premier clic de souris sera pris en compte

Vous devez lier l’événement mousedown à l’élément en question pour pouvoir déclencher l’événement.

De http://api.jquery.com/sortinggger/

Tous les gestionnaires d’événements attachés avec .bind () ou l’une de ses méthodes de raccourci sont déclenchés lorsque l’événement correspondant se produit. Ils peuvent toutefois être activés manuellement avec la méthode .sortinggger (). Un appel à .sortinggger () exécute les gestionnaires dans le même ordre que si l’événement était déclenché naturellement par l’utilisateur:

 $('#foo').bind('click', function() { alert($(this).text()); }); $('#foo').sortinggger('click');

Les hacks ne sont pas nécessaires si vous créez l’élément pendant l’événement et que cet élément n’est pas trop compliqué. Vous pouvez simplement définir draggable sur l’élément qui survient et mousedown et utiliser la propriété draggable helper pour créer un helper qui sera votre nouvel élément. Sur dragStop, clonez l’assistant à l’emplacement de votre choix.

 $('body').draggable({ helper: function() { return 'your newly created element being dragged
'; }, stop: function (e,ui) { ui.helper.clone().appendTo('body'); } });

Bien sûr, vous devez définir la position de l’aide, donc la souris est dessus. Ceci est juste un exemple très basique.