❤
npm
Sign UpSign In

css-dnd

1.2.0 • Public • Published

CSS-DnD

license GitHub (pre-)release npm

css-dnd example

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

Table of topics

  1. Description
  2. How to use it?
  3. Customization
  4. Examples
  5. New versions of this tool
  6. Further help

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

Use steps

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>

Customization

You can also change the default css classes just calling the plugin directly in your javascript code: 
    $('.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

Some basic examples

You can style it at your own way ussing the provided classes.

css-dnd example css-dnd example css-dnd example css-dnd example

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

Changelog

Get update with all new versions here

Licence

Copyright (c) 2019 Rene Ricardo. Licensed under the MIT license.

Help

Send me an email if you have some doubt or just add an issue

Readme

Keywords

Package Sidebar

Install

npm i css-dnd

Repository

github.com/2rhop/css-dnd

Homepage

github.com/2rhop/css-dnd#readme

Weekly Downloads

1

Version

1.2.0

License

MIT

Unpacked Size

43.9 kB

Total Files

11

Last publish

Collaborators

  • 2rhop
Try on RunKit
Report malware