❤
npm
Sign UpSign In

htmlelement-dnd

0.8.1 • Public • Published

# htmlelement-dnd

The lastest version of this document is available on Github > htmlelement-dnd

Installation

npm install htmlelement-dnd --save

or

yarn add htmlelement-dnd --save

Without installation

    <script src="https://cdn.jsdelivr.net/npm/htmlelement-dnd/distrib/htmlelement-dnd.min.js"></script> 

Prerequisites for browser

    <script src="node_modules/htmlelement-dnd/distrib/htmlelement-dnd.min.js"></script> 

Availables Operations

- DND.makeDroppable(container,options) : create the container droppable, elements draggables can be drop on this zone. 
    - options : set remove property to true to remove element on drop 
- DND.makeDraggable(container) : declare all children of container as element draggable

- DND.allowDropCallback : function called to allow/disallow drop dragging element. Must return boolean.

Specials Events

- DND.drag : called when the drag operation start
- DND.drop : called when the drop operation end

example

    <div id="left">
        <div class="card"><img src="img/bear.jpg" /></div>
        <div class="card"><img src="img/cat.jpg" /></div>
        <div class="card"><img src="img/cerf.jpg" /></div>
        <div class="card"><img src="img/fish.png" /></div>
        <div class="card"><img src="img/horse.jpg" /></div>
        <div class="card"><img src="img/lion.jpg" /></div>
        <div class="card"><img src="img/monkey.jpg" /></div>
    </div>
 
    <div id="right">
 
    </div>
 
    <script>
        var ul1 = qsi("left");
        var ul2 = qsi("right");
        DND.makeDroppable(ul1);
        DND.makeDraggable(ul1);
 
        DND.makeDroppable(ul2);
        DND.makeDraggable(ul2);
 
        function trace(ev) {
        console.log(ev.type, ev.detail);
        }
 
        document.on("DND.drag", trace);
        document.on("DND.drop", trace);
    </script> 

Usage

API & DEMO

Readme

Keywords

Package Sidebar

Install

npm i htmlelement-dnd

Repository

github.com/Sylvain59650/htmlelement-dnd

Homepage

github.com/Sylvain59650/htmlelement-dnd#readme

Weekly Downloads

2

Version

0.8.1

License

MIT

Unpacked Size

31.9 kB

Total Files

9

Last publish

Collaborators

  • sylvain59
Try on RunKit
Report malware