Date: 03/02/10 (Javascript Community)    Keywords: java, web

I'm writing my first class using Mootools, building off a class called Drag.Ghost [link] (which itself inherts from Drag.Move; Drag.Ghost -> Drag.Move -> Drag)

Since I want this to be reusable and multi-purpose, I want to define custom behaviors within the class itself rather than within each page which is the usual, idiomatic way. That is, I want to define the drag, drop, move, etc handlers within the class rather than pass them as parameters to an instance of the class

The problem is, I can't manage to set these handlers. They never fire at all (again, the class itself and the idiomatic way works fine)

My version of the class:

Drag.Ghost = new Class({ Extends: Drag.Move, Implements: [Options, Events], initialize: function(el, options) { this.parent(el); this.setOptions(options); }, ....standard code omitted. see link..... drag: function(event) { this.parent(event); }, drop: function(element, droppable, event) { console.log('dropped'); this.parent(event); }, enter: function(element, droppable){ console.log('entered'); this.parent(event); }, leave: function(element, droppable) { console.log('left'); this.parent(event); }

Drag fires, but drop, enter, and leave do not (adding a console.log call to drag produces a message in Firebug. The others do not)

Drag is an event of the base Drag class while drop, enter, and leave are events on Drag.Move, so I'm thinking that might have something to do with it.

I have plenty of experience with OOP and a fair bit with JS specifically, but I'm unclear how things work in Mootools yet. I didn't see any references to, say, needing to explicitly call the superclass, but there's apparently something wrong with this subclass preventing it from passing on events belonging to its direct parent. Or maybe not. I'm stumped.

And here's how I'm calling it in the document HEAD section (which I'm sure is unneeded, but sometimes I miss the simplest things...)

window.addEvent('domready', function() { //TEST: Make all items draggable $$('.rpgitem').each(function(item) { new Drag.Ghost(item, {'opacity': 0.4}); }); });

xpost: javascript webdesign

Source: http://javascript.livejournal.com/170196.html