1

您如何获得已被拖放到可拖放目标上的 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 小部件？

4

1 回答 1

1

只要你有一个 DOM 对象，它上面初始化了一个 jQuery 小部件或 UI 元素，你就可以通过你用来创建它的函数来访问小部件或 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
},

Then you just need to make sure that the value within the "basereality.type" is the same as that name for the initializer function under jQuery.

于 2013-02-28T06:18:58.147 回答