Primefaces Drag&Drop 只从 dataTable 中拖放一个元素答案

【问题标题】：Primefaces Drag&Drop drags and drops only one element from dataTablePrimefaces Drag&Drop 只从 dataTable 中拖放一个元素
【发布时间】：2017-06-02 10:50:19
【问题描述】：

所以，我使用了 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”中拖放一个元素。当我尝试删除另一个元素时，它会删除前一个元素并添加已删除的元素。

【问题讨论】：

标签： primefaces jsf-2

【解决方案1】：

我认为问题出在你的 bean 上。

确保在 @PostConstruct 方法中初始化 customEmailQueue 并使用正确的 bean 范围。在这种情况下@ViewScoped。

【讨论】：

【解决方案2】：

似乎必须正确设置更新功能才能正常工作。我遇到了同样的问题，发现dropable里面的ajax必须更新所有的拖放区域元素，看来这个动作解决了这个问题。

有效的解决方案是在您的表单中放入：

 <h:panelGroup id="elementsPanel">
   ....
     ...
      ...
     ...
   ....
 </h:panelGroup>

，围绕所有拖放元素（如果您不想要面板组，则想法是更新所有组件）

并在可下拉更新此面板：

 <p:droppable id="dropHandler" for="selectedTable" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="myDataSource" onDrop="handleDrop">
                    <p:ajax listener="#{dimensionsClass.onDimensionDrop2}" update="elementsPanel" />
                </p:droppable>

希望对你有帮助！

【讨论】：