Drag and drop with Polymer and InteractJS
Need drag and drop with your Polymer (1+) elements?
You can integrate InteractJS, a great library for handling drag/drop behavior.
- Add interactjs to your proyect
- Create a simple html file that will act as html import wrapper for interactjs
- Setup the drop zones and draggables using InteractJS API
bower install --save interactjs
Create wrapper for Interact
Create an .html file ‘interact-wrapper.html’
Create reference html for interactjs dependency.
The contents of this html will be only the script reference to the interactjs file, nothing else.
In the example we have a Polymer element called GameBoard that allows cards to be dragged and dropped to the specific drop zones.
Make sure to setup the draggable and dropzones when the DOM elements are there.
If you use templates inside your component markup, don’t use the ready/attached event to directly setup your elements, because the elements may not be on the DOM yet. With dom-repeat templates use the event dom-change to be sure that the elements are present.