4 Replies Latest reply on Oct 1, 2007 4:52 PM by Brian Parkinson

    Help with drag 'n drop

    Brian Parkinson Newbie

      Hello.

      I'm just getting into richfaces, and so am building a little hello world app by hand. Starting to see everything hangs together - this is very cool. Kudos.

      Anyhoo, trying to get drag 'n drop to work, and so I'm just trying to put a simple (ie. no backing bean) example of dragging some text and putting it somewhere. Here:

      ...
      <f:view>
      <h:form>

      <a4j:outputPanel style="border:1px solid gray;padding:2px;" layout="block">
      <rich:dragSupport dragIndicator=":indicator">
      <rich:dndParam name="label" value="VALUE!" />
      </rich:dragSupport>
      <h:outputText value="Drag." />
      </a4j:outputPanel>

      <rich:panel styleClass="dropTargetPanel">
      <f:facet name="header">
      <h:outputText value="Drop" />
      </f:facet>
      <rich:dropSupport id="php" acceptedTypes="PHP" dropListener="handle_drop" dropValue="PHP" />
      </rich:panel>
      </h:form>
      </f:view>
      ...

      I'm sorta figuring everything out from first priciples, and am stuck here = the 'Drag' output text does not, well, drag.

      And another question - what should the 'dropListener' attribute be set to? Are the some examples of this (other than at http://livedemo.exadel.com/richfaces-demo/). If there are good docs that cover this stuff, please advise.

      Can anyone help me out?

      Many thanks - I'm enjoying getting into richfaces. Nifty.

      Cheers,

      parki...

        • 1. Re: Help with drag 'n drop
          Ilya Shaikovsky Master

          Hmm.. demosite is designed specially to gave you simple example. You may download it and explore. Or you may try develpoers samples. All the svn links - in the wiki.

          • 2. Re: Help with drag 'n drop
            Brian Parkinson Newbie

            Thanks Ilya - getting closer to things working - I now have a draggable component and can drop it on something else.


            <h:form>
            <h:panelGrid id="drag1">
            <rich:dragSupport dragType="singleItems" />
            <h:outputText value="Drag Me" />
            </h:panelGrid>

            <rich:panel styleClass="dropTargetPanel">
            <f:facet name="header">
            <h:outputText value="Drop" />
            </f:facet>
            <rich:dropSupport acceptedTypes="singleItems" ondrop="handle_drop()" />
            </rich:panel>
            </h:form>

            Using the 'ondrop' attribute I see how to invoke a JavaScript function - can you point me to info on how to set up a Bean invocation using the 'dropListener' attribute - I'm a bit stumped here - pointing me to some docs would be great.

            Thanks a bunch.

            parki...

            • 3. Re: Help with drag 'n drop
              Ilya Shaikovsky Master

              You should not perform anything special at client side. The request will be fired by framework itself after the dragged element with propper type will be dropped to corresponding zone.

              in the Drop Listener you only need to specify the listener method from your bean. Once again I suggest you to use demosite, All the functionallity shown there with code snapshots. You may download and try freelly

              • 4. Re: Help with drag 'n drop
                Brian Parkinson Newbie

                HI Ilya:

                Got everything working - very cool. I read a bit more background material on JSF in general, and it clarified what I was trying to do.

                Thanks - this is fine looking stuff.

                Regards,

                parki...