draggable-polyfill

    1.2.4Β β€’Β PublicΒ β€’Β Published

    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

    Install

    npm i draggable-polyfill

    DownloadsWeekly Downloads

    31

    Version

    1.2.4

    License

    MIT

    Unpacked Size

    1.15 MB

    Total Files

    9

    Last publish

    Collaborators

    • xboxyan