How use JQuery UI

[mueller]

Hi,
i am not new at seam forum i only lost my old account, because i hack in other frameworks as seam at last year (liferay).

Now i want to use jquery ui at seam. We use richfaces 3.3 already in our seam 2.2 project. I wanna use the draggble ui componet. I read all info at this forum and the main jboss forum, but it doesnt run for me.

Has somebody here use already jquery ui and can explane me the steps?

my xhtml

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j"
    template="/layout/template.xhtml">
 
        <ui:define name="extraHeaderContent">
                <style type="text/css">
                        #draggable { width: 150px; height: 150px; padding: 0.5em; }
                </style>
        
                <script language="JavaScript">
                                jQuery(document).ready(function(){
                                    jQuery("#draggable").draggable();
                                  });
                </script> 
        </ui:define>
         
        <ui:define name="body"> 
                <div class="demo">
                        <div id="draggable" class="ui-widget-content ui-draggable">
                                <p>Drag me around</p>
                        </div>
                </div>
        </ui:define>

</ui:composition>  

[mueller]

i solve my problem alone :)

....
          <ui:define name="body"> 
          
   
          <div class="demo">
               
               <div id="draggable" class="ui-widget-content">
                    <p>Drag me around</p>
               </div>
               
          </div>
          

          <rich:jQuery selector="#draggable" query="draggable()" />



     </ui:define>
...