script.aculo.us 1.6.3 Draggables bug

[Malard]

Hi

I have a Div, with a fixed height and width, which set to overflow-x:
hidden; overflow-y: scroll;

Inside this Div is floated draggables. If i scroll down the list
(1.6.2) and then drag one of these the draggable is offset from the
mouse, by the amount scrolled (for both firefox and IE) in 1.6.3 this
is now fixed for Firefox, whereby the draggable is locked to the mouse.

In IE however, it is inverted, so that it is higher up on the mouse
(alot higher) this was the inverse in 1.6.2

I've used perforce to do a diff on the dragdrop.js file and could'nt
find any single thing to attribute to this fix.

I'm glad the bug is fixed in firefox. but unfortunatly my boss is
masochistic man who insists on this web application working in IE :S

I have created a screengrab of the issue,
http://www.envoy-promote.com/error.jpg

[Malard]

It seems in my haste, one of the changes to the dragdrop.js i did'nt
test.

I have found that on line 449:

draw: function(point) {
var pos = Position.cumulativeOffset(this.element);
if(this.options.ghosting) {
var r = Position.realOffset(this.element);
window.status = r.inspect();
pos[0] += r[0] - Position.deltaX; pos[1] += r[1] - Position.deltaY;
}

changing it to:

draw: function(point) {
var pos = Position.cumulativeOffset(this.element);
if (navigator.appVersion.indexOf("MSIE 6.0")==-1)
if(this.options.ghosting) {
var r = Position.realOffset(this.element);
window.status = r.inspect();
pos[0] += r[0] - Position.deltaX; pos[1] += r[1] - Position.deltaY;
}

Fixes it. It seems that this code does not work for IE. but IE does not
require it. Sorry i dont have more time to flesh out the reasons. You
should hopefully have a better idea whats going on than me.

P.S hats off to you guys, in the past 6 months almost every single site
i've made i've had a use for your library.

[Tom Gregory]

Can you show us your code? A peek at your create options and CSS
would be useful.

Do you have the "scroll" option set to the id of your fixed-size div?

TAG

[Malard]

www.envoy-promote.com is the site that this is run on

javascript is loaded similarly to how scriptaculous does it, there is
www.envoy-promote.com/js/promote_loader.js

this loads

../js/promote_load.js
../js/promote_core.js
../js/promote_auth.js
../js/promote_debug.js
../js/promote_error.js
../js/promote_graphics.js
../js/promote_lib.js
../js/promote_mail.js
../js/promote_save.js

It then waits for them to be loaded before continuing.

css is located

www.envoy-promote/css/promote.css

You can use username = demo
password = demo to login.

[Peter Michaux]

HI,

I'm guessing this is a problem with Prototype.js and it's get
positioning code. Differences in how many positioning parents need to
be used to calculate the offset. Differences in browsers to get the
amount by which a page is scrolled and quirks mode or strict etc.

Did you try different DOCTYPES?

Peter

[Malard]

No, I have designed the site for a 1.1 Strict DOCTYPE any other types
will collapse the design.

[Frédéric JECKER]

Moin List :-)

I'm trying to create a new DIV, turn it draggable and start the drag process on the fly.
Here is what I need to do:
The user selects text within a textarea. Then he holds the CTRL key and the left mouse button down and starts to move his mouse.
Once the mouse movement has started I create a new Div on the fly using the "Builder.node" function. This new DIV contains the selected text. This DIV is then turned draggable.
Now I would like to manually(from my code) init a "Drag" process (move my div under the mouse cursor and follow the mouse movements like a normal Drag process).
Is there a function in scriptaculous to do this (set a Draggable element to be dragged like if the user clicked on it) ?
I already tried Draggables.activate(element) but this doesn't work

Thanks for your help

--
Fred
PPlease consider the environment - do you really need to print this email ?

[Tom Gregory]

The following snippet is from an working application (although I don't vouch for this edited down snippet).

In this instance, I was re-creating the Draggable several levels higher in the tree than the original list to overcome the overflow:scroll problem.  Something similar should work for just-in-time Draggable creation, if you decided to create the Draggable on mousedown rather than on page load.

It should work for the case you're describing to.

onMouseDown: function (event) {

if (!Event.isLeftClick(event)) {return;}

var div = document.createElement("div");

// ...

// Set new div position

var d = new Draggable(div,

{revert: false,

ghosting: false

 // ...

});

//The following two lines, in particular, are what you're looking for, I think

d.initDrag(event);

Draggables.updateDrag(event);

  }

TAG

[Frédéric JECKER]

Hi

Thanks for your help, it was exactly what I was looking for but unfortunately it doesn't work, the drag process is not started
maybe this is due to the fact that the drag process is started within the textarea an that the default textarea drag behaviour is started before.

Fred

Tom Gregory a écrit :

The following snippet is from an working application (although I don't vouch for this edited down snippet).

In this instance, I was re-creating the Draggable several levels higher in the tree than the original list to overcome the overflow:scroll problem.  Something similar should work for just-in-time Draggable creation, if you decided to create the Draggable on mousedown rather than on page load.

It should work for the case you're describing to.

onMouseDown: function (event) {

if (!Event.isLeftClick(event)) {return;}

var div = document.createElement("div");

// ...

// Set new div position

var d = new Draggable(div,

{revert: false,

ghosting: false

 // ...

});

//The following two lines, in particular, are what you're looking for, I think

d.initDrag(event);

!



Draggables.updateDrag(event);

  }

TAG

On Dec 11, 2006, at 6:13 AM, Frédéric JECKER wrote:

Moin List :-)

I'm trying to create a new DIV, turn it draggable and start the drag process on the fly.
Here is what I need to do:
The user selects text within a textarea. Then he holds the CTRL key and the left mouse button down and starts to move his mouse.
Once the mouse movement has started I create a new Div on the fly using the "Builder.node" function. This new DIV contains the selected text. This DIV is then turned draggable.
Now I would like to manually(from my code) init a "Drag" process (move my div under the mouse cursor and follow the mouse movements like a normal Drag process).
Is there a function in scriptaculous to do this (set a Draggable element to be dragged like if the user clicked on it) ?
I already tried Draggables.activate(element) but this doesn't work

Thanks for your help

--
Fred
PPlease consider the environment - do you really need to print this email ?

--

________________________________________

Frédéric JECKER
Direction des systèmes d’information
Centre Hospitalier Rouffach
F- 68250  ROUFFACH
Tél : +33 (0)3 89 78 74 21
Fax : +33 (0)3 89 78 74 35
Courriel : f.je...@ch-rouffach.fr
Web : http://www.ch-rouffach.fr
PFaites un geste pour l'environnement - avez vous réellement besoin d'imprimer ce courriel ?