Comment programmatically invoquer jQuery UI draggable drag start?
je crée un nouvel élément jQuery après que la souris soit en position "down" et avant qu'il ne soit libéré. (Après mousedown).
je voudrais programmatiquement déclencher dragging sur le nouvel élément en utilisant jQuery UI, de sorte qu'il commencera automatiquement à glisser avec mon mouvement de souris. Je ne veux pas avoir à relâcher et puis cliquez à nouveau sur la souris.
j'ai essayé ce qui suit...
var element = $("<div />");
element.appendTo("body").draggable().trigger("mousedown");
...cependant, cette ne fonctionne pas.
est-ce que quelqu'un a des suggestions sur la façon d'accomplir ceci?
mise à jour: après quelques recherches sur l'affiche de cette question a le même problème. Toutefois, 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 plutôt un appel Maximum Pile Dépassé erreur.
5 réponses
C'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);
}
});
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 draggable s'attend à ce que ses évènements mousedown utilisent son espace de noms et pointent vers l'objet draggable comme cible. Modifier 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 /
Créer votre déplaçable la fonction mouseover
$('#futureDragableElement').mouseover(function() {
$(this).draggable();
});
comme l'initialisation égalisable a déjà été faite, votre premier clic de souris sera pris en compte
Vous devez lier l'événement mousedown pour l'élément en question, 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'un de ses raccourcis les méthodes sont déclenchées lorsque l'événement se produit. Ils peuvent être tiré manuellement, cependant, avec l' .méthode trigger (). Un appel à .trigger() exécute les gestionnaires dans le même ordre ce serait le cas si l'événement a été déclenché naturellement par l'utilisateur:
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
Hacks ne sont pas nécessaires si vous créez l'élément pendant l'événement et cet élément n'est pas trop compliqué. Vous pouvez simplement définir draggable à l'élément que mousedown se produit et utiliser la propriété draggable helper pour créer un helper qui va être votre nouvel élément. Sur dragStop cloner l'assistant à l'emplacement dans dom que vous voulez.
$('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 devez définir la position de l'Assistant, donc la souris est dessus. C'est juste un exemple de base.