日期:2014-05-16  浏览次数:20418 次

dojo1.0 中关于拖拽 dnd的问题!
我们公司要用dojo1.0的开源框架,这方面没有研究过的,需要我自己与研究,但是我发现不知道从何入手去看dojo1.0,那里面好乱啊,我的js功底也不错拉,为什么会这样呢?我想主要的原因是:我不懂dojo1.0的框架架构,不知道从何入手?

比方说\dojo-release-1.0.2\dojo\tests\dnd\test_dnd.html 这个个例子,我也看拉,能修改一些样式之类的东西,但是比较复杂的问题有两个我没有解决!

1:比方说现在那里面的dnd里面例子是上下拖动(拖到一个元素的上面或者下面)的,我想给他加成左右拖动(拖到一个元素的左面或者右面)的,都不知道在哪里加呢?这个我好像解决拉,能拖到左面右面,但是不是很稳定,有时候拖动的时候不起作用。
2:因为我是直接在上下拖动的效果上面修改的,所以在拖动过程中,那个蓝色的粗线条(指示控件所拖放的目的地)任然水平的,我想我现在都是左右拖动拉,所以应该把蓝色的粗线条改成是垂直的。但是一直不知道在哪里改呢?
3:怎么去读dojo1.0的框架开源代码啊?

我修改过的test_dnd.html文件内容如下:

HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Dojo DnD test</title>
    <style type="text/css">
        @import "../../resources/dojo.css";
        @import "../../resources/dnd.css";
        @import "dndDefault.css";
        body {
            padding: 1em;
            background: #ededed;
        }
        .container {
            BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH:150px;HEIGHT:300px;PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid
        }
        .containerRight{
            BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px;HEIGHT:400px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH:700px;HEIGHT:400px;PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid;height:200px;        
        }
        .clear {
            clear: both;
        }
    </style>
    <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dojo.dnd.Source");
        var total = 0;
        function ClearMsg()
        {   
            // dojo.byId("msg").innerHTML = "";
        }
        function init(){
            dojo.subscribe("/dnd/start", function(source,nodes,iscopy){
            });

            dojo.subscribe("/dnd/drop/before", function(source, nodes, copy, target){
                if(target == c2){
                }
            });
             dojo.subscribe("/dnd/drop", function(source,nodes,iscopy){
              var t = dojo.dnd.manager().target;
              var noid=    nodes[0].id;            
              var jsnode = source.getItem(nodes[0].id);
              var x=c1.getAllNodes();
              for(i =0;i<x.length;i++){
                 //jsNode is javascript object for node
                 //x[i] represents HTML element for the node
                var jsnode = c2.getItem(x[i].id);
              }                        
               if(nodes){
                   var node=nodes[0];               
                   if(node.parentNode.id=="left"){
                       var value=node.innerHTML;
                       node.innerHTML=value.substring(0,value.length-6);
                              var p=document.getElementById(""+noid);
                             p.style.styleFloat  =  'none';
                   }else{
                       if(node.parentNode.id=="right"){                              
                            var value=node.innerHTML;
                            // alert(value.substring(value.length-6,value.length));
                            if(value.substring(value.length-5,value.length)=="value"){
                                
                            }e