web-dev-qa-db-fra.com

Comment invoquer par programme jQuery UI Draggable drag start?

Je crée un nouvel élément jQuery après que la souris est en position basse et avant qu'il ne soit libéré. (Après mousedown).

Je voudrais déclencher par programmation dragging sur le nouvel élément à l'aide de jQuery UI, afin qu'il commence automatiquement à glisser avec le mouvement de ma souris. Je ne veux pas avoir à relâcher puis à nouveau cliquer sur la souris.

J'ai essayé ce qui suit ...

var element = $("<div />");
element.appendTo("body").draggable().trigger("mousedown");

...Cependant, cela ne fonctionne pas.

Quelqu'un at-il des suggestions sur la façon d'accomplir cela?

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

$("body").on("mousedown", function(e) { 
  $("<div />").draggable().appendTo("body").trigger(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.

jquery-uijqueryjquery-ui-draggable
25
user1031947

Ceci est totalement un hack, mais il 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 plongeur

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.

4
NanoWizard

Le plugin draggable attend de ses événements mousedown qu'ils utilisent son espace de noms et pointent vers l'objet draggable comme 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 = $("<div />").draggable().appendTo("body");
  e.type = "mousedown.draggable";
  e.target = div[0];
  div.trigger(e);
});

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

6
fuzzyBSc

Créez votre fonction glissable au survol de la souris

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

L'initialisation glissable étant déjà effectuée, votre premier clic de souris sera pris en compte

3
sdespont

Vous devez lier l'événement mousedown à l'élément en question, puis vous pouvez déclencher l'événement.

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

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 cependant être déclenchés manuellement avec la méthode .trigger (). Un appel à .trigger () exécute les gestionnaires dans le même ordre qu'ils le seraient si l'événement était déclenché naturellement par l'utilisateur:

$('#foo').bind('click', function() {
      alert($(this).text());
    });
    $('#foo').trigger('click');
1
Jay Blanchard

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 auquel se produit le mousedown et utiliser la propriété helper draggable pour créer un helper qui sera votre nouvel élément. Sur dragStop, clonez l'assistant à l'emplacement souhaité dans dom.

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

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

0
Maciej Krawczyk