JSFiddle - React, Tailwind, and code Playground

Programmatic DnD example

by kfranqueiro

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/tundra/tundra.css">

CSS

ul {
    float: left;
    width: 10em;
    margin: 0 1em;
}

JavaScript

require([
    "dojo/dom-construct",
    "dojo/dnd/Source",
    "dojo/domReady!"
], function(domConstruct, Source){
    var list1 = domConstruct.create("ul", null, document.body),
        list2 = domConstruct.create("ul", null, document.body);
    
    domConstruct.create("li", {
        innerHTML: "foo",
        className: "dojoDndItem"
    }, list1);
    domConstruct.create("li", {
        innerHTML: "bar",
        className: "dojoDndItem"
    }, list1);
    
    domConstruct.create("li", {
        innerHTML: "baz",
        className: "dojoDndItem"
    }, list2);
    domConstruct.create("li", {
        innerHTML: "bim",
        className: "dojoDndItem"
    }, list2);
    
    var s1 = new Source(list1),
        s2 = new Source(list2);
    s1.startup();
    s2.startup();
});