Drag-n-drop-totaliser

What?

Add up arbitrary amounts using a drag and drop UI. Built with Dragula and Redux.

Why?

Add up the total number of legs of animals in a list. Estimate the cost of a job given a list of services required. Drag items from a restaurant menu, get the total bill.

How?

Feed totaliser your data in a JSON object. Items are dragged from the '#itemContainer' to the '#counterContainer'. The total is displayed in the '#totalCounter'.

    <script src="totaliser.js"></script>
    <script>
    var items = { items: [
        {name: 'Slug', value: 1},
        {name: 'Chicken', value: 2},
        {name: 'Cat', value: 4},
        {name: 'Honey bee', value: 6},
        {name: 'Spider!', value: 8}
    ]}
    totaliser.init('itemContainer','counterContainer','totalCounter',items)

API

Drag-n-drop-totaliser's API exposes Redux's state and store objects. Functions can be called each time the state changes by passing them to the totaliser.subscribe() method.

    totaliser.subscribe(hello)

    function hello(){
        console.log(JSON.stringify(totaliser.getState(), null, 3))

        var store = totaliser.getStore()
        console.log(JSON.stringify(store.getState(), null, 3))
    }