Question

I have been tinkering with drag and drop in Google Closure libraries:
http://closure-library.googlecode.com/svn/docs/class_goog_fx_DragDropGroup.html

I was wondering how to hide the cloned source element (that follows the cursor around) when the “dragstart” event is fired. Here is my current callback function for the dragstart event. I am sure that it is being called at the right time. However, it is failing at hiding the cloned element.

/**
 * Called when drag starts.
 * @param {Event} e The event signaling the start of drag.
 * @private
 */
Foo.prototype.dragStart_ = 
    function(e) {
  goog.style.setOpacity(e.dragSourceItem.element, 0);
  goog.style.showElement(e.dragSourceItem.element, false);
}

How do I hide the cloned source element that follows the mouse around? I don’t mind hiding the actual drag source element as well.

Answer 1

Your event handler for dragstart should work if you remove the call to goog.style.showElement.

/**
 * Called when drag starts.
 * @param {Event} e The event signaling the start of drag.
 * @private
 */
Foo.prototype.dragStart_ = function(e) {
  goog.style.setOpacity(e.dragSourceItem.element, 0.0);
};

See the Drag & Drop Demos.

In the demo file dragdrop.html the dragStart(event) function is defined as follows:

function dragStart(event) {
  goog.style.setOpacity(event.dragSourceItem.element, 0.5);
}

Changing the opacity to 0.0 successfully hides both the source element as well as the drag element.

To keep the source element visible and only hide the drag element, you can override goog.fx.AbstractDragDrop.prototype.createDragElement(sourceElement) and use CSS to set the opacity of the drag element. For example, in the dragdrop.html demo, button 1 uses a custom drag element styled with the CSS class foo. The following CSS hides the button 1 drag element:

.foo {
  position: absolute;
  opacity: 0.0;
}