I am using the patch/extension post by Sergey Kojin in the Effect Treasure Chest under the title "overflow: scroll hack and draggable element substitution" http://wiki.script.aculo.us/scriptaculous/show/EffectsTreasureChest
What I am able to do:
I've a div set to overflow:auto. Inside it, there are many draggables. Using the extension below, I'm able to drag my draggables outside the overflow:auto div to an external droppable container.
Each of my draggable is set as follow:
<script type=\"text/javascript\">new SubsDraggable('MyDraggable1', {dragelement:getDragElement})</script>
<script type=\"text/javascript\">new SubsDraggable('MyDraggable2', {dragelement:getDragElement})</script>
The extentions post by Sergey Kojin is as follow, just copy this to the end of dragdrop.js:
// extentions for scriptaculous dragdrop.js
Object.extend(Class, {
superrise: function(obj, names){
names.each( function(n){ obj['super_' + n] = obj[n] } )
return obj;
}
})
// Draggable that allows substitution of draggable element
var SubsDraggable = Class.create();
SubsDraggable.prototype = Object.extend({}, Draggable.prototype);
Class.superrise(SubsDraggable.prototype, ['initialize', 'initDrag', 'finishDrag'])
Object.extend( SubsDraggable.prototype , {
initialize: function(event) {
this.super_initialize.apply(this, arguments);
if( typeof(this.options.dragelement) == 'undefined' ) this.options.dragelement = false;
},
initDrag: function(event) {
if( this.options.dragelement ){
this._originalElement = this.element;
this.element = this.options.dragelement(this.element);
Position.absolutize(this.element);
Position.clone(this._originalElement, this.element);
}
this.super_initDrag(event);
},
finishDrag: function(event, success) {
this.super_finishDrag(event, success);
if( this.options.dragelement ){
Element.remove(this.element);
this.element = this._originalElement;
this._originalElement = null;
}
}
})
Problem 1: Under Firefox, when I drag the draggable, but not placing it to an outside droppable; the clone will disappear. This behaviour is what I wanted. However, here is the problem, when I click on the draggable and not dragging it (just click it); the clone will not disappear. In fact the clone will remain in the browser, and I've to refresh the browser in order to remove it.
Problem 2: Under IE, problem 1 occur exactly the same. In addition, when I drag the draggable, stop dragging for a while, and then I start to drag again; the mouse cursor indicates that the draggable can no longer be dragged.
I think this is a very good extention. Unfortunately, I don't know javascript well enough to fix the two problems stated above. Hopefully someone will know a solution to this.
