Polymer2.0拖拽

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<dom-module id="drag-element">
    <template>
        <custom-style>
            <style is="custom-style" include="iron-flex iron-flex-alignment">
                :host {
                    display: block;
                }

                section {
                    width: var(--drag-element-width, 100%);
                    min-height: var(--drag-element-height, 100%);
                    position: relative;
                }
            </style>
        </custom-style>
        <section on-drop="drop" on-dragstart="dragstart" on-dragover="dragover"
                 class="layout horizontal center wrap center-justified ">
            <slot></slot>
        </section>
    </template>
    <script>
        class DragElement extends Polymer.Element {
            static get is() {
                return 'drag-element';
            }

            static get properties() {
                return {
                    location: {
                        type: Boolean,
                        notify: true,
                        reflectedToAttribute: true,
                    },
                    position: {
                        type: Object,
                        notify: true,
                        reflectToAttribute: true
                    },
                    user:String,
                }
            }

            dragstart(e) {
                let item; //最多只允许嵌套一层
                if (e.target.getAttribute('level')) item = e.target.parentNode;
                else item = e.target;
                e.dataTransfer.setData('id', item.id);
                e.dataTransfer.setData('offset', JSON.stringify({
                    x: e.pageX - item.offsetLeft - this.offsetLeft,
                    y: e.pageY - item.offsetTop - this.offsetTop
                }));
            }

            dragover(e) {
                e.preventDefault();
            }

            drop(e) {
                let id = e.dataTransfer.getData('id');
                let user = this.getAttribute('user');
                let dragElements = document.body.querySelector(`${user}`).shadowRoot.querySelectorAll("drag-element");
                dragElements = [...dragElements];
                let ele;
                for (let i = 0; i < dragElements.length; i++) {
                    ele = dragElements[i].querySelector(`#${id}`);
                    if (ele) break;
                }
                if (ele) {
                    this.appendChild(ele);
                    if (this.getAttribute('location')) this.dragElementLocation(e, ele);

                }
            }

            dragElementLocation(e, c) {
                let offset = JSON.parse(e.dataTransfer.getData('offset'));
                this.position = {
                    x: (e.pageX - this.offsetLeft - offset.x) * 100 / this.clientWidth,
                    y: (e.pageY - this.offsetTop - offset.y) * 100 / this.clientHeight,
                };
                c.style.left = this.position.x + '%';
                c.style.top = this.position.y + '%';
            }

        }

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

demo 需要指定user=当前组件名

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="drag-element.html">
<dom-module id="demo-element">
    <template>
        <custom-style>
            <style is="custom-style">
                drag-element {
                    --drag-element-width: 100%;
                    --drag-element-height: 30%;
                    background: #00b0ff;
                    border: 1px solid red;
                }

                drag-element > * {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    border: 1px solid red;
                    text-align: center;
                    line-height: 40px;
                }

                drag-element[location="true"] > * {
                    position: absolute;
                    background: rgba(255,255,255,1 );
                }

            </style>
        </custom-style>

        <drag-element user="demo-element">
            <div draggable="true" id="dragelement-1">1</div>
            <div draggable="true" id="dragelement-2">2</div>
            <div draggable="true" id="dragelement-3">3</div>
            <div draggable="true" id="dragelement-4">4</div>
            <div draggable="true" id="dragelement-5">5</div>
            <div draggable="true" id="dragelement-6">6</div>
        </drag-element>
        <drag-element location="true" user="demo-element">
            <div draggable="true" id="dragelement-7">
                7
                <p>aaaaaaaaaa</p>
                <p>cccccccccc</p>
            </div>
            <div draggable="true" id="dragelement-8">
                8
                <p>ddddddddddd</p>
                <p>eeeeeeeeeee</p>
            </div>
        </drag-element>
    </template>
    <script>
        class DemoElement extends Polymer.Element {
            static get is() {
                return 'demo-element';
            }
        }

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

<style>
    html, body {
        margin: 0;
        padding: 0;
    }
</style>
<demo-element></demo-element>