鼠標拖動插件的使用 隨意上下排序 這裏以yii爲例

1.首先下載js文件

1.使用NPM安裝：

$ npm install sortablejs --save
2.用Bower安裝：

$ bower install --save sortablejs

3.也可以使用我下載過的js，我放在github了
https://github.com/renkun-cook/sortablejs.git

4.views文件

" ***" 標記這個符號的是關鍵點

 AppAsset::addScript($this, Yii::$app->request->baseUrl . '/js/Sortable.min.js');

<div class="rtkList">
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="RTK">版本：</label>
                    <div class="col-sm-10">
                        <button class="btn add-btn">增加材料</button>
                    </div>
                </div>
                *** <ul id="handle-1"> ***
                <?php
                    if(!empty($material)){
                        foreach ($material as $k => $v){ ?>
                             <li class="flex">
                                 <div class="add-group form-group">
                                    <label class="col-sm-2 control-label" ></label>
                                    <div class="col-sm-10 form-inline rtk-materials">
                                        ***<span class="drag-handle">☰</span>***
                                        ***<input type="text" class="form-control rtk" name="rtk" value="<?php echo isset($v['rtk']) ? $v['rtk'] : '' ?>" placeholder="請輸入材料名"> ***
                                        <input type="text" class="form-control materials" name="materials" value="<?php echo isset($v['materials']) ? $v['materials'] : '' ?>" placeholder="請輸入版本"> -
                                        <input type="text" class="form-control produce_price" name="produce_price" value="<?php echo isset($v['produce_price']) ? $v['produce_price'] : 0 ?>" placeholder="請輸入1價格">
                                        <input type="text" class="form-control market_price" name="market_price" value="<?php echo isset($v['market_price']) ? $v['market_price'] : 0 ?>" placeholder="請輸入2價格">
                                        <button type="button"  class="btn btn-default glyphicon del-btn glyphicon-minus"></button>
                                    </div>
                                </div>
                            </li>
                <?php }} ?>
            </div>

JS:

  // // 'handle' option 拖動功能
  Sortable.create(document.getElementById('handle-1'), {
        handle: '.drag-handle',
        animation: 150
    });

}