1

我需要在 DataTable 行上结合拖放和重新排序。我知道有办法在不同的列上执行此操作（例如一列用于重新排序，另一列用于拖放），但我需要在一个元素上执行此操作。
我尝试了不同的方法，但没有任何效果。问题是，一旦触发重新排序，我就不能将它放在该区域。它总是返回到表的末尾。获取鼠标位置是行不通的，因为我需要让它对移动设备具有响应性和可用性。

HTML：

    <p:fieldset id="availableCarsField" legend="Available Cars">
      <p:dataTable id="availableCars"
                   var="car"
                   widgetVar="widgetVarAvailableCars"
                   draggableRows="true"
                   value="#{dndCarsView.cars}">

        <p:column id="dragColumn"style="width:20px;">
          <h:outputText id="test" value="#{car.id}"/>
          <p:draggable helper="clone" revert="true"/>
        </p:column>

      </p:dataTable>
    </p:fieldset>

    <!--  ........................... DROP  ...........................-->

    <p:fieldset id="selectedCars" legend="Selected Cars">

      <p:outputPanel id="dropArea">
        <h:outputText value="!!!Drop here!!!"
                      rendered="#{empty dndCarsView.droppedCars}"
                      style="font-size:24px;"/>

        <p:dataTable id="selectedCarsTable"
                     var="car"
                     value="#{dndCarsView.droppedCars}"
                     rendered="#{not empty dndCarsView.droppedCars}">

          <p:column headerText="Id">
            <h:outputText value="#{car.id}"/>
          </p:column>

        </p:dataTable>
      </p:outputPanel>
    </p:fieldset>

    <p:droppable for="selectedCars"
                 tolerance="touch"
                 activeStyleClass="ui-state-highlight"
                 onDrop="handleDrop"
                 datasource="availableCars">
      <p:ajax listener="#{dndCarsView.onCarDrop}"
              process="@form"
              update="dropArea availableCars"/>
    </p:droppable>

JS：

    function handleDrop(event, ui) {
      var droppedCar = ui.draggable;
      droppedCar.fadeOut('fast');

    }

Bean（如果需要）：

public class DNDCarsView implements Serializable {

  private List<Car> cars;
  private List<Car> droppedCars;

  @PostConstruct
  public void init() {
    cars = createCars(9);
    droppedCars = new ArrayList<>();
  }

  public List<Car> createCars(int size) {
    List<Car> list = new ArrayList<>();
    for (int i = 0; i < size; i++) {
      list.add(new Car("" + i, "Brand" + i, i * 2000, "Color" + i));
    }
    return list;
  }

  public void onCarDrop(DragDropEvent ddEvent) {
    Object car = ddEvent.getData();

    droppedCars.add((Car) car);
    cars.remove(car);
  }

  public void onReorder(ReorderEvent event) {
    Car car = cars.get(event.getFromIndex());
    cars.add(event.getToIndex(), car);
    cars.remove(event.getFromIndex());
  }
//Getter & Setter
}

无论如何将这两者结合起来并让它运行？
提前致谢

编辑：
我想重新排序 DataTable 中的行，并且还能够将拖动的行放入字段集中。

Primefaces 6.2.12
JSF 2.2

编辑2： 经过一个月的尝试，我还没有找到解决问题的好方法。只是想，如果其他人处理这个问题，我可能会在这里分享这个。

我似乎没有办法在一个元素（在我的例子中是 p:column）上实现 Drag&Drop 与 columnreorder 的结合。问题是，拖动时总是会触发重新排序事件。当被拖放到放置区域时，被拖动元素的dragId为null（因为我们以reorder-event开始但以拖放事件结束）

由于不允许我更改任何不属于我的课程的内容，因此我无法解决此问题。我最终将动作分成两个元素。所以我做了一个拖动手柄，用户可以将元素拖动到放置区域并实现对列的重新排序。

如果我是盲人并且有人知道这个问题的答案，请随意写。也许它可能会帮助某人。至少是否有办法这样做会很有趣

4

0 回答 0