正文 

当前位置： 首页 > java > java教程

移动端可拖拽的进度条

大熊 大熊     2022-10-01     172

关键词：

 原生js  移动端可拖拽的进度条

效果图:

代码:

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>干货-课程-完成</title>
<style>
ul.lanren{
margin:100px auto;
}
.scale_panel{
color:#999;
position:absolute;
line-height:18px;
left:60px;top:-0px;
}
.scale_panel>span:first-child{
position: absolute;
left: -5rem;
font-size: 2rem;
}
.scale_panel>span:nth-child(2){
position: absolute;
right: -5rem;
font-size: 2rem;
}
.scale>span{
background-color: red;
width:3rem;
height:3rem;
position:absolute;
left:-2px;top:-15px;
cursor:pointer;
border-radius: 50%;
font-size: 2rem;
}
.scale{
background-repeat: repeat-x;
background-position: 0 100%;
background-image: linear-gradient(to right,#08D7F2 0%,#2BF06A 50%,#2BF06A 50%,#FC6076 100%);
border-left: 1px #83BBD9 solid;
width: 43rem;
height: 1rem;
position: relative;
border-radius: 2rem;
}
.scale>div{
background-repeat: repeat-x;
background-color: red; /*进度条颜色*/
width: 0px;
position: absolute;
height: 1rem;
width: 0; left: 0; bottom: 0;
border-radius: 2rem;
}
.lanren>li{
margin-left: 3.5rem;
position:relative;
list-style:none;
font-size: 3rem;
}
#title{
position: absolute;
top: -6rem;
left: 23rem;
}
</style>
</head>
<body>
<!-- 可拖拽进度条 -->
<ul class="lanren">
<li><span id="title">0</span>
<div class="scale_panel">
<span class="f-left">吃力</span>
<span class="f-right">轻松</span>
<div class="scale" id="bar">
<div></div>
<span id="btn"></span>
</div>
</div>
</li>
</ul>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
// 进度条代码
var scale = function (btn,bar,title){
this.btn=document.getElementById(btn);
this.bar=document.getElementById(bar);
this.title=document.getElementById(title);
this.step=this.bar.getElementsByTagName("div")[0];
this.init();
};
scale.prototype={
init:function (){
var f=this,g=document,b=window,m=Math;
f.btn.ontouchstart=function (e){
var x=(e||b.event).touches[0].clientX;
var l=this.offsetLeft;
var max=f.bar.offsetWidth-this.offsetWidth;
g.ontouchmove=function (e){
var thisX=(e||b.event).touches[0].clientX;
var to=m.min(max,m.max(-2,l+(thisX-x)));
f.btn.style.left=to+'px';
f.ondrag(m.round(m.max(0,to/max)*100),to);
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
g.ontouchend=new Function('this.onmousemove=null');
};
},
ondrag:function (pos,x){
this.step.style.width=Math.max(0,x)+'px';
this.title.innerHTML=pos+'%';
}
}
new scale('btn','bar','title');
// });
</script>
</body>
</html>

复制代码

 

移动端可拖拽悬浮窗+点击事件

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><!--设置viewport--><metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=0"/></he 查看详情

可拖拽圆形进度条组件（支持移动端）(代码片段)

.katexdisplay:block;text-align:center;white-space:nowrap;.katex-display>.katex>.katex-htmldisplay:block;.katex-display>.katex>.katex-html>.tagposition:absolute;right:0px;.katexfont:1.21em/1.2Ka 查看详情

编写可拖拽的弹窗(代码片段)

...不少的东西。其中比较麻烦的是它的dialog弹窗组件是无法移动拖拽的，然而客户又强烈的要求一定要有这个功能，所以就自己写了个可拖拽的弹窗组件。虽然拖拽起来不是很流畅，但是也算是满足要求了。1.实现原理主要的实现... 查看详情

js实现可拖拽的div

实现一个div可以被拖拽，代码如下所示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>zzw_drap</title><style>*{margin:0;padding:0;}#box{position:absolute;top:100 查看详情

js中可拖拽的甘特图和流程图

甘特图：https://www.douban.com/note/441706674/https://www.uedsc.com/jquery-ganttview.htmlhttps://github.com/thegrubbsian/jquery.ganttViewhttp://download.csdn.net/detail/hspeed/5479645http://www.cnblogs.co 查看详情

拖拽的效果第一步设置可拖拽的属性draggable="true"绑定drag事件第二步设置放置位置触发的事件dragover第三步设置放置之后

(function(){/*-------节点--------*/varmyimg=document.getElementById(‘myimg‘);vardropBox=document.getElementById(‘dropBox‘);/*-------事件绑定--------*/myimg.ondragstart=drag;dropBox.ondragover=dragover;dropB 查看详情

nestable可拖拽树

...wangmj518/article/details/81746523 Nestable是基于Bootstrap的一个可拖拽的树结构表现插件。下面粗略的介绍一下它的用法，只作为学习参考，如有不合适之处，请各位凑合看。下图是我在现在系统中用到的Nestable，对系统模块排序。&nbs... 查看详情

使用movable-view制作可拖拽的微信小程序弹出层效果。(代码片段)

仿了潮汐睡眠小程序的代码。【如果有侵权联系删除最近做的项目有个弹出层效果，类似音乐播放器那种。按照普通的做了一般感觉交互不是很优雅，设计妹子把潮汐睡眠的弹层给我看了看，感觉做的挺好，于是乘着有空仿照了... 查看详情

js+css+html点击登录后弹出可拖拽的模态框(代码片段)

...c;效果图如下：当鼠标在页面上拖拽时，模态框会移动位置：点击右上角关闭按钮后，页面回到初始的样子：2编写HTML代码HTML页面包含三个部分，第一是遮罩层，就是弹出对话框时的灰色的背景；第... 查看详情

可拖拽listview基本使用技巧（dragsortlistview）

可拖拽的listview，DragSortListView这是gitHub上的一个开源项目。链接点击打开链接。这个开源控件主要是为了实现listview的item上下拖拽效果以便达到美化界面的作用。   先来看三张效果图。    第一张为初始的DragSortListView效... 查看详情

一统天下flutter(代码片段)

...:lib\\input\\drag.dart/**Draggable/DragTarget-拖拽**Draggable-按下后可拖拽的对象*LongPressDraggable-长按后可拖拽的对象*DragTarget-拖拽目标，可拖拽对象拖拽到DragTarget后可以有交互*/import\'package:flutter/material.dart\';import\'package:flutter_demo/helper.dart\... 查看详情

列表排序交互方式小结

...下几种列表排序的方式，包括：1.拖拽；2.置顶；3.上/下移动；4.编辑序号。使用方式：对列表中某项或某几项进行置顶操作方便性：局限：使用场景：用于突出众多列表项中的少数几项，从而首先展示重要信息，或快捷进入常用... 查看详情

h5移动端自定义video播放控件controls（带播放暂停，进度条拖拽）

参考技术A说明：video不支持本地视频的进度拖动，会出现拖动就重头播放的情况，视频链接是网上随便找的，可能会出现请求不成功的情况。参考api:http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp 查看详情

实现拖拽的原理

鼠标按下记录当前位置信息鼠标拖动记录鼠标的移动距离,来计算设置当前元素的位置偏移鼠标抬起删除鼠标up时候的事件处理程序鼠标丢失IE和火狐下,可以使用setCapture()和releaseCapture()chrome下使用document监听事件 查看详情

5分钟实现一个可拖拽矩形(代码片段)

...的4个角可以将矩形缩放，在矩形上按住鼠标拖动可以移动该矩形的位置。要求如下：整个矩形的最小大小为5px*5px，缩放到最小时不能发生移动；鼠标快速移动时移动和缩放效果要保持流畅。二、直接上代码还是 查看详情

如何npm安装angularjs

...rJS的拖拽指令支持GPU加速支持边界限制支持设置拖拽把柄移动端与PC端通用使用支持使用script标签或者webpack、requirejs、seajs调用：script调用scriptsrc="lib/angular.js"></script><scriptsrc="dist/angular-drag.js"></script&g... 查看详情

jquery或js关于鼠标单击和拖拽的区别

...下，抬起（click相当于mousedown+mouseup）拖拽是鼠标按下，移动，抬起（mousedown+mousemove+mouseup）参考技术Amousedown后若mousemove了不算click 参考技术B鼠标单击，只是一个简单的鼠标点击动作。而鼠标拖拽比鼠标单击要复杂一点，它包含... 查看详情

可拖拽listview基本使用技巧（dragsortlistview）

可拖拽的listview，DragSortListView这是gitHub上的一个开源项目。链接点击打开链接。这个开源控件主要是为了实现listview的item上下拖拽效果以便达到美化界面的作用。   先来看三张效果图。    第一张为初始的DragSortListView效... 查看详情