Lorsque vous clonez un objet déplaçable dans l'interface utilisateur jQuery, comment pouvez-vous transférer les données et les événements vers le nouvel élément?

J'ai un élément déplaçable avec le helper: 'clone' ensemble, mais quand il les clones de l'élément, aucun des data() ou des événements sont persistants dans l'élément nouveau.

J'ai essayé un certain nombre de moyens pour remettre en place le data()mais je n'arrive pas à sélectionner l'élément nouveau, ainsi que l'ancien élément dans la même instruction.

Par exemple, je peux sélectionner l'élément initial dans le déplaçable stop() événement:

$blah.draggable({
    helper: 'clone',
    stop: function(ev, ui) {
        var oldData = $(ev.target).data('blah');
    }
});

Et je peux également obtenir l'élément nouveau dans la droppable drop() événement:

$blah.droppable({
    drop : function(ev, ui) {
        var $newElement = ui.draggable;
    }
});

Mais je ne peux pas trouver un moyen de faire les deux dans le même cas.

Ce que je voudrais faire est en quelque sorte un transfert de données, par exemple:

$newElement.data('blah', $oldElement.data('blah'));

Ou autrement rendre les données persistantes, comme vous le pouvez avec $blah.clone(true);

source d'informationauteur Jon Raasch

  1. 14

    Pour obtenir l'accès aux données de l'élément d'origine dans les déposer, vous pouvez utiliser l'interface utilisateur.déplaçable.contexte. Dans l'exemple ci-dessous contexte renvoie à l'original élément traîné et vous avez accès à la totalité de son contenu. Déplaçable se réfère à l'élément nouveau qui est en train d'être abandonné. 

    $("#droppable").droppable({
    drop: function(ev, ui) {        
        console.log(ui);
        console.log(ui.draggable.context);
        console.log($(ui.draggable.context).data('pic'));
    }
});
  2. 2

    Je n'ai pas travaillé trop largement avec drop, mais ne pourriez-vous pas tout simplement faire quelque chose de ce genre?

    $(".draggable").draggable({
    helper: 'clone'
});

$("#droppable").droppable({
    drop: function(ev, ui) {
        $(this).append(ui.draggable.clone(true));
    }
});

    Semble fonctionner, sauf si il y a quelque chose qui m'échappe:

    http://jsfiddle.net/hasrq/

  3. 1

    S'avère que le problème était sortable, pas déplaçable /drop (j'étais attacher sortable plus tard, mais pensé que ce n'était pas une partie du problème ici, donc je l'ai laissé dehors de la question d'origine).

    J'ai fini par utiliser une sorte de combinaison de @kingjiv la solution ci-dessus, avec un pas-le-grand hack mais au moins, il semble être au travail:

    $blah.sortable({
    receive: function(ev, ui) {
        //setting a global variable here
        MyGlobals.cloneCache = ui.item.clone(true);
    },
    stop: function(ev, ui) {
        $(ui.item).replaceWith(MyGlobals.cloneCache);
    }
});

    L'idée est que vous devez d'abord clone de l'élément d'origine dans les receive() événement, cache ce dans une variable, puis remplacer l'élément avec le stop() événement.

    Genre de laid, mais au moins ça fonctionne.

  4. 1

    ui.item se réfère à l'élément glissé. Lorsque l'élément déplacé est cloné, il n'y a pas de moyen d'accéder à l'élément cible de receive fonction. Cependant, il est un peu hacky façon de le faire:

    $blah.sortable({
    receive: function (ev, ui) {
        var $target = $(this).data().sortable.currentItem;
        var $source = $(ui.sender);
        //now you can copy data from source to target
        $target.data('data-item', $source.data('data-item')); 
    } 
});