Programmgesteuertes Starten von jQuery UI Draggable Drag Start?

Question

Ich erstelle ein neues jQuery-Element, nachdem sich die Maus in einer unteren Position befindet und bevor sie freigegeben wird. (Nach dem Mausklick).

Ich möchte programmgesteuert dragging auf das neue Element mit jQuery UI auslösen, so dass es automatisch mit meiner Mausbewegung zu ziehen beginnt. Ich möchte nicht loslassen und dann noch einmal mit der Maus klicken.

ich folgendes versucht haben ...

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

... aber das funktioniert nicht.

Hat jemand irgendwelche Vorschläge, wie dies zu erreichen ist?

---

UPDATE: Nach einigem das Plakat von this question Suche hat das gleiche Problem. Allerdings ist die vorgeschlagene Lösung, die läuft darauf hinaus ...

$("body").on("mousedown", function(e) { 
    $("<div />").draggable().appendTo("body").trigger(e); 
}); 

... funktioniert nicht mehr in den neuesten Versionen von jQuery und jQuery-UI und stattdessen erzeugt ein Maximum Call Stack überschritten Fehler.

Answer 1

Das ist völlig ein Hack, aber es scheint, den Trick zu tun:

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); 
    } 
    }); 

Here's the plunker

Mein Beispiel verwendet ein Element, das bereits statt existiert einen zu erstellen, aber es sollte ähnlich funktionieren.

Answer 2

Sie müssen das mousedown -Ereignis an das betreffende Element binden, dann können Sie das Ereignis auslösen.

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

Irgendwelche mit .bind angebracht Ereignishandler() oder eines ihrer Verknüpfung Verfahren ausgelöst werden, wenn das entsprechende Ereignis auftritt. Sie können jedoch manuell mit der Methode .trigger() ausgelöst werden. Ein Aufruf von .trigger() führt die Handler in der gleichen Reihenfolge, würden sie, wenn das Ereignis natürlich durch den Benutzer ausgelöst wurde:

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

Answer 3

Ihre ziehbar Funktion mit der Maus darüber erstellen

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

Da die ziehbare Initialisierung bereits erfolgt ist, wird Ihr erster Mausklick berücksichtigt.

Answer 4

Das ziehbare Plugin erwartet seine mousedown Ereignisse an uns n seinen Namensraum und auf das ziehbare Objekt als Ziel zeigen. Das Ändern dieser Felder im Ereignis funktioniert mit jQuery 1.8.3 und 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); 
}); 

Demo hier: http://jsfiddle.net/maCmB/1/

Answer 5

Hacks sind nicht erforderlich, wenn Sie das Element während des Ereignisses erstellen und dieses Element nicht zu kompliziert ist. Sie können für das Element, das mousedown ausführt, einfach ziehbare Elemente festlegen und mithilfe der ziehbaren helper-Eigenschaft einen Helper erstellen, der Ihr neues Element sein wird. Bei dragStop klonen Sie den Helfer an die gewünschte Stelle in dom.

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

Natürlich müssten Sie die Position für den Helfer festlegen, also ist die Maus dran. Dies ist nur ein sehr einfaches Beispiel.