Épine dorsale utilisation simple glisser-déposer

Je suis par défaut à l'aide de glisser-déposer à l'intérieur d'un squelette d'application que je suis à l'écoute de l'événement, à mon avis, comme ceci :

"drop img.big-objet": "dragDropEvent",
"dragenter img.objet": "dragEnterLeaveEvent",
"dragleave img.big-objet": "dragEnterLeaveEvent",
"mousedown img.big-objet": "dragStartEvent",
"mouseup img.big-objet": "dragStopEvent",
"dragend img.big-objet": "dragStopEvent",

Avec la méthode associée

dragEnterLeaveEvent: function (event){
    object = $(event.target);
    object.addClass('hidden');
    $('#'+object.attr('data-toggle')).removeClass('hidden');
},

dragStartEvent: function (event) {
        object = $(event.target);
        object.addClass('objet-drag').removeClass('objet-hover');
    },

    dragStopEvent: function (event) {
        object = $(event.target);
        object.addClass('objet-hover').removeClass('objet-drag');
    },

objectHover: function(event){
    object = $(event.target);
        object.addClass('hidden');
    $('#'+object.attr('data-toggle')).removeClass('hidden');
},

dragDropEvent: function(event){
    alert('banana');
}

Et le html associé

<img class="objet" id="small-objet01-level01" data-toggle="big-objet01-level01" src="img/content/small-objet01-level01.png" alt="" />
<img class="objet" id="small-objet02-level01" data-toggle="big-objet02-level01" src="img/content/small-objet02-level01.png" alt="" />
<img class="objet" id="small-objet03-level01" data-toggle="big-objet03-level01" src="img/content/small-objet03-level01.png" alt="" />
<img class="big-objet objet-hover hidden" id="big-objet01-level01" draggable="true" data-toggle="small-objet01-level01" src="img/content/big-objet01-level01.png" alt="" />
<img class="big-objet objet-hover hidden" id="big-objet02-level01" draggable="true" data-toggle="small-objet02-level01" src="img/content/big-objet02-level01.png" alt="" />
<img class="big-objet objet-hover hidden" id="big-objet03-level01" draggable="true" data-toggle="small-objet03-level01" src="img/content/big-objet03-level01.png" alt="" />

Tous mes événements travailler correctement, mais pas la baisse de l'événement. Donc ma question est de savoir comment le faire fonctionner ?

Que gagnez-vous par intégrer ce avec Dorsale vs réglage de l'rappels dans l'initialisation de l'objet? Dans ma colonne vertébrale applications j'ai tendance à créer des choses, comme le glisser-déposer dans l'initialisation ou de la méthode de rendu et de ne pas utiliser les "événements" de hachage pour eux. Est-il préférable de s'intégrer pour les fins de la collecte des ordures ou autre chose?
avez-vous utilisé jquery UI bibliothèques pour glisser et drop ?
Pas en ce moment mais je suis en train de réfléchir
J'ai essayé d'utiliser over et out événements avec épine dorsale, mais ce dont j'avais besoin était dragenter et dragleave. Merci, c'est ce dont j'avais besoin.

OriginalL'auteur Awea | 2012-01-17

  1. 2

    Corrigé par l'utilisation de JQuery UI bibliothèques au lieu de glisser-déposer HTML5.

    J'ai mis ça dans ma méthode de rendu:

    $('#overlay-objet img').droppable({
    tolerance: 'pointer',
    drop: _.bind(function(event, ui) {
      object = $(event.target);
      if (object.attr("data-val") != undefined){
        objectDrag = object.attr('data-val').toString();
        objectDrop = $(ui.draggable).attr('data-val').toString();
        object.addClass('hidden');
        $('#'+object.attr('data-toggle')).removeClass('hidden');
        this.dragDropEvent(objectDrag + objectDrop);
      }
    }, this),
    over: _.bind(function(event,ui){
      object = $(event.target);
      object.addClass('hidden');
      $('#'+object.attr('data-toggle')).removeClass('hidden');
    }, this),
    out: _.bind(function(event,ui){
      object = $(event.target);
      object.removeClass('hidden');
      $('#'+object.attr('data-toggle')).addClass('hidden');
    }, this) //Edit mercredi soir ajouter ,this dans chaque callback
  });

$('img.big-objet').draggable({
    helper: "clone"
});

    OriginalL'auteur Awea

  2. 0

    Juste rapidement le regard sur elle, il semble que vous manque la virgule après le "objectHover'.

    désolé, mauvais copier et coller

    OriginalL'auteur kgaddy