動態表單生成之拖拽生成表單（上）

這個功能就比較吊炸天了，之前的六篇，都是ng-dynamic-forms自帶的功能，可能很多的說明官方的文檔都已經寫了，我只是個搬運工，而在這篇文章中，我將化身一個工程師，來自己創造點東西，讓我們一起來期待吧~

導入相關類庫

拖拽功能看似吊炸天，其實HTML5中已經有一套標準來定義它了，所以並沒有那麽難以實現，這篇關於拖拽的文章寫得還可以，大家可以先看看：http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/

既然是一些通用的東西，那應該來說，會有angular的封裝，在github上找了一下，果然是找到了一個比較不錯的類庫：https://github.com/ObaidUrRehman/ng-drag-drop，看他的Demo，也基本上可以滿足我們的需求。Demo的效果如下：

那我們果斷按照這個組件的說明，將它引入到我們的項目中，同時也將bootstrap引入進來，方便後面布局使用：

npm install ng-drag-drop –-save

npm install bootstrap –-save

然後在.angualr-cli.json中的styles節點中，將它和bootstrap的默認樣式添加進去：

"styles": [
        "styles.css",
        "../node_modules/@progress/kendo-theme-default/dist/all.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/ng-drag-drop/style.css"
      ],

接下來，還需要將這個組件的js在.angualr-cli.json中的scripts節點中引入：

"scripts": [
        "../node_modules/ng-drag-drop/index.js"
      ]
 

最後在app.modules.ts中imports中導入它：

imports: [
    ....
    NgDragDropModule.forRoot()
  ],

萬事布局難

所謂萬事布局難，我們先畫一個簡單的UI，用來實現我們的拖拽效果吧~

先使用angular cli 生成一個新的Component，並將它的路由配置好，具體步驟可以參考我們之前添加kendo-ui的組件時的步驟，我們將這個新的Component命名為：kendo-ui-drag-drop。

然後在HTML頁面中添加一下代碼：

<div  style="padding:20px;">
  <div class="row" style="margin-top:20px;border: 1px solid;padding:10px;">
    <div class="col-md-4">
      <ul class="list-group">
        <li class="list-group-item" >TextBox</li>
        <li class="list-group-item" >Select</li>
        <li class="list-group-item" >TextArea</li>
        <li class="list-group-item" >Password</li>
        <li class="list-group-item" >Number</li>
      </ul>
    </div>
    <div class="col-md-8">
      <h4>請將表單元素拖拽到這裏</h4>
      <div style="min-height: 300px;background-color: #EDEDEE"></div>
    </div>
  </div>
</div>

最終效果如下：

定義拖拽事件

首先，我們讓左邊的Textbox等控件可以拖動。參考ng-drap-drop可知，只需要在需要可拖拽的元素上，加上一個draggable屬性即可：

如下：

<ul class="list-group">
        <li class="list-group-item" draggable>TextBox</li>
        <li class="list-group-item" draggable>Select</li>
        <li class="list-group-item" draggable>TextArea</li>
        <li class="list-group-item" draggable>Password</li>
        <li class="list-group-item" draggable>Number</li>
 </ul>

這樣子，我們的左邊就可以到處拖了~

那怎麽可以讓拖動到右邊我們布局中表單區域那邊，觸發特定的事件呢？其實也So Easy，我們只需要在我們定義好的放置表單的div中，添加droppable屬性，並且在有元素拖動到他上面的時候，會觸發一個onDrop事件，我們可以訂閱這個事件，來得知有元素拖動過來了。

具體代碼如下：

<div class="col-md-8">
      <h4>請將表單元素拖拽到這裏</h4>
      <div style="min-height: 300px;background-color: #EDEDEE" droppable (onDrop)="onDropToForm($event)"></div>
    </div>

onDropToForm(event) {
    console.log(event);
  }

在這裏，event對象中有一個dragData屬性，即拖拽元素中的一些數據，這些數據我們需要在被拖拽元素中定義，及在上面的 draggable元素中綁定數據 [dragData] = “要綁定的數據”，我們改寫上面被拖拽元素的代碼如下：

<ul class="list-group">
        <li class="list-group-item" draggable [dragData]="{type:‘TextBox‘}">TextBox</li>
        <li class="list-group-item" draggable [dragData]="{type:‘Select‘}">Select</li>
        <li class="list-group-item" draggable [dragData]="{type:‘TextArea‘}">TextArea</li>
        <li class="list-group-item" draggable [dragData]="{type:‘Password‘}">Password</li>
        <li class="list-group-item" draggable [dragData]="{type:‘Number‘}">Number</li>
      </ul>

最終效果如下：

由於篇幅限制，這篇就寫到這裏吧，下篇接著來~~

Angular動態表單生成（七）