Question

I have a Backbone app where I am creating 2 views, one draggable, and one droppable. Dragging works ok, but the droppable callback is never fired. How can I get the droppable view to “see” the draggable one?

My “droppable” view:

class App.Views.Folder extends Backbone.View

template: JST['folders/folder']

  className: "folder"

  initialize: (options) ->
    @collection.on('add', @addOne, @)
    @collection.on('reset', @addAll, @)

  render: ->
    @$el.html(@template(@model.toJSON()))
   this.$el.droppable(
      drop: -> alert("dropped!")
   );

Draggable:

class App.Views.QuestionSet extends Backbone.View

  template: JST['question_sets/question_set']

  className: "question-set"

  initialize: (options) ->
    @collection.on('add', @addOne, @)
    @collection.on('reset', @addAll, @)
    @$el.draggable(
      handle: ".drag-question-set"
      revert: true
    )

  render: ->
    @$el.html(@template(@model.toJSON()))

Update:

The droppable elements fire the callback correctly when I insert the $(draggable.el) into the same container dive as the droppable view. It just doesn’t like it when they are in separate html parents…

Answer 1

I figured it out… Turns out it was a “tolerance” issue with the Droppable plugin. Setting {tolerance: "pointer"} solved my issue.