1 Reply Latest reply: Sep 6, 2013 10:49 AM by jeremy_hull RSS

    How to customize ADF Drag and Drop experience?

    Rajesh Gudiputi-Oracle

      Hi,

       

      In ADF when we drag an object to drop is anywhere else in the page a ghost image of the object is dragged along with the mouse pointer.

      The requirement I have is to get the actual object with the mouse pointer and show a blank space instead of dragging a ghost image.

       

      How can I achieve this behaviour in ADF?

       

      Any help is highly appreciated.

       

      Thanks,

      Rajesh.

        • 1. Re: How to customize ADF Drag and Drop experience?
          jeremy_hull

          Hi, I am familiar with how this works. What happens is the DOM element is copied to style attributes are copied from the source element and then the ghost style is applied on top of that. If you want to style a component's ghost style, style the built-in class AFDragGhost.

           

          To style all dragging (source and target shown)

          *:drag-ghost {

            opacity:0.5;

          }

           

          *:drop-target {

              border: 5px solid red;

            }

           

          If you want to style just the drag for certain components

           

          af|panelBox:drag-ghost {

          ...

          }