Backbone простое использование перетаскивания - PullRequest
Новая
       0

Backbone простое использование перетаскивания

5 голосов
/ 18 января 2012

Я использую перетаскивание по умолчанию внутри магистрального приложения. Я слушаю событие, на мой взгляд, так: 

"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",

С помощью связанного метода 

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');
}

И связанный HTML 

<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="" />

Все мои события работают правильно, но не событие drop. Итак, мой вопрос: как заставить это работать?

Ответы [ 2 ]

2 голосов
/ 03 февраля 2012

Исправлено с помощью библиотек пользовательского интерфейса JQuery вместо перетаскивания HTML5.

Я добавил это в свой метод рендеринга: 

$('#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"
});
0 голосов
/ 18 января 2012

Просто быстро просматривая его, кажется, что вы пропустили запятую после 'objectHover'.

...