拖动插件的使用 这里以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::$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" for="RTK"></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:

/**

• 通用信息添加多个 RTK 与 物料信息
  */
  // // ‘handle’ option 拖动功能
  Sortable.create(document.getElementById(‘handle-1’), {
  handle: ‘.drag-handle’,
  animation: 150
  });

var materialData = {
number: 0,
rtkList: $('#handle-1'),
addBtnClick: function () {
  var tpl = '<li class="flex"><div class="add-group form-group" >' +
    '<label class="col-sm-2 control-label" for="RTK"></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="" placeholder="请输入RTK"> - ' +
    '<input type="text" class="form-control materials" name="materials" value="" placeholder="请输入物料"> - ' +
    '<input type="text" class="form-control produce_price" name="produce_price" value="0" placeholder="请输入出厂价格"> - ' +
    '<input type="text" class="form-control market_price" name="market_price" value="0" placeholder="请输入市场价格">' +
    '<button type="button"  class="btn btn-default glyphicon glyphicon-minus del-btn"></button>' +
    '</div>' +
    '</div></span></li>'
  this.number++
  this.rtkList.append(tpl)
},
delBtnClick: function (e) {
  e.parents(".add-group").remove()
}

}

标签：插件,handle,为例,Yii,yii,js,sortablejs,placeholder,输入
来源： https://blog.csdn.net/weixin_43946245/article/details/101028803