學習Ajax架構之dojo：第四節——Dojo拖拽效果的實現（附原始碼）

Dojo在dojo.dnd包中提供了對頁面元素拖拽效果的支援，其中用於實現拖拽效果的關鍵類如下。

    <1>  dojo.dnd.HtmlDragSource

    <2>  dojo.dnd.HtmlDragMoveSource

    <3>  dojo.dnd.HtmlDropTarget

    <4>  dojo.dnd.HtmlDragCopySource

 

接下來，看看這四個類的使用方法。

首先，定義兩個div和一個列表：

        <div id="drag1" style="width:200px;height:200px;background:bule">
            拖動模組1

        </div>
        <br/>
        <div id="drag2" style="width:400px;height:400px;background:yellow">
            拖動模組2

        </div>

        <ul id="list1">
            <li>
                列表1，條目1
            </li>
            <li>
                列表1，條目2
            </li>
            <li>
                列表1，條目3
            </li>
        </ul>
        <ul id="list2">
            <li>
                列表2，條目1
            </li>
            <li>
                列表2，條目2
            </li>
            <li>
                列表2，條目3
            </li>
        </ul>

 

     定義css：

        <style type="text/css">
            ul {
                position: relative;
                list-style: none;
                margin: 0;
                padding: 0;
                overflow: visible;
            }
           
            li {
                margin: 3px 0;
                padding: 3px 3em 3px 10px;
                border: 2px solid #456;
                background-color: #cde;
                cursor: move;
            }
        </style>

 

執行個體一：簡單拖拽效果

功能：拖拽標籤drag1，滑鼠鬆開時，該標籤又回到原位置

關鍵類：dojo.dnd.HtmlDragSource: 實現頁面元素的拖拽效果

主要代碼：   

    <script type="text/javascript">
        dojo.require("dojo.dnd.*");
        dojo.require("dojo.event.*");
        function init(){
            var drag_comeback= dojo.byId("drag1");
            new dojo.dnd.HtmlDragSource(drag_comeback, "drag1");
        }

        dojo.event.connect(dojo, "loaded", "init");
   </script>    
    

執行個體二：拖拽移動對象

功能：拖拽標籤drag2，滑鼠鬆開時，該標籤將停留在滑鼠鬆開的位置

關鍵類： dojo.dnd.HtmlDragMoveSource: 實現頁面元素的自由拖放效果

主要代碼：

        <script type="text/javascript">
            dojo.require("dojo.dnd.HtmlDragMove");
            dojo.require("dojo.dnd.*");
            dojo.require("dojo.event.*");
            function init(){                     
                new dojo.dnd.HtmlDragMoveSource(dojo.byId("drag2"));
            }

           dojo.event.connect(dojo, "loaded", "init");
        </script>     

 

執行個體三：接受拖拽對象

功能：頁面中包含兩個列表對象list1和list2，通過建立dojo.dnd.HtmlDropTarget類的對象執行個體，list1和list2都具有接受被拖拽元素的能力，可以拖放到list1和list2任何一個列表中。

關鍵類：dojo.dnd.HtmlDropTarget: 使頁面元素成為被拖拽元素的目標對象

主要代碼：

        <script type="text/javascript">
            dojo.require("dojo.dnd.*");
            dojo.require("dojo.event.*");
            function init(){
                //使列表對象list1能夠接受被拖拽元素，被拖拽元素的類型是"li1"
                var list1 = document.getElementById("list1");
                new dojo.dnd.HtmlDropTarget(list1, ["li1"]);
               
                //使list1中的每一個清單項目元素能夠被拖拽，其類型是“li1”
                var lis = list1.getElementsByTagName("li");
                for (var x = 0; x < lis.length; x++) {
                    new dojo.dnd.HtmlDragSource(lis[x], "li1");
                }
               
                //使列表對象list2能夠接受被拖拽元素，被拖拽元素的類型是"li1"
                var list2 = document.getElementById("list2");
                new dojo.dnd.HtmlDropTarget(list2, ["li1"]);
               
                //使list2中的每一個清單項目元素能夠被拖拽，其類型是“li1”
                var lis = list2.getElementsByTagName("li");
                for (var x = 0; x < lis.length; x++) {
                    new dojo.dnd.HtmlDragSource(lis[x], "li1");
                }
            }
           
            dojo.event.connect(dojo, "loaded", "init");
        </script> 

執行個體四：複製拖拽效果

功能：拖拽目標對象中新增一個被拖拽元素的拷貝。如，兩個列表中的清單項目均可以在兩個列表中進行拖拽，當拖拽動作完成之後，被拖拽的清單項目仍然保持不變，而目前位置會新增一份被拖拽清單項目的拷貝。

關鍵類：dojo.dnd.HtmlDragCopySource: 實現頁面元素的複製拖拽效果

主要代碼：

        <script type="text/javascript">
            dojo.require("dojo.dnd.*");
            dojo.require("dojo.dnd.HtmlDragCopy");         
            dojo.require("dojo.event.*");
            function init(){
                //使列表對象list1能夠接受被拖拽元素，被拖拽元素的類型是"li1"
                var list1 = document.getElementById("list1");
                new dojo.dnd.HtmlDropTarget(list1, ["li1"]);
               
                //使list1中的每一個清單項目元素能夠被拖拽，其類型是“li1” ；同時具有複製拖拽的功能
                var lis = list1.getElementsByTagName("li");
                for (var x = 0; x < lis.length; x++) {
                    new dojo.dnd.HtmlDragCopySource(lis[x], "li1", false);
                }
               
                //使列表對象list2能夠接受被拖拽元素，被拖拽元素的類型是"li1"
                var list2 = document.getElementById("list2");
                new dojo.dnd.HtmlDropTarget(list2, ["li1"]);
               
                //使list2中的每一個清單項目元素能夠被拖拽，其類型是“li1” ；同時具有複製拖拽的功能
                var lis = list2.getElementsByTagName("li");
                for (var x = 0; x < lis.length; x++) {
                    new dojo.dnd.HtmlDragCopySource(lis[x], "li1", false);
                }
            }
           
            dojo.event.connect(dojo, "loaded", "init");
        </script>