using jQuery in object-oriented way

Question

Is it possible to achieve the following, using jQuery: I'd like to create two different objects that have different functions with the same name.

var item = new foo(); item.doSomething(); var item2 = new bar(); item2.doSomething();

Furthermore, I'd like to be able to use the created items as "regular" jQuery objects - for example, to drag&drop the items and execute the correct doSomething() function when dragging has stopped.

Answer 1

Not sure about the Object Orientation part, but jQuery has baked-in support for the kind of drag-and-drop capability you are describing.

Using JQuery to Add Drag and Drop Support http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx

Answer 2

We've come up with a solution to the problem. It consists of 3 separate steps: first, the initial jQuery item must be created:

var item = $.create("div");

then create an instance of the javascript object you want to create and copy all of it's functions and properties to the jQuery item:

$.extend( item, new foo.bar() );

Finally, initialize the object. Note that the constructor in previous step cannot be used for this since the "this" object is different.

item.initialize();

After this, the object $(item) can be used like a regular jQuery object, plus it has functions and local variables like a regular javascript object.

item.doSomething();
var offset = $(item).offset();

So you can make DOM objects that have a "class" that can be used by jQuery. BTW, we used DUI to create namespaces.

Hopefully someone will find the solution helpful. It made our code much nicer.