jQuery – manipolare scesa elemento in elenco ordinabile

Ho un trascinabile elenco (.campo) dove è possibile il drag & drop di elementi in un elenco ordinabile (.sortlist). Ho fatto in questo modo, perché non voglio che l’elenco master (.campo) in qualsiasi modo alterati. Funziona bene, tranne che io non posso capire come manipolare la scesa in campo di una lista ordinabile.

Posso farlo da un trascinabile in un drop zona utilizzando il seguente comando in una funzione per il drop:’ in drop():

$(this).append('html code here to change content of dragged field');

Tuttavia questo non funziona all’interno di un ordinabile(). Il mio codice simile a questo:

$(".sortlist").sortable({
  receive: function(event, ui) {
    var dropElemTxt = $(ui.item).text();
    var dropElemId = $(ui.item).attr('id');
    $(ui.item).replaceWith('<li class="box" id="'+dropElemId+'">Updated field! '+dropElemTxt+'</li>');
  }
});

$(ui.voce).replaceWith cambia il maestro di campo che è stato trascinato, in modo che questo non funziona. E ho cercato di $(this).replaceWith, ma che aggiorna il ordinabile area (.sortlist).

Idea di quale codice devo riferimento l’elemento trascinato?

Molte grazie,
Ali.

InformationsquelleAutor WastedSpace | 2010-01-19

5 Replies
  1. 10

    Si potrebbe ottenere l’elemento trascinato in beforeStop evento:

    beforeStop: function (event, ui) { draggedItem = ui.item;},
    receive: function (event, ui) { /* use draggedItem here*/ }

    Utilizzando beforeStop evento, invece di ricevere era abbastanza per me:

    beforeStop: function(event, ui) { 
            var myClassItem = $('.myClass', ui.item);
            myClassItem.bind('click', function(){ /*my function*/ });
        }
    anche questo ha funzionato per me, grazie. Sapevo del bug noto (citato nel post qui sotto), ma è stata comunque mi ha causato un mal di testa. Impostando la voce in beforeStop evento mi ha fermato dover pasticciare con la voce in ricezione evento che ha evitato il bug completamente.

    InformationsquelleAutor Svetlana

  2. 1

    Penso di aver lavorato fuori. Un po ‘ sporca, ma sembra funzionare!

    Ho bisogno di usare $(‘.sortlist li:last’) per accedere all’elemento trascinato…

    InformationsquelleAutor WastedSpace

  3. 1

    Ho seguito la tua linea di pensiero, ma c’erano un paio di bug che utilizza questo approccio (a volte l’elemento caduta, appena scomparso quando si utilizza drop + ordinabile). Ecco qualcosa che ha funzionato per me:

    $(".draglist").draggable({
      start: function(e, ui) {
        draggedItem = ui.item;
      }
    });
    
    $(".sortlist").sortable({
      receive: function(event, ui) {
        //do something with the 'draggedItem' here...
        var droppedElemTxt = draggedItem.text();
        var droppedElemId = draggedItem.attr('id');
      }
      , start: function(e, ui) {
        draggedItem = ui.item;
      }
    });

    InformationsquelleAutor

  4. 0

    Penso che in realtà si avvicinò con una soluzione migliore… sembra così lontano…

    Ho collegato un drop di un ordinabile per dichiarare globale var dell’elemento trascinato. Un po ‘ come:

    $(".sortlist").droppable({
      drop: function(e, ui) {
        draggedItem = ui.draggable;
      }
    }).sortable({
      receive: function(event, ui) {
        //do something with the 'draggedItem' here...
        var droppedElemTxt = draggedItem.text();
        var droppedElemId = draggedItem.attr('id');
      }
    });

    InformationsquelleAutor WastedSpace

Lascia un commento