2013-04-02 17 views
9

Próba przekazania obiektu jQuery do właściwości dataTransfer podczas sekwencji przeciągania/upuszczania. Po dodaniu właściwości do tablicy jQuert.event.props mogę ją przypisać, ale w czasie zdarzenia drop wraca ona niezdefiniowana. Nie jestem pewien, czego tu brakuje - wydaje mi się to bardzo proste.Element jQuery pass do właściwości 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:

zapisane, aby usunąć gadatliwość. Miał włączone inne rzeczy tam, ale anonimowa funkcja wystarczyć:

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

Zgodnie @ ostateczną odpowiedź Barneya, mój ostateczny kod roboczy. Zauważyłem, że użycie oryginalnego zdarzenia nie pozwoliło mi przekazać obiektu jako danych, więc zamiast tego zastosowałem identyfikator i odbudowałem obiekt jQuery podczas upuszczania. Zwiększyłem również wszystko, pozbywając się zadeklarowanych funkcji. Mniej kodu, ten sam wynik.

$('#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 dla tej części "UPDATE". Pomogło mi to. –

Odpowiedz

17

Osobiście staram się grać z elementami wewnętrznymi jQuery w jak najmniejszym stopniu i wydobywać oryginalny obiekt zdarzenia, jeśli to możliwe. Używając przeciągania i upuszczania w przeszłości, zawsze używałem event.originalEvent.dataTransfer.

+0

tak, rozważałem coś takiego. To dziwne - powinienem móc dołączyć obiekt jquery do właściwości dataTransfer. Mogę to zrobić w waniliowym JS, nie jestem pewien, dlaczego w jQuery miałoby to działać inaczej, gdyby dane przeniesione zostały dodane do tablicy właściwości zdarzenia – technopeasant

+0

Osobiście staram się grać z elementami wewnętrznymi jQuery w jak najmniejszym stopniu. Używając przeciągania i upuszczania w przeszłości, zawsze używałem 'event.originalEvent.dataTransfer'. – Barney

+1

Co zabawne, używa się tego zamiast dodawać funkcję data Transfer do jQuery. Przyjąłem twoją odpowiedź i doceniam pomoc. Byłoby podwójnie docenić, gdybyś mógł dołączyć swoją odpowiedź z sugestią dotyczącą event.originalEvent w celu odniesienia się do innych osób – technopeasant