dnd-js

dnd

Getting Started

1. Including dnd

npm install

npm install dnd-js

Browser

<script src="dnd.min.js"></script>

2. Usage

not clone

Dnd.init({
    items: [
        {
            dom: q('.content .source .liaison')
        },
        {
            dom: q('.content .source .stress')
        },
        {
            dom: q('.content .source .light')
        },
        {
            dom: q('.content .source .up')
        },
        {
            dom: q('.content .source .down')
        }
    ]
})

clone

Dnd.init({
    clone: true,
    container: '.content',
    subContainer: 'ul.draw',
    items: [
        {
            dom: q('.content .source .liaison'),
            dragType: 'type1'
        },
        {
            dom: q('.content .source .stress'),
            dragType: 'type2'
        },
        {
            dom: q('.content .source .light'),
            dragType: 'type3'
        },
        {
            dom: q('.content .source .up'),
            dragType: 'type4'
        },
        {
            dom: q('.content .source .down'),
            dragType: 'type5'
        }
    ],
    drags: {
        type1: {
            className: 'liaison virtual'
        },
        type2: {
            className: 'stress virtual'
        },
        type3: {
            className: 'light virtual'
        },
        type4: {
            className: 'up virtual'
        },
        type5: {
            className: 'down virtual'
        }
    }
})

dnd method

Name	Arguments	Description
clone	[Boolean]	default is false
container	[String] container's className	default is body
subContainer	[String] sub container's className	default is undefined
items	[Array] dom draged	it's required
drags	[Object] according to items dragType	set up it when existed dragType of items