Angular動態表單生成（七）

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

這個功能就比較吊炸天了，以前的六篇，都是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>

最終效果以下：

因爲篇幅限制，這篇就寫到這裏吧，下篇接着來~~