#147 new

drag ghost instead of original element when ghosting (potential enhancement)

Reported by bander | December 30th, 2008 @ 04:56 AM

In my opinion, ghosting would be more useful if it dragged the clone rather than the original object. In particular, this makes it easy to drag an element outside of its containing body (desired behavior in my application, though perhaps this needs its own configuration option) and minimizes disruption to the properties of the original element. I also believe the ghost's id should be made unique.

I don't know how much use this will be to you guys, especially if you're far along the version two fork, but here's my relatively simple patch for those changes. (Note that it incorporates the previously posted IE7 fix for originallyAbsolute.) One caveat: I expect that this will send the clone to the onHover callback. Its behavior for onDrop is correct.

@@ -235,6 +235,10 @@
       endeffect: function(element) {
+        if (options.ghosting) {
+          Draggable._dragging[element] = false;
+          return;
+        }
         var toOpacity = Object.isNumber(element._opacity) ? element._opacity : 1.0;
         new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity, 
           queue: {scope:'_draggable', position:'end'},
@@ -336,7 +340,12 @@
       this.element._originallyAbsolute = (this.element.getStyle('position') == 'absolute');
       if (!this.element._originallyAbsolute)
-      this.element.parentNode.insertBefore(this._clone, this.element);
+      if (this._clone.id)
+        this._clone.id += '-clone';
+      document.body.appendChild(this._clone);
+      $(this._clone).clonePosition(this.element);
+      this._realElement = this.element;
+      this.element = this._clone;
     if(this.options.scroll) {
@@ -405,11 +414,12 @@
     if(this.options.ghosting) {
+      this._clone = null;
+      Element.remove(this.element);
+      this.element = this._realElement;
       if (!this.element._originallyAbsolute)
-      delete this.element._originallyAbsolute;
-      Element.remove(this._clone);
-      this._clone = null;
+      this.element._originallyAbsolute = null;
     var dropped = false; 

Comments and changes to this ticket

  • bander

    bander December 30th, 2008 @ 09:01 PM

    This also causes positioning problems in IE7. I've poked around at Draggable.draw and believe it's a cumulativeOffset issue, but I haven't been able to fix it.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket