问题描述
我希望能够一旦开始就停止/取消拖动动作,例如按Esc键。 我正在基于Primefaces Showcase示例进行工作。 https://www.primefaces.org/showcase/ui/dnd/dataTable.xhtml
<h:form id="carForm">
<p:dataTable id="availableCars">
<p:column>
<h:outputText id="dragIcon" styleClass="ui-icon pi pi-plus"/>
<p:draggable id="draggable" for="dragIcon" revert="true" helper="clone"/>
</p:column>
</p:dataTable>
<p:outputPanel id="droppedArea">
<!-- Here,there is a datatable where dragged rows are shown -->
<p:dataTable id="selectedCars">
...
</p:dataTable>
</p:outputPanel>
<p:droppable for="droppedArea" tolerance="touch" datasource="availableCars">
<p:ajax listener="#{actionView.onDrop}" update="availableCars selectedCars" />
</p:droppable>
</h:form>
在keyup事件中,我尝试了很多操作来还原放置事件,甚至将事件发送到未放置的位置。我还尝试过修改PrimeFaces.widget.Droppable.prototype.bindDropListener函数。
<script type="text/javascript">
//detect Escape key press
document.addEventListener("keyup",function(event) {
if(event.keyCode === 27){
$('.ui-draggable:data(draggable)').draggable( 'option','revert',true ).trigger( 'mouseup' );
}
});
</script>
解决方法
所以这很棘手,我不得不自己使用它来修复DataTable drop / drop中的错误。您必须有权访问Jquery Drag Drop Manager并取消所有事件。
var dragdrop = $.ui.ddmanager.current;
if (dragdrop) {
document.body.style.cursor = 'default';
dragdrop.cancel();
}