dispatch sortenter

[christophe-g]

Replace and supersedes #492

• dispatches sortenter event first time dragged item enters a container;
• makes sure original target is sent with the sortenter and sortstart event;

Motivation:

• Be able to listen to sortenter event - useful when dragging to a different list and wish to update placeholder content.
• Make sure we have a way to trace back the original target in sortstart and sortenter event. When sortable is used with copy = true, the dragged item is a deep-copy of the original target. This prevents accessing the real original target. it is a problem in some cases (like in polymer dom-repeat component) where only the original target holds some linked properties.

[lukasoppermann]

Hey @christophe-g,

looks very good. You are sending the originalTarget because it could be a list item instead of the sortable itself, correct?

I fixed the issues with the tests, so could you please also fix the styling issues (https://travis-ci.org/lukasoppermann/html5sortable/builds/500918185#L521) so I can merge it, thanks.

[christophe-g]

@lukasoppermann - done.

Reason for originalTarget to be included is to make Polymer 2.0 code below - temporarily storing draggedModel and draggedIndex on startdrag - work also when sortable config.copy = true.

Polymer 2.0 version of html5-sortable tries to work with data model used by dom-repeat directly rather than dom-nodes: drag event will mutate array items, which triggers a refresh of dom-repeat.

// Note(cg): we use this event to store model (dom-repeat item) hold by the dragged item.
      _onSortstart(event) {
        event.stopPropagation();
        if (this.parentClass) {
          this.parentElement.classList.add(this.parentClass);
        }
        const startparent = event.detail.origin && event.detail.origin.container,
          startrepeater = this._getRepeater(startparent);

        this.draggedModel = startrepeater.itemForElement(event.detail.originalTarget);
        this.draggedIndex = startrepeater.indexForElement(event.detail.originalTarget);

        // Note(cg): when we use a handle, originalTarget is the handle itself
        // and not the initial dragged item
        if (!this.draggedModel && event.detail.originalTarget.domHost) {
          this.draggedModel = startrepeater.itemForElement(event.detail.originalTarget.domHost);
          this.draggedIndex = startrepeater.indexForElement(event.detail.originalTarget.domHost);
        }

        this._dispatch('sort-start', event);

      }

This is to be used like

 <paper-listbox>
        <polymer-sortable copy placeholder="<paper-item>drop</paper-item>" accept-from=".none" items="paper-item">
          <template is="dom-repeat" items="[[items]]">
              <paper-item>[[item.key]]</paper-item>
          </template>
        </polymer-sortable>
      </paper-listbox>

Note, Polymer 2.0 version is still a bit too WIP, but will push it soon

[lukasoppermann]

I'll merge this later. 👍 If you have time to add tests for this that would be great so that this behavior is not accidentally broken down the line.

Are you planning on sending a PR for a polymer 2 adapter as well?

[christophe-g]

@lukasoppermann

• I was planning to send a Polymer 2 adapter directly to https://github.com/rodrigosancho/polymer-html5sortable. But since it is a complete rewrite (event with different component names), I am not yet sure whether to publish it independently.
• no time for writing additional test before end April, sorry. In the middle of huge production upgrade with my current app...