鼠标拖动插件的使用 随意上下排序 这里以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
    });
           

}