Question

我有一个Backbone应用程序，我创建了2个视图，一个可拖动，一个可放置。拖动工作正常，但永远不会触发droppable回调。如何让dropable视图“看到”可拖动的视图？

我的“可放置”视图：

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!")
   );

可拖动的：

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()))

更新

当我将$(draggable.el)插入与droppable视图相同的容器潜水时，droppable元素正确触发回调。当他们在单独的html父母中时，它就不喜欢它了......

Answer 1

您的帖子中没有太多信息，但根据您的说明，如果它取决于您放置droppable的html中的位置，则可以尝试仅使用@$el替换$("#someid")引用。此外，请记住，对于骨干，快捷方式@$("#someid")的范围限定为主干视图元素（构造函数中的全局文档集的某个子元素），而不是全局文档本身。假设你让$("#someid")部分工作，那很可能只是一个范围问题。

Answer 2

我想通了......原来这是Droppable插件的“容忍”问题。设置{tolerance: "pointer"}解决了我的问题。

Backbone.js与jQuery draggable / droppable。 Droppable无法正常工作

更新

2 个答案: