Backbone simple use drag and drop

11,557

Fix by using JQuery UI libraries instead of HTML5 drag and drop.

I put this in my render method:

$('#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"
});
Share:
11,557

Related videos on Youtube

Awea
Author by

Awea

I’m a French developer who practice ruby on rails, php and a little bit of cocoa. I have started to develop two years ago for fun and now I work for a web agency as web developer.

Updated on June 19, 2022

Comments

  • Awea
    Awea almost 2 years

    I'm using default drag and drop inside a backbone application i'm listening event in my view like this :

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

    With the associated method

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

    And the associated 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="" />
    

    All of my events work correctly but not the drop event. So my question is how make it work ?

Related