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元素拖动占位内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JavaScript 实现鼠标拖动元素实例代码
一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.fn.draggable插件,在接触一些资料和别人的思路,今天终于把这个拖动功能给完善了,下面就来看看它的实现 二.设计思路 在拖动元素上绑定鼠标按下事件,在文档对象中绑定鼠标移动,鼠标弹起事件:为什么不把三个事件都绑定在拖动元素上,这是因为鼠标移动太快时,鼠标移动和弹起事件处理程序将不会执行 复制代
-
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实现dom元素可拖动
摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Firefox,opera等浏览器的可拖动dom元素的插件. 实现这个功能所需要的知识点不多,如下: 1.js中element.style.left style.left返回的变量是个字符串,是个可改变量 js中element.offsetLeft offsetLeft返回的是个int类型,不可改变量(
-
JS实现元素的拖动与占位功能
这篇博客,是博主这几天刚做的一个项目遇到的一个难点,学会了这个,你就能轻松实现页面元素的移动啦,再配合一些条件,就可以做出一个任务完成进度的页面了! 先来看看效果: 实现功能: 拖动元素从一个板块移动到另一个板块的某个位置, 博主根据自己的需求做的这个是点击的元素 只能移动到它所在模块的下一个模块,如果移动到别的模块就会回到原来位置,而且当你拖动的 元素位置没有超过某个距离也会自动弹回到原来位置 案例分析: 关键一步就在于!当你鼠标按下的时候,不仅要获取到当前的元素还要获取到当前所在的
-
基于JS组件实现拖动滑块验证功能(代码分享)
拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m
-
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前 拖动后 代码引用的css与js都是线上的 将代码全部复制到一个html中可以直接打开,极其简单. 来分析一下代码 底色div上放了一个变色div再放一个提示字的div最后加一个滑块div 给滑块div绑定鼠标移动事件 <!DOCTYPE html> <html> <head> <meta charset="
-
AngularJS实现DOM元素的显示与隐藏功能
本文实例讲述了AngularJS实现DOM元素的显示与隐藏功能.分享给大家供大家参考,具体如下: DOM元素的显示与隐藏 ,是前端开发中常常会用到的功能,AngularJS中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean. [HTML代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m
-
JS实现六位字符密码输入器功能
老规矩~ 上DEMO,过过瘾先:六位字符密码输入器 再上源码:六位字符密码输入器 从DEMO中我看可以看出,首先只能输入六个字符,并且仅允许输入数字,在输入六位数字完成之后会自动执行一个回调(DEMO中是将输入结果显示出来了) 一. 先说原理 首先呢,我们需要两个东东:其一是一个真是的输入框,即:真正处于焦点状态并获取用户输入的input:其二是一组伪输入框,即:并没有真正获取焦点,但只是显示了当前输入的值(当然啦,密码嘛,只有一个小黑点而已~). 其次呢,我们需要简单不惧一下,让着一组(6个)
-
基于JS实现移动端左滑删除功能
废话不多说了,直接给大家贴代码了,具体代码如下所示: <div class="wrap pay-wrap" id="lists"> @foreach (var item in Model) { <div class="pay-list" style="height:90px;margin: 10px 15px 10px 15px;" id="@item.UID"> <div c
-
JS实现的简单拖拽购物车功能示例【附源码下载】
本文实例讲述了JS实现的简单拖拽购物车功能.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8" /> <title>使用拖放API将商品拖入购物车</title> <style> body { font-size:12px } .liT{ border-bottom:solid 1px #ccc; background-color:#eee; font-weig
-
Vue实现带进度条的文件拖动上传功能
1. 基本界面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1
-
Vue.js 实现微信公众号菜单编辑器功能(一)
学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"&g
-
JS实现移动端在线签协议功能
在一个风和日丽的下午,刚准备下班,突然接到需求说要做一个在线签协议功能,当时心里想着不就百度一顿拷贝就完事了吗(因为我没用过canvas,所谓初生牛犊不怕虎 ),谁知做起来如此吃力,下面就来记录下历程. 协议模板 分析 如上图,需要做的就是做一个签字板可以在上面写字,写完后点击完成可以生成如上图的图片所示,把签好的字放到指定的位置. 做这个第一反应肯定就是使用canvas绘制路径 我的思路是: 一个字一个字写,每写一个字点一下记录,最后拼接,但想到用户体验问题就pass了这个思路. 最后的思路: