码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 前端Sortable拖拽实现排序


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

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

    HTML

    1. <div class="layui-row" id="optionDataDiv">
    2. <div class="layui-row" id="div1" style="margin-left: 20px;margin-top: 5px">
    3. <div class="layui-col-xs4">
    4. <input type="text" name="optionKey" class="layui-input" value="" placeholder="选项名">
    5. div>
    6. <div class="layui-col-xs4">
    7. <input type="text" name="optionValue" class="layui-input" value="" placeholder="选项值">
    8. div>
    9. <div class="layui-col-xs4">
    10. <button type="button" class="layui-btn layui-btn-primary optionRemove"><i class="layui-icon">i>button>
    11. <button type="button" title="长按拖拽排序" class="layui-btn layui-btn-primary module" style="margin-left: -3px!important;"><i class="layui-icon"> ● i>button>
    12. div>
    13. div>
    14. <div class="layui-row" id="div2" style="margin-left: 20px;margin-top: 5px">
    15. <div class="layui-col-xs4">
    16. <input type="text" name="optionKey" class="layui-input" value="" placeholder="选项名">
    17. div>
    18. <div class="layui-col-xs4">
    19. <input type="text" name="optionValue" class="layui-input" value="" placeholder="选项值">
    20. div>
    21. <div class="layui-col-xs4">
    22. <button type="button" class="layui-btn layui-btn-primary optionRemove"><i class="layui-icon">i>button>
    23. <button type="button" title="长按拖拽排序" class="layui-btn layui-btn-primary module" style="margin-left: -3px!important;"><i class="layui-icon"> ● i>button>
    24. div>
    25. div>
    26. div>

    JS

    1. function initOrder() {
    2. // 父容器
    3. var container = document.getElementById("optionDataDiv");
    4. Sortable.create(container, {
    5. animation: 500, // 排序时移动项目的动画速度,0则不带动画
    6. handle: ".module", // 将排序开始点击/触摸限制为指定的元素
    7. draggable: ".layui-row", //指定元素内的哪些项应可排序
    8. // 改变后触发
    9. onUpdate: function (evt){
    10. //console.log(evt);
    11. //console.log(evt.item);
    12. //console.log(evt.nextSibling);
    13. },
    14. // 选择点击后触发
    15. onChoose: function (evt) {
    16. //console.log(evt);
    17. console.log(evt.item.id); //.layui-row的id
    18. },
    19. });
    20. }

    实际业务中的应用效果

    拖拽排序

  • 相关阅读:
    由阿里三位专家撰写:数据库高效优化:架构、规范SQL技巧文档
    什么是自动化测试框架?常用的自动化测试框架有哪些?
    Visual Studio (VS2017)提交代码到Git服务器流程(GitCode)
    阿里MaxCompute生态团队负责人—李睿博 : 参与开源,让自己的履历与众不同|《大神详解开源 BUFF 增益攻略》讲座回顾...
    [附源码]SSM计算机毕业设计基于健身房管理系统JAVA
    配置vscode远程免密登入Linux服务器
    前端周刊第二十九期
    Matlab:访问表中的数据
    C# 创建标签PDF文件
    thinkPHP框架详解+部署
  • 原文地址:https://blog.csdn.net/dongyan3595/article/details/133927937
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号