仅限 Primefaces 可拖动事件答案

【问题标题】：Primefaces draggable event only仅限 Primefaces 可拖动事件
【发布时间】：2014-07-22 13:44:02
【问题描述】：

我想制作一个可拖动的 primefaces 面板列表，并且我想捕捉事件以保存位置。那可能吗？谢谢，我来这里是为了进一步解释

我用过的jquery方法：

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

表格 sn-p ：

   <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;" />

【问题讨论】：

你想捕捉的究竟是什么，窗口中的 x ,y 位置？
是的，我想捕捉 x 和 y 位置
如果你想捕捉 x，y 位置，我认为 jsf 组件支持这一点，你将无法在服务器端使用 java 来实现。你可以在客户端用js来做。
我使用了一种 jquery 方法，我在下面的问题中添加了该方法，但问题是当单击按钮时，每次移动都会刷新页面，这不是友好的使用。有没有办法使用 ajax 请求将我的数据从 jquery 发送到服务器？谢谢你

标签： jsf primefaces draggable

【解决方案1】：

如果要更改按钮，请通过 ajax 更改上传表单

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

execute="@form" 将上传整个表单，`render=":rootViewId" 将从文档的根视图中搜索 id 并上传对 bean 所做的任何更改。

其他方式，我更喜欢，因为您使用的是 primefaces。是使用默认的基于ajax的pf commandButton

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

<p:commandButtonupdate中的属性会在ajax完成后更新表单

希望对你有帮助，问候

已编辑

关于第一次拖动的工作......

在这一行我不确定这是否有效：

但你最好使用典型的 jquery sintax

替换：

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

由

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

【讨论】：

感谢您的建议。实际上两者都有效，但仅适用于第一个组件。（我的意思是我可以移动一个面板，但我不能移动其他面板）。奇怪……有什么我想念的吗？
js控制台呢？有没有错误？还是一切都很好？，因为我不确定这是否可行jQuery( "[id$='buttonId']" ).click();
在js控制台中没有也没有错误，对于按钮，它被点击并被调用。