css-dnd

v1.2.0

Published

2 years ago

jQuery plugin for making droppable/draggable html elements just adding css classes

Downloads

0High
0Medium
0Low

2rhop

DnD jquery css drag & drop javascript

CSS-DnD

jQuery plugin for making droppable/draggable items just adding CSS classes

Table of topics

Description

This project use the native Drag & Drop function of the browser. Just adding some CSS classes to the element this plugin do the rest.

Demo page

First need to install the package from NPM

npm i -S css-dnd

Then import css-dnd and jQuery within the BODY tag

<body>
    ...
    <script src="/path/to/jquery.min.js"></script>
    <script src="/path/to/css-dnd/dist/css-dnd.min.js"></script>
</body>

Once you have done all the importation steps, you need to add the class to the elements

<body>
    <div class="dnd-droppable">
        <div class="dnd-draggable"></div>
    </div> 
    <div class="dnd-droppable"></div>    
    ...
</body>

If you want the default styles just add the css file within the HEAD tag

<head>
    ...
    <link rel="stylesheet" href="./node_modules/css-dnd/dist/css-dnd.min.css">
</head>

You can also import js and styles from a CDN

<link href="https://cdn.jsdelivr.net/npm/css-dnd@latest/dist/css-dnd.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/css-dnd@latest/dist/css-dnd.min.js"></script>

    $('.dnd-droppable').droppable({draggingClass:'dnd--dragging'});// for droppable elements
    $('.dnd-draggable').draggable({idPrefix:'dnd-draggable-item_'});// for draggable elements

`draggingClass:` changes the droppable element's default on-dragging class (default value: dnd--dragging)

`idPrefix:` changes the draggable element's default id (default value: dnd-draggable-item)

Also you can listening to each DnD event like:

Draggable options:

    $('.dnd-draggable').draggable({
        onDragStart: function(event,callback){
            console.log('Oh you drag me')
            // do something here before...
            callback() // call the default ondragstart behavior
        }
    });

`onDragStart(ev,callback):` Listening to ondragstart event

Droppable options:

    $('.dnd-droppable').droppable({
        onDrop: function(event,callback){
            console.log(`Oh you drop me into ${event.target}!`)
            // do something here before...
            callback() // call the default ondrop behavior
        }
    });

`onDrop(ev,callback):` Listening to ondrop event

`onDragEnter(ev,callback):` Listening to ondragenter event

`onDragEnd(ev,callback):` Listening to ondragend event

`onDragOver(ev,callback):` Listening to ondragover event

`onDragLeave(ev,callback):` Listening to ondragleave event

note: event is the event data and callback is the default event behavior function

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

CSS-DnD

jQuery plugin for making droppable/draggable items just adding CSS classes

Table of topics

Description

npm i -S css-dnd

You can also import js and styles from a CDN

draggingClass: changes the droppable element's default on-dragging class (default value: dnd--dragging)

idPrefix: changes the draggable element's default id (default value: dnd-draggable-item)

Draggable options:

onDragStart(ev,callback): Listening to ondragstart event

Droppable options:

onDrop(ev,callback): Listening to ondrop event

onDragEnter(ev,callback): Listening to ondragenter event

onDragEnd(ev,callback): Listening to ondragend event

onDragOver(ev,callback): Listening to ondragover event

onDragLeave(ev,callback): Listening to ondragleave event

Note: When the event listener dragover is triggered the element will get the class dnd-dragging or the one that user customized.

Changelog

Licence

Help

`npm i -S css-dnd`