Primefaces只有可拖动的事件

Question

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

The jquery method that i have used:

$(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();
 } });
  })

form snippet :

   <p:inputText id="left" value="#{reportDetailsManagedBean.left}" style="display: none;"> </p:inputText>
   <p:inputText id="top" value="#{reportDetailsManagedBean.top}" style="display: none;"> </p:inputText>
   <p:inputText id="leftParent" value="#{reportDetailsManagedBean.leftParent}" style="display: none;"> </p:inputText>
   <p:inputText id="topParent" value="#{reportDetailsManagedBean.topParent}" style="display: none;"> </p:inputText>
   <p:inputText id="thePanelId" value="#{reportDetailsManagedBean.thePanelId}" style="display: none;"></p:inputText>

   <h:commandButton id="buttonId" actionListener="#{reportDetailsManagedBean.saveDragChange()}" style="display: none;" />

Answer 1

If you want to change the button upload the form with ajax change by

<h:commandButton id="buttonId" style="display: none;" 
 actionListener="#{reportDetailsManagedBean.saveDragChange()}"  >
    <f:ajax execute="@form" render=":rootViewId" />
</h:commadButton>

This execute="@form" will upload the entire form, `render=":rootViewId" will search for the id from the root view of the document and will upload any changes made to bean.

other way to do it and I like more since you're using primefaces . Is to use the pf commandButton that is ajax based for default

<p:commandButton id="buttonId" style="display: none;" 
 actionListener="#{reportDetailsManagedBean.saveDragChange()}" update="@form" />

the attribute in the <p:commandButton update will update the form after the ajax is completed

I hope this help you , greets

---

Edited

About just working for the first drag...

In this line Im not sure is this works:

but you better use typical jquery sintax

replace:

jQuery( "[id$='buttonId']" ).click();

by

$("#buttonId").click();