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元素拖动占位内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-11-12

javascript实现dom元素可拖动

摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Firefox,opera等浏览器的可拖动dom元素的插件. 实现这个功能所需要的知识点不多,如下: 1.js中element.style.left style.left返回的变量是个字符串,是个可改变量 js中element.offsetLeft offsetLeft返回的是个int类型,不可改变量(

javascript实现拖动元素交换位置

本文实例讲述了javascript实现拖动元素交换位置的代码.分享给大家供大家参考.具体如下: 实现目标:可拖动元素拖动到另外一个元素位置的时候,互相交换位置. 启发来源:最初形式是网上看到的一个拼图小游戏. 运行效果截图如下: 具体代码如下: 代码: body,ul,li{margin:0;padding:0;} ul{list-style: none;} body{font:13px/1.5 Tahoma;} #box{position:relative;width:435px;height

JavaScript 实现鼠标拖动元素实例代码

一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.fn.draggable插件,在接触一些资料和别人的思路,今天终于把这个拖动功能给完善了,下面就来看看它的实现 二.设计思路 在拖动元素上绑定鼠标按下事件,在文档对象中绑定鼠标移动,鼠标弹起事件:为什么不把三个事件都绑定在拖动元素上,这是因为鼠标移动太快时,鼠标移动和弹起事件处理程序将不会执行 复制代

JavaScript:Div层拖动效果实例代码

Div层拖动效果图: 实现:CSS: 复制代码 代码如下: <style>div{position:relative;}</style> JS: 复制代码 代码如下: <script type="text/javascript"> var mouseover=truevar xcoor;var ycoor;function coordinates(){ if (event.srcElement.id.indexOf("wishbroad&q

JS滚轮控制图片缩放大小和拖动的实例代码

具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .dragAble { position: relative; cursor: move; } .img-con { position: relative; width: 71

JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)

最近做了个项目,其中有项目需求是要实现跑马灯抽奖效果,实现此功能主要用到js相关知识,废话不多说,感兴趣的朋友可以阅读下全文. 开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要用到的: 1.移动端1px像素线的问题 对于设计师给我的手机端网页的设计稿都是2倍图.按照道理来说,在写网页的时候,所有对象的实际尺寸都是会除2.但是对于1像素的线呢? 先来看两张图,设计稿的效果: 在三星 S4下的实际显示效果: 可以看到这个时候1px的线竟然显示不出来了.这个问题是跟 S4手机的

JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)

在上篇文章给大家介绍了JavaScript实现跑马灯抽奖活动实例代码解析与优化(一),既然是要编写插件.那么叫做"插件"的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率.那么叫做插件的东西应该具有哪些基本特征呢?让我们来总结一下: 1.JavaScript 插件一些基本特征: 配置一定要简单 插件中定义的变量不污染全局变量: 同一段代码可以在不同的地方复用: 用户可以自定义自己功能参数: 具有销毁变量和参数的功能: 如果按照以上的几个特征来写插件的话,我们可

javascript实现鼠标拖动改变层大小的方法

本文实例讲述了javascript实现鼠标拖动改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动改变层的大小</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style> { box-sizing: border-box; moz-b

JavaScript下拉菜单功能实例代码

本文给大家分享一段实例代码关于js实现下拉菜单功能,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo

javascript实现下雪效果【实例代码】

原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪花飞舞</title> <lin

JavaScript异步上传图片文件的实例代码

html: <form action="url" enctype="multipart/form-data" id="myform" method="post"> <input accept="image/*" id="addfile" type="file" /> </form> jquery: $("#addfile&

JavaScript无缝滚动效果的实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&