<mercury-drop>

Easy draggable list for web components.

Demo

Check it live!

Install

Install the component using Bower:

$ bower install mercury-drop --save

Or download as ZIP.

Usage

1. Import polyfill:

   <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

2. Import custom element:

   <link rel="import" href="bower_components/mercury-drop/mercury-drop.html">

3. Start using it!

   <mercury-drop items="{{data}}" as="item">
     <style>
       .box {
         border: 2px solid #621;
         margin: 5px;
         box-shadow: 1px 1px 1px #444;
         width: 200px;
       }
     </style>
     <template>
       <dom-repeat items={{data}}>
           <li draggable class="box">Hello <span>{{item.name}}</span></li>
       </dom-repeat>
     </template>
   </mercury-drop>

Usage

Pass an array of elements to the component, when you drag one element in the list the data binding go up until your component.

You must use "as" attribute to set the internal variable name.

To make the list elements draggable you must put in the top parent an empty attribute called draggable.

To set styles to the temporal box where to place the item, you must use the class .phantom-box

Development

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

1. Install bower & polyserve:

   $ npm install -g bower polyserve

2. Install local dependencies:

   $ bower install

3. Start development server and open http://localhost:8080/components/my-repo/.

   $ polyserve

History

For detailed changelog, check Releases.

License

MIT License