Skip to content

Ben-yby/draggable-polyfill

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

draggable-polyfill

🌈a beautify polyfill for html5 native drag!

Feature

Remove translucent preview!

  • light and beautiful
  • native and no dependence
  • progressive enhancement and no side effects
  • cross framework

Example

native drag with draggable-polyfill

How to use

Import the library code

<script src="./lib/draggable-polyfill.js"></script>
npm install draggable-polyfill

then these native draggable elements( [draggable=true],img ) will becoming beautiful

[allowdrop]elements will receive drag event data.

<div draggable="true">drag me</div>
<img src="./avator" alt="avator">
<!--dropbox-->
<div allowdrop></div>

you can use HTML Drag and Drop API

//draggable
draggable.addEventListener('dragstart',()=>{})
draggable.addEventListener('drag',()=>{})
draggable.addEventListener('dragend',()=>{})
//allowdrop
allowdrop.addEventListener('dragover',()=>{})
allowdrop.addEventListener('dragenter',()=>{})
allowdrop.addEventListener('dragleave',()=>{})
allowdrop.addEventListener('drop',()=>{})

How to Custom Style

draggable elements will add props dragging and dropbox will add props over under dragging, so you can custom style through CSS

<!--your draggable element-->
<div class="dragbox" draggable="true">drag me</div>
<!--your allowdrop element-->
<div class="dropbox" allowdrop></div>
/**custom styles**/
.dragbox[dragging]{
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .2);
}
.dropbox[over]{
    border-color: red;
}

Other Feature

you can set axis=X|Y to limit drag direction or press shift key when dragging.

<div axis="X" draggable="true">drag me</div>

Browser Supports

  • Chrome
  • Firefox
  • Safari

Note:This polyfill works on Chrome and Firefox, not for IE( IE is not supports setDragImage ), it will keep default effect.

License

MIT

Releases

No releases published

Packages

No packages published

Languages

  • HTML 57.0%
  • JavaScript 43.0%