jQuery trascinabili + ordinabile: strano compensati del mouse comportamento

Question

Ho lista trascinabili di elementi

, che sono in grado di trascinare in un altro elemento vuoto

. Se mi trascina la prima
• del
  tutto originale trascinabili funziona bene ...

  Problema:

  ... ma quando ho trascinare qualsiasi altro

  • elemento di questa lista l' 'aiutante' si allontana dal puntatore del mouse non appena io attraverso il confine del recieving ordinabile
    . Più precicely si muove fino alla cima alla lista.

    Qualcuno ha visto questo e sa una soluzione? Beh, il mio problema è, sto solo usando jQuery, non proprio profondamente in essa e mai realmente utilizzato javascript in modo approfondito sia.

    Maggiori informazioni sul problema:

    Il mio codice jQuery:

    $(document).ready(function() {
        $('#roleList > li').draggable({
            connectToSortable: '#roleDrop',
            containment: '#container',
            revert: 'invalid'
        });                   
        $('#roleDrop').sortable({
            cursor: 'move',
            containment: '#container',
            revert: true,
            update: function() {
                var order = $('#roleDrop').sortable('serialize');
                $.ajax({
                    type: 'POST',
                    url: '".$postUrl."',
                    dataType: 'html',
                    data: order
                });
            }                          
        });
        $('#roleList').disableSelection();
    });
    

    Mentre #roleList e #roleDrop sono le suddette liste non ordinate, #container è una tabella.

    Ora uno screenshot di ciò che accade.

    mi metto a trascinare l'elemento:

    http : //drop.io/download/public/dkabw5hlq3yfm0f84yji/7bf91122adc241373a5da13b5bde4b231644c1c5/da142000-ff76-012b-41ee-f10bc9db08a6/5a1bfa70-68f6-012c-6d08-f2025930ce6a/v2/thumbnail_large

    Quando attraverso il confine del secondo

    l'assistente salta su.

    http : //drop.io/download/public/dkabw5hlq3yfm0f84yji/2fad1d633d38cf593da46c638d1930431ea5fd35/da142000-ff76-012b-41ee-f10bc9db08a6/5c65c4c0-68f6-012c-6601-f12da00d9d47/v2/thumbnail_large

    Se è necessario il codice XHTML troppo, la prego di dirmi.

Answer 1

Prova ad aggiungere helper: 'clone' alle opzioni .draggable:

$('#roleList > li').draggable({
    helper: 'clone',
    connectToSortable: '#roleDrop',
    containment: '#container',
    revert: 'invalid'
});                   

jQuery documentazione , è necessario impostare questa opzione quando si collega un trascinabili ad un ordinabile.

Anche se questo produce un'esperienza diversa interfaccia (elementi trascinati vengono clonati invece di spostato), è almeno una soluzione temporanea per quello che implica la documentazione è un problema noto. la gestione degli eventi aggiuntivi potrebbe pulire l'elemento originale di #roleList durante il callback aggiornamento #roleDrop.