Question

如何获取已放入可放置目标的jQuery小部件的上下文？

e.g。这是使用此代码可拖动的小部件：

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

是否可以获取被拖放到droppable上的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 Widget Factory文档：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
},

然后你只需要确保“basereality.type”中的值与jQuery下的初始化函数的名称相同。

jQuery droppable获取被删除的对象上下文

1 个答案: