Объедините перетаскивание и изменение порядка в ap: dataTable - PullRequest
Новая
       38

Объедините перетаскивание и изменение порядка в ap: dataTable

1 голос
/ 25 мая 2020

Мне нужно объединить перетаскивание и изменение порядка в строке 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

...