Sunday 19 October 2008

Drag and Drop Part II

Further to my post of Friday on drag and drop here is some other thoughts I had when commenting the code than perhaps were not obvious from the previous post.

YUI comes complete with a PROXY object which allows you to drag a proxy version of the thing you click on rather than the thing itself. I deliberately didn't use this method because I wanted to maintain the list on the left AFTER the drop had taken place because users may want to drag a customer to more than one date on the calendar and dropping the actual customer object would remove it from the list.

So ... I use the following methodology.

1. I have a CSS hidden [div] object that I use as a proxy. It has an ID of "drag" and it is defined at the start of the calendar.html page.

2. I use the onmouseover/out events on the customer list objects to duplicate the innerHTML and position the proxy object exactly on top of the customer object and then display it for the user. This means that the user now sees the proxy object rather than the actual object.
Needless to say if the user moves to a new customer object the PROXY object moves with it, From a user perspective this appears to be a rollover effect.

3. When the user clicks on the customer they are clicking on the PROXY rather than the actual customer object. This "picks up" the proxy and the drag starts. When the PROXY moves away from the list the original customer object is still there on the list and can be used again.

While I was at the commenting I made the entries that where on the calendar drag and drop-able as well. There is an issue with turning off the proxy element when you leave it.. i will have to have a think about that and a play with some event generators.

I have popped the commented file up onto OpenNTF for anyone that might be interested you can get it either from my ISP's server here or from the OpenNTF code bin here.

Disqus for Domi-No-Yes-Maybe