2013-04-02 13 views
9

Provare a passare un oggetto jQuery alla proprietà dataTransfer durante una sequenza di trascinamento/rilascio. Dopo aver aggiunto la proprietà alla matrice jQuert.event.props, sono in grado di assegnarla, ma restituisce un valore non definito durante l'evento drop. Non sono sicuro di cosa mi manchi qui - sembra davvero semplice.jQuery passa elemento alla proprietà dataTransfer

Javascript:

function dragClip(clip, event){ 

    event.dataTransfer.el = clip; 

    /* Console confirms event.dataTransfer.el is the jQuery object */ 
} 

function dropClip(target, event){ 

    target.append(event.dataTransfer.el); 

    /* event.dataTransfer.el no longer has the object... where'd it go?? */ 
} 

jQuery.event.props.push('dataTransfer'); 

$('#titles') 
    .bind('dragenter dragover', false) 
    .bind('drop', function(event){ 

     dropClip($(this), event); 
    }); 

$('.clip').bind('dragstart', function(event){ 

    dragClip($(this), event); 
}); 

UPDATE:

Riscritto per rimuovere la verbosità. Aveva altre cose incluse in là, ma una funzione anonima farà bene:

jQuery.event.props.push('dataTransfer'); 

$('#titles') 
    .bind('dragenter dragover', false) 
    .bind('drop', function(event){ 

     $(this).append(event.dataTransfer.el); 
    }); 

$('.clip').bind('dragstart', function(event){ 

    event.dataTransfer.el = $(this); 
}); 

UPDATE

Come da @ risposta finale di Barney, il mio codice di lavoro finale. Ho notato che l'utilizzo dell'evento originale non mi permetteva di passare un oggetto come dati, così invece ho applicato l'ID e ho ricostruito l'oggetto jQuery alla caduta. Anche serrato tutto alzando le funzioni dichiarate. Meno codice, stesso risultato.

$('#titles') 
    .bind('dragenter dragover', false) 
    .bind('drop', function(event){ 

     $(this).append($('#' + event.originalEvent.dataTransfer.getData('clip'))); 
    }); 

$('.clip') 
    .bind('dragstart', function(event){ 

     event.originalEvent.dataTransfer.setData('clip', $(this).attr('id')); 
    }); 
+0

+1 per questa parte "AGGIORNAMENTO". Questo mi ha aiutato. –

risposta

17

Personalmente, provo a giocare con jQuery internals il meno possibile e ad estrarre l'oggetto evento originale laddove possibile. Quando si utilizza il trascinamento della selezione in passato, ho sempre utilizzato event.originalEvent.dataTransfer.

+0

sì, ho considerato qualcosa di simile. È così strano: dovrei essere in grado di collegare l'oggetto jQuery alla proprietà dataTransfer. Posso farlo in vanilla JS, non so perché funzionerebbe diversamente in jQuery se dataTransfer è aggiunto all'array delle proprietà dell'evento – technopeasant

+0

Personalmente, provo a giocare con jQuery internals il meno possibile. Usando il drag and drop in passato, ho sempre fatto uso di 'event.originalEvent.dataTransfer'. – Barney

+1

Stranamente, usando quello invece di aggiungere dataTransfer a jQuery funziona. Ho accettato la tua risposta e apprezzo l'aiuto. Sarebbe doppiamente utile se tu potessi aggiungere la tua risposta al tuo suggerimento su event.originalEvent per riferimento altrui – technopeasant

Problemi correlati