dojo dnd更改拖动元素的类型

时间:2013-01-29 08:40:20

标签: dojo drag-and-drop

我正在使用Dojo 1.8.3

我想使用dnd开发一个可自定义的表单。我有左侧dojo/dnd/Source中的表单元素列表和右侧dojo/dnd/Target中的容器列表,当我放下它时,它应该生成dijits。

<div class="normal" style="width: 99%;  height: 99%;" data-dojo-type="dijit/layout/BorderContainer" 
     data-dojo-props="design:'sidebar', gutters: true, liveSplitters: true">
   <div data-dojo-type="dijit/layout/ContentPane"  class="normal" style="width: 30%;  height: 80%;" 
                         data-dojo-props="splitter: true, region: 'left'">

     <div data-dojo-type="dojo/dnd/Source" data-dojo-id="form_tools" id="form_tools"  data-dojo-props="copyOnly: true"   
                                 class="container" style="width:99%;">
                        <div class="dojoDndItem" dndtype="heading">Heading</div>
                        <div class="dojoDndItem" dndtype="textbox">Text Box</div>
                        ... 
                </div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" class="normal" id="form_container" 
                         style="width: 68%; height: 80%;" data-dojo-props="splitter: true, region: 'center'">

                <div data-dojo-type="dojo/dnd/Target" data-dojo-id="form_items" id="form_items" class="container" style="height: 80%;" accept="heading,textbox">
                        <script type="dojo/on" event="DndDrop"> form.transform_item(arguments[0], arguments[1], arguments[2], arguments[3]);//source, nodes, copy, target </script>                        </div>
        </div>
</div>

在我的js函数transform_item中,我这样做:

this.transform_item = function(){ 
var dragged_items = arguments[3].selection; 

form_items.forInSelectedItems(function(item, id, map){ 
          var dnditem = dojo.byId(id); 
          switch(item.type[0]){ 
            case "textbox": 
              var textbox = new dijit.form.TextBox({ 
                  name: "textbox", 
                  value: "This is a TextBox" 
              }, "textbox_text"); 

              // HERE IS WHERE I SHOULD INSERT THE CODE FOR GENERATING A TEXTBOX 

              require(['dojo/parser'], function(parser){ 
                parser.parse('textbox_text'); 
              }); 

              break; 
 } 
 }); 
    } 

此时我在击中目标时遇到错误:

dojo/parser::parse() error 
TypeError: root is null 

var node = root.firstChild; 

当我拖动“文本框”dndtype时,如何生成Dojo,例如dijit.form.TextBox

1 个答案:

答案 0 :(得分:0)

已解决:我刚刚将textbox插入错误的父级,textbox_text不存在。所以不需要parse();