jquery-ui - with - sortable placeholder




Jquery Draggable和Backbone.js從droppable成功回調中獲取對骨幹模型的引用 (3)

我使用的方法是通過自定義事件將事件從droppable傳遞給draggable。

var DroppableView = Backbone.View.extend({
  events: { 'drop': 'dropHandler' },
  initialize: function() { this.$el.droppable(); },
  dropHandler: function(e, ui) { ui.draggable.trigger('drop:dropview'); }
})

var DraggableView = Backbone.View.extend({
  events: { 'drop:dropview': 'dropviewDropHandler'},
  initialize: function(){ this.$el.draggable(); },
  dropviewDropHandler: function() { this.doSomething(); }
});

這讓你在拖動視圖的上下文中執行drop handler,這通常比在droppable視圖的上下文中執行它更有用。

我有一個骨幹視圖模型,我在這裡渲染並使用jquery ui使其可拖動。

render: ->
$(this.el).attr('class', 'item').html(this.template(this.options.model.toJSON() ))
viewmodel = this
$(this.el).draggable
    revert: true
    drag: () ->
        console.log(viewmodel)

上面,我有viewmodel可用,可以從dom中刪除它,在它的模型上調用方法等等。但我想要的是將這個視圖模型拖入一個可放置的容器 - 就像垃圾桶 - 然後調用一些視圖模型的方法並將其從DOM中刪除。

我看到的是,當一個項目被放入容器時的回調方法是:

$(function() {
    $("#trash").droppable({
        drop: function(event, ui) {
          console.log(ui.draggable);
        }
    });
});

所以,我能夠看到ui.draggable並從DOM中刪除它,但我沒有參考它的視圖模型。 難道我做錯了什麼? 有辦法解決這個問題嗎?


我們使用放置在app-namespace中的全局屬性解決了這個問題,稱為拖動。

由於一次只拖動一個視圖,拖動視圖會綁定到拖動事件,並將自己的模型寫入window.dragging。

當它在可放置視圖上被刪除時,該視圖通過該拖動變量獲取當前拖動模型。

順便說一下,該屬性可以更好地放在全局可訪問的應用程序命名空間中,而不是直接將其添加到窗口。 這是我們的應用程序中的App.View.tool。

喜歡這個:

dragging = null;

draggableview = new Backbone.View.extend({

    //...
    initialize: function() {

        //...
        $(this.el).bind("dragStart",
        function() {
            window.dragging = this.model;
        },
        this);

        //remove reference for garbage collection purpose
        $(this.el).bind("dragStop",
        function() {
            delete window.dragging;
        },
        this);
    },

});

droppableview = new Backbone.View.extend({

    //...
    initialize: function() {

        //...
        $(this.el).bind("drop",
        function() {
            var draggedmodel = window.dragging;
            delete window.dragging;
            // for garbage collection purpose
            //do funky stuff
            alert("You dropped " + draggedmodel.get('title') + " on " + this.el.get('title'));
            //...
        },
        this);
    },
});

我有這個問題。 我解決了這個問題:給drop目標一個模型集合的引用。 在draggable上設置屬性data-cid="<%= cid %>" 。 現在,您可以從$(ui.draggable).data('cid')查找集合中的模型。 由於骨幹斷言CID是唯一的,因此您甚至可以掃描集合的集合,以防有多個模型類您想要進行轉換。