Clone tile on drag (pallete)

[bennypowers]

I'd like to clone tile on drag, such as in a tool pallete. The tile stays in place when dragged, and a copy is cloned to the drop location.

[bennypowers]

Here's an example of some code which provides a basic version of this functionality, specific to its case.

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/the-grid/the-grid.html">
<link rel="import" href="../../bower_components/the-grid/debug-grid.html">

<dom-module id="math-canvas-app">
  <template>
    <the-grid id="mathPallete"
        draggable
        animated
        cell-height="32"
        cell-width="32"
        cell-margin="0"
        col-count="20"
        row-count="20"
        on-move="onMove">

      <dom-repeat items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]" as="number" index-as="index">
        <template>
          <tile row="0" index$="[[index]]" col$="[[index]]" type="number" height="1" width="1">[[number]]</tile>
        </template>
      </dom-repeat>

      <dom-repeat items="[[operators]]" as="operator" index-as="index">
        <template>
          <tile row="1" index$="[[index]]" col$="[[index]]" type="operator" height="1" width="1">[[operator]]</tile>
        </template>
      </dom-repeat>

    </the-grid>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class MathCanvasApp extends Polymer.Element {
      static get is() {return 'math-canvas-app';}
      static get properties() {
        return {
          operators: {
            type: Array,
            value: () => [
              '+',
              '-',
              'x',
              '÷',
              '=',
            ],
          },
        };
      }

      onMove(event) {
        const tile = event.detail.tile;
        const type = tile.getAttribute('type');
        let clone = document.createElement('tile');
            clone.setAttribute('row', type === 'number' ? 0 : 1);
            clone.setAttribute('type', tile.getAttribute('type'));
            clone.setAttribute('height', 1);
            clone.setAttribute('width', 1);
            clone.setAttribute('col', tile.getAttribute('index'));
            clone.setAttribute('index', tile.getAttribute('index'));
            clone.innerHTML = tile.innerHTML;
        this.$.mathPallete.appendChild(clone);
        tile.style.color = type === 'number' ? 'blue' : 'red';
      }
    }

    customElements.define(MathCanvasApp.is, MathCanvasApp);
  </script>
</dom-module>

[vpusher]

@bennypowers If I understand it well, you just need some "drag start" event so you can duplicate the tile when the user starts dragging a tile. Cause currently you only have the move event, which is kind of "drag stop". Am I right ?

[bennypowers]

Yes that sounds good