Vaadin 8.1 Drag & Drop criterion examples


I don’t find examples in the Vaadin docs on how to use the Drag & Drop payload/criterion and what it actually does.

Is there a project example on GitHub or something else where I could find examples on how to use this feature?


I found something in vaadin frameworks tests :


One way of providing a criteria is with a criteria script. This should be a javascript code that receives the drag event and you can maually observe its properties and decide whether a drop is acceptible. Properties include those added by the drag source’s setDataTransferText() or setDataTransferData().

The Criteria API is making some of this manual labour easier by providing a way of setting a payload of type String, Integer or Double, which eventually is added to the transfer data as well with special key and value. See DragSourceExtension.setPayload() methods. The drop target API can observe this payload and apply comparision to allow or prevent drop happening.

For example in a card game you can set a text source.setPayload("cardSuit", "hearts") and on the drop target side add a criterion target.setDropCriterion("cardSuit", "hearts") which will accept playing cards with hearts. Other suits, such as source.setPayload("cardSuit", "diamonds"), won’t be accepted .

You can similarly use numbers with comparison operator. In the card game example, a target target.setDropCriterion("cardRank", ComparisonOperator.GREATER_THAN, 10) will reject source.setPayload("cardRank", 5) but will accept source.setPayload("cardRank", 11), i.e. will only accept playing cards J, Q, K, A but will reject cards 2 to 10.

And you can also combine multiple such criteria using the DropTargetExtension.setDropCriteria() method with Match.ANY (or operator) or Match.ALL (and operator).


When running CardShuffleTest, I am having trouble understanding how the source and target drop effects interact, as many combinations appear be be allowed. e.g. copy->copy, copy->link, move->copy, move->copy, link->copy, link->copy, but NOT link->link.

Also I cannot see any evidence that the payload/criteria are being honoured.

Is there something that I am missing in the test and/or documentation?

I just discovered the following open issue which explains my problems with drop effects not being honoured -

As far as I can see however using FF or Chrome does not fix the issues with the payload/criteria being honoured.