https://github.com/jshcrowthe/iron-drag-drop

An element for creating a drag-n-drop region on the page
https://github.com/jshcrowthe/iron-drag-drop

Last synced: about 1 month ago
JSON representation

An element for creating a drag-n-drop region on the page

• Host: GitHub
• URL: https://github.com/jshcrowthe/iron-drag-drop
• Owner: jshcrowthe
• Created: 2016-03-20T20:05:11.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-11-15T00:02:21.000Z (about 8 years ago)
• Last Synced: 2024-11-17T19:47:22.915Z (2 months ago)
• Language: HTML
• Homepage: http://jshcrowthe.github.io/iron-drag-drop
• Size: 2.43 MB
• Stars: 2
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/jshcrowthe/iron-drag-drop.svg?branch=master)](https://travis-ci.org/jshcrowthe/iron-drag-drop)

[![Coverage Status](https://coveralls.io/repos/github/jshcrowthe/iron-drag-drop/badge.svg?branch=master)](https://coveralls.io/github/jshcrowthe/iron-drag-drop?branch=master)

# iron-drag-drop 

### <iron-drag-drop>

An element for creating a drag-n-drop region on the page

On its own, this element has **no DOM** it is used to

wrap existing markup to create a droppable region

Example:

```html

  
Hello iron-drag-drop


```

You can also provide DOM to be used in an overlay that

triggers when a file is dragged over the drop area. You

do so by providing an element with the attribute `overlay`

Example:

```html

  


    
This will only display when someone is dragging over the drop area

  

  
This will display ALL the time and constitutes the droppable area


```

### Styling

`iron-drag-drop` provides several CSS mixins/properties to allow for customization of 

different regions within the component.

Custom property | Description | Default

----------------|-------------|----------

`--iron-drag-drop-border` | The default border styles | `2px solid transparent`

`--iron-drag-drop-border-dragging` | The border styles when a files is by dragged over the drop area | `2px solid #B9B9B9`

`--iron-drag-drop-overlay` | A mixin that allows a user to customize the overlay area as they wish | `{}`