creating widgets with dnd

programmatically

by seo gyeongseok

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<div dojoType="dijit.form.Button" onClick="setValue">
    set value textbox 0
</div>
<div dojoType="dijit.form.Button" onClick="insertNew">
    insert new textbox
</div>
<div id="source" style="height: 200px; width: 200px; border: 1px solid red;">
    
</div>
<div id="target" style="height: 200px; width: 200px; border: 1px solid blue;">
    
</div>

JavaScript

dojo.require("dojo.dnd.Source");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");

var widgets = new Array();
var source;
dojo.ready(function() {

    for (var i = 0; i < 5; i++) {
        widgets.push(
        new dijit.form.TextBox({
            value: i,
            class: 'dojoDndItem',
        }).placeAt("source"));
    }

    source = new dojo.dnd.Source("source", {
        copyOnly: false
    });
    new dojo.dnd.Source("target");
});

setValue = function() {
    widgets[0].attr("value", (new Date).getTime());
};

insertNew = function() {

    widgets.push(
    new dijit.form.TextBox({
        value: widgets.length,
        class: 'dojoDndItem',
    }));

    source.insertNodes(true, [widgets[widgets.length-1].domNode]);
};