1

I need to combine Drag and Drop and Reorder on a DataTable row. I know that there are ways to do this on different columns (like one column for the reorder, the other one for Drag and Drop), but I need to do it on one Element.
I tried different ways, but nothing worked. The Problem is, that once the reordering is triggered, I can't drop it in the area. It always returns to the end of the table. Getting the mouse position wouldn't work, because i need to make it responsive and usable for mobile devices.

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 (in case it's required):

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
}

Is there anyway to combine these two and get this running?
Thanks in advance

Edit:
I want to reorder the rows inside the DataTable and also be able to drop the dragged row into the fieldset.


Primefaces 6.2.12
JSF 2.2

Edit 2: After month of trying I haven't found a good solution for my problem. Just thought, that I might share this here, if someone else deals with this problem.

I seems like there is no way to realize Drag&Drop in combination with columnreorder on one element (in my case p:column). The problem is, that always the reorderevent is triggered when dragged. When dropped into the droparea, the dragId of the dragged element is null (because we started with the reorder-event but ended with the event for drag and drop)

Due to the fact that I wasn't allowed to change anything which wasn't my class I didn't manage to fix this. I ended up to separate the actions onto two elementes. So I made a drag handle where the user can drag the element into the droparea and realized the reorder on the column.

If I was blind and someone knows an answer to this feel free to write. Maybe it might help someone. At least it would be interesting whether there is a way to do so

Sheena
  • 107
  • 9
  • Can you specify your use case? None of your columns can be sorted and trying your example drag&drop doesn't work. – WoAiNii May 26 '20 at 21:04
  • I need to combine Drag&Drop with Reorder. If possible on the same element. Drag and drop on another panel, reorder within the same list. I'm not sure about your definition of sort. Do you mean sort = reorder or sort = the original sort function by PrimeFaces? – Sheena May 28 '20 at 13:11
  • I mean sort for sorting row value of a column and reorder for change order of column, switch column disposition, but in your code, there's only one column so you can't reorder; also drag&drop isn't working, using your code (is this your issue?). Do you mean reorder, so your real table has more columns or that if the column is sorted, drag&drop has to keep the sort order? – WoAiNii May 28 '20 at 13:36
  • I changed the Question a bit, so I hope it's more clear. I want to reorder the **rows** inside the DataTable and Drop the row into the other fieldset / panel. – Sheena May 30 '20 at 08:38
  • I can't test with that minor version, but with plain 6.2 drag&drop works almost fine, even if the source column or/and destination one is/are sorted, the result after the drop keeps the correct sorting order. The only limit a see, using your code, is that drag&drop works only when selecting text, else I can't drop (is this the issue you're facing?) – WoAiNii May 30 '20 at 13:10
  • The issue i'm facing is that when i activate the attribute draggableRows, and try to drop the column in the dropArea it always sort the row at the end of the table. I understand why it does so, but I try make it work like: When you are inside the fieldset where the row initally comes from, the reorder event triggers. When you drop the row over the fieldset with the drop area Drag & Drop triggers. It would be a work around to make the Drag & Drop on the text and the reorder on the row. But imo it's not really inutitive and that's why I try to make both events on the row. – Sheena May 30 '20 at 15:16
  • [case 1](https://imgur.com/3PIFYbi), [case 2](https://imgur.com/zerS2zd), [error](https://imgur.com/HhAZ9fa), using your code. Case 2 seems your expected result, but case 1 seems also ok, since the destination list isn't set as ordered (if you need to order also case one, add an order, at the end of drop listener) – WoAiNii May 30 '20 at 15:42
  • Tried PF 8 in a [mcve]? @WoAiNii: better try with PF 7 then instead of plain 6.2. 7 containsll fixes from 6.2.x – Kukeltje May 30 '20 at 18:35
  • @Kukeltje thanks for the useful suggestion – WoAiNii May 30 '20 at 19:33

0 Answers0