返回顶部
首页 > 资讯 > 精选 >JS如何实现元素的拖动与占位功能
  • 798
分享到

JS如何实现元素的拖动与占位功能

2023-06-25 14:06:51 798人浏览 独家记忆
摘要

这篇文章主要为大家展示了“js如何实现元素的拖动与占位功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何实现元素的拖动与占位功能”这篇文章吧。先来看看效果:  实现功

这篇文章主要为大家展示了“js如何实现元素的拖动与占位功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何实现元素的拖动与占位功能”这篇文章吧。

先来看看效果: 

JS如何实现元素的拖动与占位功能

 实现功能:

 拖动元素从一个板块移动到另一个板块的某个位置, 博主根据自己的需求做的这个是点击的元素   只能移动到它所在模块的下一个模块,如果移动到别的模块就会回到原来位置,而且当你拖动的   元素位置没有超过某个距离也会自动弹回到原来位置

案例分析: 

 关键一步就在于!当你鼠标按下的时候,不仅要获取到当前的元素还要获取到当前所在的模块(所以在一开始就要先给每个模块设置一个index属性,属性值就是每个模块本身的索引号),这一步是为了当鼠标放开的时候进行判断所要移动到的模块是否是当前模块的下一个模块(可能有点绕,仔细读仔细品),如果条件成立,那么就要开始和所要移动到的模块中的元素一一比较位置了(这里是为了确定元素要移动到的具体位置),确定好后就要在具体位置新建一个空的元素,把移动元素的内容添加到这个空的元素中,最后最后一步!不要忘记把原先的那个元素移除噢~

代码呈现:  

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta Http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="./js/Jquery.min.js"></script>    <style>        * {            margin: 0;            left: 0;            list-style: none;            box-sizing: border-box;        }        .container {            display: flex;            justify-content: space-around;            width: 1000px;            height: 600px;            margin: 100px auto;            padding: 0;        }        .container li {            width: 180px;            height: 100%;            background-color: plum;            border-radius: 10px;            padding: 5px;        }        .item {            width: 170px;            height: 100px;            background-color: salmon;            margin: 5px 0;            border-radius: 10px;            cursor: pointer;        }    </style></head><body>    <ul class="container">       <li>           <div class="item">1</div>           <div class="item">2</div>           <div class="item">3</div>       </li>        <li>        <div class="item">4</div>        <div class="item">5</div>        <div class="item">6</div>       </li>        <li>        <div class="item">7</div>        <div class="item">8</div>        <div class="item">9</div>       </li>        <li></li>       <li></li>    </ul>    <script>        $(function(){            for (var i = 0; i < 5; i++) {               $(".container li")[i].setAttribute('index', i);            }            $('.item').on('mousedown',function(e){                var index = Number($(this).parent()[0].getAttribute('index'));                //获取当前所选任务的左边距和上边距                startLeft = $(this).offset().left;                startTop = $(this).offset().top;                //求鼠标在所选任务里的位置                mouseX = e.pageX - startLeft;                mouseY = e.pageY - startTop;                $(this).on('mousemove',function(e){                    $(this).offset({                       left: e.pageX - mouseX,                       top: e.pageY - mouseY                            })                })                $(this).on('mouseup',function(){                    //用来记录item移动到那个位置                    k = -1;                    $(this).off('mousemove');                     //获取所选 模块 的下一个 模块索引                    if (index >= 4) {                        index = 3;                    }                    var next = $('.container li').eq(index + 1);                                         //如果鼠标放开时,所移动到的距离正好位于所选模块的下一个模块的区间内,就执行                   if ($(this).offset().left >= next.offset().left&&$(this).offset().left <= next.offset().left + next[0].offsetWidth) {                   //获取到所选的item中的内容                   var text = $(this).html();                   //在最终所要放置的位置新建一个空任务,再把所获取到的内容添加进去                   var father = document.createElement('div');                   father.className = 'item';                   $(father).append(text);                  //把点击的当前元素获取过来                  var ele = $(this);                 //如果当前模块没有item,则直接添加到第一个位置,如果有,则比较看它的top比哪个 大就放在哪个的后面                 if (next.children().length == 0) {                    next.append(father);                } else {                   $.each(next.children(), function (i,item) {                    if ( ele.offset().top > $(item).offset().top) {                        k = i;                    }                   })                    //如果 k == -1 说明 要把任务放在该模块的第一个位置                    if (k == -1) {                        next.children().eq(0).before(father);                    } else {                        next.children().eq(k).after(father);                 }                                    }                //解绑移动事件,清空原来位置的item                $(this).off("mousemove");                $(this).remove();                $(this).empty();            } else {                //这里就是移动不成功,回到原来位置                $(this).offset({                    left: startLeft,                    top: startTop                })                $(this).off("mousemove");            }                })            })        })    </script></body></html>

 扩展:

 这个案例再结合后台数据,就可以实现多个任务不同进度的显示和拖动效果了,如下图所示:

JS如何实现元素的拖动与占位功能

以上是“JS如何实现元素的拖动与占位功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!

--结束END--

本文标题: JS如何实现元素的拖动与占位功能

本文链接: https://lsjlt.com/news/305546.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS如何实现元素的拖动与占位功能
    这篇文章主要为大家展示了“JS如何实现元素的拖动与占位功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何实现元素的拖动与占位功能”这篇文章吧。先来看看效果:  实现功...
    99+
    2023-06-25
  • JS实现元素的拖动与占位功能
    这篇博客,是博主这几天刚做的一个项目遇到的一个难点,学会了这个,你就能轻松实现页面元素的移动啦,再配合一些条件,就可以做出一个任务完成进度的页面了! 先来看看效果:  ...
    99+
    2024-04-02
  • 如何实现html元素拖拽功能
    这篇文章主要讲解了“如何实现html元素拖拽功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何实现html元素拖拽功能”吧!1.创建拖拽对象 我们可以通...
    99+
    2024-04-02
  • vuejs2.0运用原生js如何实现拖拽元素功能
    这篇文章将为大家详细讲解有关vuejs2.0运用原生js如何实现拖拽元素功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。示例如下:<!DOCTYPE h...
    99+
    2024-04-02
  • js如何实现鼠标拖动功能
    这篇文章将为大家详细讲解有关js如何实现鼠标拖动功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图:代码如下:<!DOCTYPE html> ...
    99+
    2024-04-02
  • js如何实现拖拽功能
    这篇文章主要为大家展示了“js如何实现拖拽功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js如何实现拖拽功能”这篇文章吧。效果图:(红色方块可任意拖动)代码...
    99+
    2024-04-02
  • jquery如何实现占位置隐藏元素
    本篇内容介绍了“jquery如何实现占位置隐藏元素”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • vue怎么实现拖拽元素功能
    这篇“vue怎么实现拖拽元素功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue怎么实现拖拽元素功能”文章吧。示例代码如...
    99+
    2023-07-04
  • 如何使用Vue3实现一个飘逸元素拖拽功能
    这篇文章主要介绍了如何使用Vue3实现一个飘逸元素拖拽功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何使用Vue3实现一个飘逸元素拖拽功能文章都会有所收获,下面我们一起来看看吧。推荐几个好用的工具var-...
    99+
    2023-07-05
  • Vue实用功能之实现拖拽元素、列表拖拽排序
    目录Vue实现拖拽元素、列表拖拽排序组件使用补充:排序动画总结Vue实现拖拽元素、列表拖拽排序 需求:    1、左右两个容器,左边和右边的元素可以拖动...
    99+
    2022-11-13
    vue列表拖拽排序 vue实现拖拽功能 vue实现组件拖拽
  • Vue如何自定义指令实现元素拖动
    这篇文章主要介绍了Vue如何自定义指令实现元素拖动的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue如何自定义指令实现元素拖动文章都会有所收获,下面我们一起来看看吧。一、自定义指令在使用自定义指令之前,先对自...
    99+
    2023-06-26
  • html5中如何使用js实现拖拽功能
    这篇文章主要介绍了html5中如何使用js实现拖拽功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. HTML5 拖拽1.1 相关知识拖拽元素:可以为元素添加 dragg...
    99+
    2023-06-09
  • jQuery如何实现表格元素动态创建功能
    这篇文章将为大家详细讲解有关jQuery如何实现表格元素动态创建功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Jquery实现表格元素的动态创建,本质是通过构造一个D...
    99+
    2024-04-02
  • js如何实现横向拖拽导航条功能
    这篇文章给大家分享的是有关js如何实现横向拖拽导航条功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果如下:代码如下:<!DOCTYPE HTML> &...
    99+
    2024-04-02
  • JS如何实现拖动模态框
    这篇文章主要介绍了JS如何实现拖动模态框的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JS如何实现拖动模态框文章都会有所收获,下面我们一起来看看吧。效果图:需求分析:点击登录后登录表单和遮罩层显示,点击关闭按钮...
    99+
    2023-07-02
  • Javascript如何实现元素选择器功能
    本篇内容介绍了“Javascript如何实现元素选择器功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!什么是元素选择器?用过jquery的...
    99+
    2023-07-02
  • 小程序中如何实现canvas拖动功能
    这篇文章给大家分享的是有关小程序中如何实现canvas拖动功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。创建画布<canvas type="2d" id=&quo...
    99+
    2023-06-21
  • 如何使用Vue实现拖动截图功能
    这篇文章主要介绍了如何使用Vue实现拖动截图功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何使用Vue实现拖动截图功能文章都会有所收获,下面我们一起来看看吧。一、安装html2canvas、vue-cro...
    99+
    2023-07-04
  • 怎么使用Vue3实现一个飘逸元素拖拽功能
    这篇文章主要介绍了怎么使用Vue3实现一个飘逸元素拖拽功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用Vue3实现一个飘逸元素拖拽功能文章都会有所收获,下面我们一起来看看吧。进入正题元素拖拽是一个比较...
    99+
    2023-07-06
  • JS如何拖动选择table里的单元格
    这篇文章主要为大家展示了“JS如何拖动选择table里的单元格”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何拖动选择table里的单元格”这篇文章吧。具...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作