Can I drag and drop multiple objects onto a FabricJS canvas at the same time?

Question

I am working on a touch application w / Fabric.js . Out of the box, drag and drop support is phenomenal. Unfortunately, you can only drag one object at a time - the rest of the canvas is essentially “locked” until the current drag and drop of the object ends.

Can I drag more than one object at a time? How can I do that? My use case: imagine a canvas with a few pieces of a puzzle that you can touch / drag. I would like to be able to independently touch and drag at least 2 parts (each with a different finger) at the same time.

I use a standard drag and drop event handler. I do not see any obvious way to accomplish this.

canvas.on('object:moving', function (e) { ... }); 

Answer 1

You can group objects.

 var mygroup = new fabric.Group([ obj1, obj2, obj3 ], { left: 200, top: 200 }); canvas.add(group); 

You can pre-group your objects or let the user choose which objects to group. You can drag a group all together.

This method works after version 1.3.12