jQuery droppable越來越被丟棄的對象上下文

Question

如何獲得已放置到可放置目標上的jQuery小部件的上下文？

例如這是可拖動與此代碼的插件：

In the code that makes the images be draggable 

ContentImageHolder.prototype = { 

    options: { 
     contentInfo: null, 
    }, 

    getContentInfo: function(){ 
     return this.options.contentInfo; 
    }, 

    makeContentDraggable: function(){ 

     $(this.element).draggable({ 
      revert: true, 
      scroll: false, 

      start: $.proxy(this, 'dragStart'), 
      stop: $.proxy(this, 'dragStop'), 
     }); 
    }, 

    _init: function() { 
     this.makeContentDraggable(); 
    } 

$.widget("basereality.contentImageHolder", ContentImageHolder); 

然後這是我的代碼，使垃圾可以接受的圖像。

TrashCan.prototype = { 

    trashContent: function (event, ui){ 
     //What do I do here to be able to access the functions of the dropped object 
     //droppedObject.getContentInfo(); 
    }, 

    _init: function() { 
     $(this.element).droppable({ 
      drop: $.proxy(this, 'trashContent'), 
     }); 
    }, 
} 
$.widget.bridge('trashCan', TrashCan); 

是否有可能得到的是被拖到可放開，所以我可以在對象上調用函數的ContentImageHolder的背景下？

在這裏所有的問題與類似的關鍵字都說使用ui.draggable但引用一個DOM對象，而不是jQuery小部件。那麼是否有可能獲得jQuery小部件？

Answer 1

無論何時您有一個已經初始化了jQuery小部件或UI元素的DOM對象，您都可以通過您用來創建它的函數來訪問小部件或UI元素的函數和屬性。

通過這一點，我的意思是，如果你想調用.getContentInfo（），那麼你可以做這樣的：

trashContent: function (event, ui){ 
    // Set a property of contentImageHolder 
    $(ui.draggable).contentImageHolder("option", "contentInfo", "something") 

    // Access a method of contentImageHolder 
    $(ui.draggable).contentImageHolder("getContentInfo"); 

    // Do whatever.... 
}, 

注：根據什麼類型的對象ContentImageHolder的是，你可能要申報它是這樣的：

ContentImageHolder = { 

    options: { 
     contentInfo: null, 
    }, 

    getContentInfo: function(){ 
     return this.options.contentInfo; 
    }, 

    makeContentDraggable: function(){ 

     $(this.element).draggable({ 
      revert: true, 
      scroll: false, 

      start: $.proxy(this, 'dragStart'), 
      stop: $.proxy(this, 'dragStop'), 
     }); 
    }, 

    _init: function() { 
     this.makeContentDraggable(); 
    } 
} 

IE：不要如果沒有適當的改變原型，或者你可能最終爲你的函數的地方，他們不屬於，像所有對象。

欲瞭解更多信息，請查看jQuery的窗口小部件廠文檔：http://api.jqueryui.com/jQuery.widget/

希望幫助！

== ==編輯 如果你不知道將要刪除的對象的類型，但你要調用一個共同名稱的函數，那麼最簡單的方法我能想到的做將只是一個參數添加到物體的像這樣的jQuery的數據：

// Inside ContentImageHolder._init() : 
$(this.element).data("basereality.type", "contentImageHolder") 

這將允許你檢查你的拖動處理程序中的類型：

trashContent: function (event, ui){ 
    // Get its type like this: 
    var elemType = $(ui.draggable).data("basereality.type"); 

    // Call the getContentInfo function 
    $(ui.draggable)[elemType]("getContentInfo"); 

    // Do stuff 
}, 

然後你只需要確保val 「basereality.type」中的ue與jQuery下的初始化函數的名稱相同。