Primefaces Drag＆Drop僅拖放數據表中的一個元素

Question

因此，我使用PrimeFaces https://www.primefaces.org/showcase/ui/dnd/dataTable.xhtml的展示示例。這是我的代碼：

<div class="page_content"> 
     <div class="header">Очередь рассылок</div> 
     <script type="text/javascript"> 
      function handleDrop(event, ui) { 
       var droppedEmail = ui.draggable; 

       droppedEmail.fadeOut('fast'); 
      } 
     </script> 
     <h:form> 
      <p:fieldset id="availableEmailsField" legend="Доступные рассылки"> 
       <p:dataTable id="availableEmails" var="email" value="#{emailingQueueUI.customEmails}"> 
        <p:column style="width: 20px;"> 
         <h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4"/> 
         <p:draggable for="dragIcon" revert="true" helper="clone"/> 
        </p:column> 
        <p:column headerText="ID"> 
         <h:outputText value="#{email.id}"/> 
        </p:column> 
        <p:column headerText="Название"> 
         <h:outputText value="#{email.name}"/> 
        </p:column> 
        <p:column headerText="Заголовок"> 
         <h:outputText value="#{email.header}"/> 
        </p:column> 
        <p:column headerText="Количество порции"> 
         <h:outputText value="#{email.chunkSize}"/> 
        </p:column> 
       </p:dataTable> 
      </p:fieldset> 

      <p:outputPanel id="selectedEmailsField"> 
       <p:outputPanel id="dropArea"> 
        <h:outputText value="Переместите сюда c доступных рассылок" rendered="#{empty emailingQueueUI.customEmailQueue}" style="font-size:16px;" /> 
        <p:dataTable id="selectedEmails" var="email" value="#{emailingQueueUI.customEmailQueue}" rendered="#{not empty emailingQueueUI.customEmailQueue}" 
           rowIndexVar="index"> 
         <!--<p:ajax event="rowReorder" listener="#{emailingQueueUI.onQueueReorder}" update=":form" />--> 
         <p:column headerText="Номер в очереди"> 
          <h:outputText value="#{index}"/> 
         </p:column> 
         <p:column headerText="Рассылка"> 
          <h:outputText value="#{email.id}"/> 
         </p:column> 
         <p:column headerText="Название"> 
          <h:outputText value="#{email.name}"/> 
         </p:column> 
         <p:column headerText="Заголовок"> 
          <h:outputText value="#{email.header}"/> 
         </p:column> 
         <p:column headerText="Количество порции"> 
          <h:outputText value="#{email.chunkSize}"/> 
         </p:column> 
        </p:dataTable> 
       </p:outputPanel> 
      </p:outputPanel> 

      <p:droppable for="selectedEmailsField" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableEmails" onDrop="handleDrop"> 
       <p:ajax listener="#{emailingQueueUI.onEmailDrop}" update="dropArea availableEmails" /> 
      </p:droppable> 
     </h:form> 

    </div> 

沒有與d & d一個問題，我可以將只有一個元素，從「availableEmailsField」下降。當我嘗試刪除另一個元素時，它將刪除以前的元素並添加刪除的元素。

Answer 1

我認爲問題出在你的bean上。

確保您在@PostConstruct方法內初始化customEmailQueue並使用適當的bean作用域。在這種情況下，@ViewScoped。