如何在backbone.js中绑定“可拖放”和“可拖放”事件？

Question

如何在Backbone中实现jquery ui的拖放事件，这样就可以在Drop发生的时候得到事件，因为backbone默认没有实现drop，该怎么做呢？

如何绑定jquery ui Droppable事件，如：

$( "#droppable" ).droppable({
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active",
      drop: function( event, ui ) {
        var pos = ui.draggable.offset(), dPos = $(this).offset();   alert("nodeid: " +  $(ui.draggable).attr("id")  + 
        ", Top: " + (pos.top - dPos.top) + 
        ", Left: " + (pos.left - dPos.left));
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });

Answer 1

每个jQuery UI事件都有一个可以使用的事件名称，例如，在视图中：

// View class
events: {
    "drop #droppable": "callback"
},

callback: function( event, ui ) {
    var pos = ui.draggable.offset(), 
        dPos = $(this).offset();   alert("nodeid: " + $(ui.draggable).attr("id")  + 
    ", Top: " + (pos.top - dPos.top) + 
    ", Left: " + (pos.left - dPos.left));
    $( event.currentTarget )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
},

render: function(){ // or equivalent render function
    $("#droppable").droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active"
    });
}

作为参考，Backbone View事件相当于：

$(view.el).on(eventName, selector, callback);

其中：

events: {
    "eventName selector": "callback"
}