jQuery - manipuler l'élément dans la liste triable

J'ai un déplaçable liste (.champ) où vous pouvez drag & drop des éléments dans une liste triable (.sortlist). J'ai fait de cette façon parce que je ne voulais pas la liste de référence (.champ) modifié en aucune façon. Il fonctionne très bien, sauf que je ne peut pas travailler sur la façon de manipuler la tombée de champ dans une liste triable.

Je peux le faire à partir d'un déplaçable dans une drop zone en utilisant les éléments suivants en fonction de l '"abandon": "dans droppable():

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

Cependant cela ne fonctionne pas à l'intérieur d'un sortable(). Mon code ressemble à ceci:

$(".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>');
  }
});

$(interface utilisateur.l'élément).remplaceavec changements du champ maître qui a été déplacée, si cela ne fonctionne pas. Et j'ai essayé $(this).remplaceavec, mais que les mises à jour de la sortable (zone de.sortlist).

La moindre idée de ce code que j'ai besoin de faire référence à l'élément déplacé?

Merci beaucoup,
Ali.

InformationsquelleAutor WastedSpace | 2010-01-19
  1. 10

    Vous pourriez obtenir de l'élément glissé dans beforeStop événement:

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

    À l'aide de beforeStop de l'événement au lieu de recevoir était assez pour moi:

    beforeStop: function(event, ui) { 
        var myClassItem = $('.myClass', ui.item);
        myClassItem.bind('click', function(){ /*my function*/ });
    }
    • cela a également travaillé pour moi, merci. J'avais entendu parler du bug connu (mentionné dans le post ci-dessous), mais il était encore en me faisant un mal de tête. Par le réglage de l'élément dans la beforeStop événement qui m'a empêché d'avoir à gâcher avec de l'élément dans l'événement de réception permettant d'éviter le bug complètement.
    InformationsquelleAutor Svetlana
  2. 1

    Je pense que j'ai fait. Très orthodoxe, mais semble fonctionner!

    J'ai besoin d'utiliser $('.sortlist li:last') pour accéder à l'élément traîné...

    InformationsquelleAutor WastedSpace
  3. 1

    J'ai suivi votre ligne de pensée, mais il y avait quelques bugs à l'aide de cette approche (parfois l'élément supprimé tout simplement disparu lors de l'utilisation de drop + triable). Voici quelque chose qui a fonctionné pour moi:

    $(".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. 1

    Ne pas être en mesure d'accéder à l'élément est un bug connu de JQuery ui sortables. Le billet contient un patch qui vous permet d'accéder à l'élément, et cela devrait être résolu dans la prochaine version majeure.

    • plusieurs années plus tard
    InformationsquelleAutor Alan Heywood
  5. 0

    Je pense que je suis réellement une meilleure solution... semble fonctionner pour l'instant...

    J'ai attaché une droppable à un sortable pour déclarer un mondial de la var de l'élément déplacé. Un peu comme ceci:

    $(".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