Come richiamare a livello di codice jQuery UI Inizio trascinamento trascinabile?

Question

Creo un nuovo elemento jQuery dopo che il mouse si trova in una posizione abbassata e prima che venga rilasciato. (Dopo il mouse).

Vorrei attivare a livello di codice dragging sul nuovo elemento utilizzando l'interfaccia utente di jQuery, in modo che inizi automaticamente il trascinamento con il movimento del mouse. Non voglio dover rilasciare e quindi fare nuovamente clic con il mouse.

Ho provato la seguente ...

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

... tuttavia questo non funziona.

Qualcuno ha qualche suggerimento su come realizzare questo?

---

UPDATE: Dopo qualche ricerca il manifesto del this question ha il problema identico. Tuttavia la soluzione proposta, che si riduce a ...

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

... non funziona più nelle ultime versioni jQuery e jQuery UI-, e invece genera un errore superato Massimo Stack di chiamate.

Answer 1

Questo è totalmente un hack, ma sembra di fare il trucco:

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

Il mio esempio utilizza un elemento già esistente invece di crearne uno, ma dovrebbe funzionare allo stesso modo.

Answer 2

È necessario associare l'evento Mousedown all'elemento in questione, quindi è possibile attivare l'evento.

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

Eventuali gestori di eventi associati con .bind() o uno dei suoi metodi scorciatoia vengono attivati ​​quando si verifica l'evento corrispondente. Possono essere attivati ​​manualmente, tuttavia, con il metodo .trigger(). Una chiamata a .trigger() esegue i gestori nello stesso ordine in cui sarebbe se l'evento sono stati innescato naturalmente dall'utente:

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

Answer 3

Crea il tuo funzione trascinabili al passaggio del mouse

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

Poiché l'inizializzazione trascinabile è già stata eseguita, il tuo primo clic del mouse verrà preso in considerazione

Answer 4

Il plug-in trascinabile si aspetta che i suoi eventi relativi ai mousownown e il suo spazio dei nomi e per indicare l'oggetto trascinabile come bersaglio. La modifica di questi campi nell'evento funziona con jQuery 1.8.3 e 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 qui: http://jsfiddle.net/maCmB/1/

Answer 5

Hacks non sono necessari se si sta creando l'elemento durante l'evento e quell'elemento non è troppo complicato. Puoi semplicemente impostare l'elemento trascinabile che si verifica e utilizzare la proprietà helper trascinabile per creare un helper che diventerà il tuo nuovo elemento. Su dragStop clona l'helper nella posizione desiderata.

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

Naturalmente si avrebbe bisogno di impostare la posizione per l'aiuto, così mouse è su di esso. Questo è solo un esempio di base.