title: Primefaces draggable event only
body: <p>I want to make a list of primefaces panels draggable and i want to catch the event in order to save the position.
  Is that possible?
  Thank you, i am here for further explanation</p>
  
  <p>The jquery method that i have used:</p>
  
  <pre><code>$(function() {
   $(" .dragPanel").draggable({
    start: function() { },
    drag: function() {
        var theId= $( this).attr("id");
        $("#form0\\:thePanelId").val(theId);
        var offset = $( this ).offset();
        var left = offset.left;
        var top = offset.top;
  
        var parent = $(window);
  
        var leftParent = parent.width();
        var topParent = parent.height();
  
        $("#form0\\:left").val(100*left/leftParent);
        $("#form0\\:top").val(100*top/topParent);
        $("#form0\\:leftParent").val(leftParent);
        $("#form0\\:topParent").val(topParent);
    },
  
    stop: function() {
      jQuery( "[id$='buttonId']" ).click();
   } });
    })
  </code></pre>
  
  <p><strong>form snippet :</strong></p>
  
  <pre><code>   &lt;p:inputText id="left" value="#{reportDetailsManagedBean.left}" style="display: none;"&gt; &lt;/p:inputText&gt;
     &lt;p:inputText id="top" value="#{reportDetailsManagedBean.top}" style="display: none;"&gt; &lt;/p:inputText&gt;
     &lt;p:inputText id="leftParent" value="#{reportDetailsManagedBean.leftParent}" style="display: none;"&gt; &lt;/p:inputText&gt;
     &lt;p:inputText id="topParent" value="#{reportDetailsManagedBean.topParent}" style="display: none;"&gt; &lt;/p:inputText&gt;
     &lt;p:inputText id="thePanelId" value="#{reportDetailsManagedBean.thePanelId}" style="display: none;"&gt;&lt;/p:inputText&gt;
  
     &lt;h:commandButton id="buttonId" actionListener="#{reportDetailsManagedBean.saveDragChange()}" style="display: none;" /&gt;
  </code></pre>