在不使用框架的情况下拖放JSF

时间:2017-11-15 15:12:10

标签: javascript jsf jsf-2 drag-and-drop draggable

我想让我的JSF应用程序在列表中的不同元素之间具有拖放功能。

我应用了一个基本教程here来制作拖放功能,所以我有类似的东西:

SELECT p.id AS id
     , p.title AS title
     , p.title AS company
  FROM products p
  JOIN companies co
    ON co.id = p.company_id
 WHERE MATCH (p.title) AGAINST ('Test')
    OR MATCH (co.title) AGAINST ('Test')
    OR EXISTS ( SELECT 1
                  FROM categories k
                  JOIN product_categories pc
                    ON pc.category_id = k.id
                 WHERE pc.product_id = p.id
                   AND k.title IN ('Test1','Test2')
              )
 ORDER BY p.id

和我的剧本:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"
                style="padding: 10px; border: 1px solid #aaaaaa;">
    <h:panelGroup>
        <ui:repeat value="#{bean.list1}" var="item">
            <p id="drag_#{item.name}" draggable="true"
                            ondragstart="drag(event)">#{item.name} top</p>
        </ui:repeat>
    </h:panelGroup>
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"
                style="padding: 10px; border: 1px solid #aaaaaa;">
    <h:panelGroup>
        <ui:repeat value="#{bean.list2}" var="item">
            <p id="drag_#{item.name}" draggable="true"
                            ondragstart="drag(event)">#{item.name}</p>
        </ui:repeat>
    </h:panelGroup>
</div>

在div1中我有一个来自list1的项目列表,类似于div2我有来自list2的项目列表。我想将div1中的项目拖放到div2中,反之亦然。它工作正常,但新项目仍未添加到其后面的bean列表中。任何人都可以帮助我如何做到这一点 - 将删除的项添加到bean的列表中。是否可以在不使用Richfaces或Primefaces等其他外部框架的情况下完成?谢谢大家先进!

0 个答案:

没有答案