Package Exports

htmlelement-dnd

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (htmlelement-dnd) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

htmlelement-dnd

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

Installation

npm install htmlelement-dnd --save

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