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

时间:2013-02-28 05:26:27

标签: jquery draggable droppable jquery-widgets

如何获取已放入可放置目标的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小部件吗?

1 个答案:

答案 0 :(得分: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下的初始化函数的名称相同。