前面一文已經創建了一個Jquery插件，並在初始化時渲染了一個紅色的矩形，作為一個設計器，最常用的操作是直接從面板中將組件拖到畫布上生成實例，本文主要講述如何通過拖動組件來顯示。

html元素是支持拖動的，主要通過 draggable="true"來允許元素可被拖動，以及三個事件dragstart(按下鼠標左鍵拖動元素）,dragover（按住鼠標左鍵拖動時經過其它元素時觸發）,drop（在其它元素上松開鼠標左鍵）

結合可視化設計器的需求，我們將創建一個組件面板和設計器工作區

代碼如下：

        <div style="position:relative;height:300px">
            <ul style="position:absolute;left:0px;top:0px;width:150px;bottom:0px;border:1px solid gray">
                <li draggable="true">圓</li>
                <li draggable="true">矩形</li>
                <li draggable="true">三角形</li>
            </ul>
            <div style="position:absolute;left:152px;right:0px;top:0px;bottom:0px;overflow:auto">
                <canvas width=1024 height=768 style="background-color:gray" id="designView"></canvas>
           </div>
        </div>

註意此處在canvas外包了一個div(占領屏幕的右邊區域），而canvas給了一個固定的width和height，這是由於canvas本身屬性定義要求的：

height 屬性

畫布的高度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口高度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。

width 屬性

畫布的寬度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。

所以在本示例中寬高固定，無論窗口如何變化，只是引起外層的div滾動條變化。

此時由於li元素加了draggable=true的屬性，所以拖動時會出現標識。但移到畫布上時，鼠標指針是一個禁止的圖標，在初始化init中加上以下的代碼，畫布就允許拖放了：

        this.$element .on("dragover", function (event) {
            event.preventDefault();
        });
        this.$element.on("drop", function (event) {
            event.preventDefault();
        });

在drop的事件裏應依據拖動的類型在鼠標位置畫一個對應的形狀，這裏首先是需要知道拖動的是什麽類型（系統咋知道是圓還是三角形呢？），答案是在dragstart時設置拖動的data,再在drop裏判斷data值，

代碼如下示例：

       //為每個組件註冊dragstart事件 
　　　　$(‘li[name="toolbox"]‘).each(function () {
            $(this).on("dragstart", function (event) {
                var evt = event || window.event;
                if (evt.dataTransfer == undefined && evt.originalEvent != undefined) {
                    var stext = $(evt.target)[0].innerText;
                    evt.originalEvent.dataTransfer.setData("type", stext);
                }
                else if (evt.dataTransfer != undefined)
                    evt.dataTransfer.setData("type", $(evt.target)[0].innerText);
            });
        });
　　　　　//canvas畫布接受drop的事件
        this.$element.on("drop", function (event) {
            event.preventDefault();
            debugger;
            var data = null;
            if (event.dataTransfer == undefined && event.originalEvent != undefined)
                data = event.originalEvent.dataTransfer.getData("type");
            else if (event.dataTransfer != undefined)
                data = event.dataTransfer.getData("type");
          switch (data) {
                case "圓":
                    var circle = new paper.Path.Circle({
                        center: [event.originalEvent.offsetX, event.originalEvent.offsetY],
                        radius: 25,
                        fillColor: ‘blue‘
                    });
                    break;
                case "矩形":
                    var rect = new paper.Path.Rectangle({
                        point: [event.originalEvent.offsetX, event.originalEvent.offsetY],
                        size: [100, 100],
                        radius: 5,
                        strokeWidth: 1,
                        strokeColor: me.options.color,
                        fillColor: me.options.color,
                        opacity: me.node_opacity
                    });
                    break;
                case "橢圓":
                  var path = new paper.Path.Ellipse({ point: [event.originalEvent.offsetX, event.originalEvent.offsetY], size: [120, 60], fillColor :‘green‘});
            }
        });

最終效果圖如下：

源代碼：visualDesigner.1.1.rar

（本文為原創，在引用代碼和文字時請註明出處）

鼠標Drag/Drop事件-可視化設計器開放平臺系列（3）