controllets/draggable-element-controllet/draggable-element-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/color.html">

<dom-module id="draggable-element-controllet">
    <template>

        <style is="custom-style">

            .drag-content-target{
                height: 12.5em;
                width: 13.5em;
                font-weight: bolder;
            }

            .drag-content-source{
                height: 1.5em;
                width: 12.5em;
               /* min-height: 20px;
                min-width: 70px;
                max-height: 20px;
                max-width: 70px;*/
            }

            .onTrackOnTarget{
                position: relative;
                float: left;
                margin : 0.625em;
                height: 1.6em;
                width: 13.5em;
                background: #fff;
                padding: 1em;
                border-style: solid;
                border-width : 0.2625em;
                border-color : var(--paper-blue-500);
                border-radius: 0.425rem;
                box-shadow: 0 0.325em 0.3125em 0 rgba(0, 0, 0, 0.25);
                overflow: hidden;
            }

            .draggable-card{
                position: relative;
                float: left;
                margin : 0.625em;
                height: 1.5em;
                width: 13.5em;
                border-width : 0.0625em
                background: #fff;
                border-radius: 0.425rem;
                box-shadow: 0 0.325em 0.3125em 0 rgba(0, 0, 0, 0.25);
                padding: 1em;
                overflow: hidden;
            }

            .avatar {
                display: inline-block;
                position: relative;
                float: left;
                height: 2em;
                width: 2em;
                border-radius: 50%;
                background: var(--paper-blue-500);
                color: white;
                line-height: 2em;
                font-size: 0.9375em;
                text-align: center;
            }

            .heading{
                width: 12.5em;
            }

            .big {
                display: inline-block;
                position: relative;
                float: left;
                font-size: 1em;
                padding: 0.5em 0.25em 0.5em;
                color: var(--google-grey-500);
            }

            .medium {
                font-size: 0.8125em;
                padding-bottom: 0px;
                display: inline-block;
                width: 12.5em;
            }

            .unselectable {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

        </style>

        <template is="dom-if" if="{{isTarget}}">
            <div class="drag-content-target" draggable="false">
                <div class="card-content">
                    <div class="heading">
                        <div class="avatar">{{number}}</div>
                        <div class="big">{{heading}}</div><br>
                    </div>
                    <div class="medium">{{description}}</div>
                </div>
                <div id="target_dragged_identifier" class='draggable-card dd-content-target unselectable'></div>
            </div>
        </template>

        <template is="dom-if" if="{{!isTarget}}">
            <div id="source" class="drag-content-source" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')" on-track="_handleTrack" on-drag="_handleOnDrag" on-dragstart="_handleStartDrag" on-dragenter="_handleEnterDrag">
                <div id="{{identifier}}" class='draggable-card unselectable'>{{label}}</div>
            </div>
        </template>

    </template>

    <script>

        Polymer({

            is: 'draggable-element-controllet',

            targets : null,

            properties: {

                isTarget : {
                    type : Boolean,
                    value: false
                },

                number: {
                    type: String,
                    value : "0"
                },

                heading : {
                    type : String,
                    value : "Heading"
                },

                description: {
                    type: String,
                    value: "Description"
                },

                label : {
                    type : String,
                    value : "Label"
                },

                identifier : {
                    type : String,
                    value : ""
                },

                value : {
                    type : String,
                    value : ""
                }

            },

            ready : function(){
            },

            _handleStartDrag : function(e){
                /*var target = EventUtil.getCurrentTarget(e);
                target.style.cursor = 'move';*/
                return true;
            },

            _handleEnterDrag : function(e){
                /*var target = e.target;
                if(target.draggable == false && (target.className.indexOf("dd-content-target") != -1)){

                    target.parentNode.parentNode.value = e.srcElement.id;
                    target.innerHTML = e.srcElement.innerText;

                    this.fire('draggable-element-controllet_content-dragged', {target: target, source: e.srcElement});
                }

                for (var i = 0; i < this.targets.length; i++) {
                    this.targets[i].children[0].children[1].className = "draggable-card dd-content-target unselectable style-scope draggable-element-controllet";
                }*/
                return false;
            },

            _handleOnDrag : function(e){
                this.targets = document.querySelectorAll('draggable-element-controllet[is-target=true]');
                for (var i = 0; i < this.targets.length; i++) {
                    this.targets[i].children[0].children[1].className = "onTrackOnTarget dd-content-target unselectable style-scope draggable-element-controllet";
                }

            },

            _handleTrack : function(e) {

                switch(e.detail.state) {
                    case 'start':
                        break;
                    case 'track':
                        break;
                    case 'end':

                        var target = e.detail.hover();

                        if(target.draggable == false && (target.className.indexOf("dd-content-target") != -1)){

                            target.parentNode.parentNode.value = e.target.id;
                            target.innerHTML = e.target.innerHTML;

                            this.fire('draggable-element-controllet_content-dragged', {target: target, source: e.target});
                        }

                        for (var i = 0; i < this.targets.length; i++) {
                            this.targets[i].children[0].children[1].className = "draggable-card dd-content-target unselectable style-scope draggable-element-controllet";
                        }

                        break;
                }
            }
        });

    </script>

</dom-module>