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＆amp; d存在问题，我只能拖放＆＃34; availableEmailsField＆＃34;中的一个元素。当我尝试删除另一个元素时，它会删除前一个元素并添加删除的元素。

Answer 1

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

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

Answer 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>

希望对您有帮助！

Primefaces Drag＆amp; Drop drags只从dataTable中删除一个元素

2 个答案: