jQuery droppable getting dropped object context

Question

How do you get the context of a jQuery widget that has been dropped onto a droppable target?

e.g. this is the widget that is made draggable with this code:

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

And then this is my code that makes the trash can accept images.

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

Is it possible to get the context of the ContentImageHolder that was dragged onto the droppable so I can call functions on the object?

All the questions on here with similar keywords all say to use ui.draggable but that references a DOM object, not the jQuery widget. So is it possible to get the jQuery widget?

Answer 1

Whenever you have a DOM object that has a jQuery widget or UI element initialized on it, you access the functions and properties of the widget or UI element through the function you used to create it.

By that, I mean that if you want to call .getContentInfo() then you can do it like this:

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....
},

Note: Depending on what type of object ContentImageHolder is, you may want to declare it like this:

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: Don't change the prototype if not appropriate, or you could end up having your functions somewhere they don't belong, like on all objects.

For more info, check out the jQuery Widget Factory documentation: http://api.jqueryui.com/jQuery.widget/

Hope that helps!

== EDIT == If you don't know the type of the object that will be dropped, but you want to call a function with a common name then the easiest way I can think of to do it would be to just add a parameter to the jQuery data of the object such as this:

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

This will allow you to check the type inside your draggable handler:

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.