DataTable 行でドラッグ アンド ドロップと並べ替えを組み合わせる必要があります。異なる列でこれを行う方法があることは知っていますが (1 つの列を並べ替え用に、もう 1 つの列をドラッグ アンド ドロップ用に)、1 つの要素で行う必要があります。
さまざまな方法を試しましたが、何もうまくいきませんでした。問題は、再注文がトリガーされると、そのエリアにドロップできないことです。常にテーブルの最後に戻ります。マウスの位置を取得することはできません。応答性が高く、モバイル デバイスで使用できるようにする必要があるためです。
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
}
これら2つを組み合わせて実行する方法はありますか？
前もって感謝します
編集:
DataTable 内の行を並べ替え、ドラッグした行をフィールドセットにドロップできるようにしたい。
プライムフェイス 6.2.12
JSF 2.2
編集 2: 1 か月試した後、問題の適切な解決策が見つかりませんでした。他の誰かがこの問題に対処している場合、ここでこれを共有するかもしれないと思った.
1 つの要素 (私の場合は p:column) で columnreorder と組み合わせて Drag&Drop を実現する方法はないようです。問題は、ドラッグすると常に reorderevent がトリガーされることです。ドロップ領域にドロップすると、ドラッグされた要素の dragId は null になります (reorder イベントで開始し、ドラッグ アンド ドロップのイベントで終了したため)
私のクラスではないものを変更することは許可されていなかったという事実のために、私はこれを修正することができませんでした. 最終的に、アクションを 2 つの要素に分けました。そこで、ユーザーが要素をドロップエリアにドラッグできるドラッグハンドルを作成し、列の並べ替えを実現しました。
私が盲目で、誰かがこれに対する答えを知っている場合は、気軽に書いてください. たぶんそれは誰かを助けるかもしれません。少なくともそうする方法があるかどうかは興味深いでしょう