javascriptpolymerdragula

How to use dragula with Google polymer


I am creating an html module using Google Polymer. I am trying to drag and drop an element that is a custom polymer element, so I can not use the draggable tag in HTML 5. Because of this I am using Dragula https://github.com/bevacqua/dragula . My html looks like this

<div class="leftTable">
    <custom-polymer-element></custom-polymer-element>
</div>

In the Polymer function I make a call to dragula with the container that I would like to be able to drag from:

<script>
    Polymer({
        is:"custom-wrapper",
        attatched: function() {
            dragula([document.querySelector('.leftTable')]);
        }
    });
</script>

I have the imports for dragula in the demo/index.html file. Is there something that I am missing or doing improperly here?

EDIT: The imports I do make are as follows:

dragula.js/dist/dragula.js

dragula.js/dist/dragula.css


Solution

  • In order to get a container within a polymer element you can not use

    document.querySelector('.leftTable')
    

    Instead you must use

    this.$.leftTable
    

    which selects by id instead.