下载地址: https://download.csdn.net/download/dongyan3595/85111182

<script type="text/javascript" src="moduleSet.js"></script>

<script type="text/javascript" src="Sortable.min.js"></script>

前端使用Sortable拖拽排序插件,里面的input.textarea光标无法移动的解决_会飞的哈士奇的博客-CSDN博客

HTML

<div class="layui-row" id="optionDataDiv">

    <div class="layui-row" id="div1" style="margin-left: 20px;margin-top: 5px">
        <div class="layui-col-xs4">
            <input type="text" name="optionKey" class="layui-input" value="" placeholder="选项名">
        </div>
        <div class="layui-col-xs4">
            <input type="text" name="optionValue" class="layui-input" value="" placeholder="选项值">
        </div>
        <div class="layui-col-xs4">
            <button type="button" class="layui-btn layui-btn-primary optionRemove"><i class="layui-icon"></i></button>
            <button type="button" title="长按拖拽排序" class="layui-btn layui-btn-primary module" style="margin-left: -3px!important;"><i class="layui-icon"> ● </i></button>
        </div>
    </div>


    <div class="layui-row" id="div2" style="margin-left: 20px;margin-top: 5px">
        <div class="layui-col-xs4">
            <input type="text" name="optionKey" class="layui-input" value="" placeholder="选项名">
        </div>
        <div class="layui-col-xs4">
            <input type="text" name="optionValue" class="layui-input" value="" placeholder="选项值">
        </div>
        <div class="layui-col-xs4">
            <button type="button" class="layui-btn layui-btn-primary optionRemove"><i class="layui-icon"></i></button>
            <button type="button" title="长按拖拽排序" class="layui-btn layui-btn-primary module" style="margin-left: -3px!important;"><i class="layui-icon"> ● </i></button>
        </div>
    </div>

</div>

JS

        function initOrder() {
            // 父容器
            var container = document.getElementById("optionDataDiv");
            Sortable.create(container, {
                animation: 500, // 排序时移动项目的动画速度,0则不带动画
                handle: ".module", // 将排序开始点击/触摸限制为指定的元素
                draggable: ".layui-row", //指定元素内的哪些项应可排序
                // 改变后触发
                onUpdate: function (evt){
                    //console.log(evt);
                    //console.log(evt.item);
                    //console.log(evt.nextSibling);
                },
                // 选择点击后触发
                onChoose: function (evt) {
                    //console.log(evt);
                    console.log(evt.item.id); //.layui-row的id
                },
            });
        }

实际业务中的应用效果

拖拽排序

# 前端
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

对话4位技术大咖，探秘华为开发者空间打破壁垒，实现跨平台协作

avatar 华为开发者空间
cover

基于云主机搭建Termgraph绘图工具，将数据转化为可视化图形

avatar 华为开发者空间
cover

意图框架习惯推荐方案，为用户提供个性化内容分发

avatar 华为开发者空间