这样一个滑块，请问如何实现以下效果：
拖拽按钮到尾部时，滑块内的字变成“停止成功，并出现遮罩层，遮罩层上有确认取消按钮，点击确认，跳转到其他页面，点击取消，则滑块回复到最开始的样子
如果拖拽长度较小，则滑块会返回到原始位置
滑块不可点击，只能拖拽才能实现效果
-
等级
本版专家分：0结帖率 100% -
这样一个滑块，请问如何实现以下效果：
拖拽按钮到尾部时，滑块内的字变成“停止成功，并出现遮罩层，遮罩层上有确认取消按钮，点击确认，跳转到其他页面，点击取消，则滑块回复到最开始的样子
如果拖拽长度较小，则滑块会返回到原始位置
滑块不可点击，只能拖拽才能实现效果展开阅读全文
-
等级
本版专家分：4550勋章
-
- GitHub 绑定GitHub第三方账户获取
-
-
可以结合鼠标mousedown和mouseup事件，鼠标移动方向和坐标。
或者直接去找找有没有类似的插件
-
等级
本版专家分：4089
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动停止充电</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
*{margin:0;padding:0}html,body{text-align:center;width:100%;height:100%}body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#slide-wrapper{width:360px;position:relative;padding:50px;background:#ecf0f1;margin:0 auto}#slider{padding:20px;position:relative;border-radius:2px;background-color:#fdeb9c;overflow:hidden;text-align:center}#slider.success{background-color:#e5ee9f}#label{width:40px;position:absolute;left:0;top:0;height:100%;background:#e67e22;z-index:999;cursor:pointer}#labelTip{z-index:9}#reset-btn{margin:20px 0 10px 0}@media screen and (max-width:640px){#slide-wrapper{width:64%}}p{padding:0 10px;word-wrap:break-word}
</style>
</head>
<body>
<div id="slide-wrapper">
<input type="hidden" value="" id="lockable"/>
<div id="slider">
<span id="label"></span>
<span id="lableTip">滑动停止充电</span>
</div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
"use strict";function SliderUnlock(g,c,f,e){var a=this;var b=a.checkElm(g)?$(g):$;var c=a.checkObj(c)?c:new Object();var f=a.checkFn(f)?f:function(){};var e=a.checkFn(e)?e:function(){};var d={labelTip:typeof(c.labelTip)!=="undefined"?c.labelTip:"Slide to Unlock",successLabelTip:typeof(c.successLabelTip)!=="undefined"?c.successLabelTip:"Success",duration:typeof(c.duration)!=="undefined"||!isNaN(c.duration)?c.duration:200,swipestart:typeof(c.swipestart)!=="undefined"?c.swipestart:false,min:typeof(c.min)!=="undefined"||!isNaN(c.min)?c.min:0,max:typeof(c.max)!=="undefined"||!isNaN(c.max)?c.max:b.width(),index:typeof(c.index)!=="undefined"||!isNaN(c.index)?c.index:0,IsOk:typeof(c.isOk)!=="undefined"?c.isOk:false,lableIndex:typeof(c.lableIndex)!=="undefined"||!isNaN(c.lableIndex)?c.lableIndex:0};a.elm=b;a.opts=d;a.swipestart=d.swipestart;a.min=d.min;a.max=d.max;a.index=d.index;a.isOk=d.isOk;a.lableIndex=d.lableIndex;a.success=f;a.always=e}SliderUnlock.prototype.checkElm=function(a){if($(a).length>0){return true}else{throw"this element does not exist."}};SliderUnlock.prototype.checkObj=function(a){if(typeof a==="object"){return true}else{throw"the params is not a object."}};SliderUnlock.prototype.checkFn=function(a){if(typeof a==="function"){return true}else{throw"the param is not a function."}};SliderUnlock.prototype.init=function(){var a=this;a.updateView();a.elm.find("#label").on("mousedown",function(b){var c=b||window.event;a.lableIndex=c.clientX-this.offsetLeft;a.handerIn()}).on("mousemove",function(b){a.handerMove(b)}).on("mouseup",function(b){a.handerOut()}).on("mouseout",function(b){a.handerOut()}).on("touchstart",function(b){var c=b||window.event;a.lableIndex=c.originalEvent.touches[0].pageX-this.offsetLeft;a.handerIn()}).on("touchmove",function(b){a.handerMove(b,"mobile")}).on("touchend",function(b){a.handerOut()})};SliderUnlock.prototype.handerIn=function(){var a=this;a.swipestart=true;a.min=0;a.max=a.elm.width()};SliderUnlock.prototype.handerOut=function(){var a=this;a.swipestart=false;if(a.index<a.max){a.reset()}};SliderUnlock.prototype.handerMove=function(c,b){var a=this;if(a.swipestart){c.preventDefault();var c=c||window.event;if(b=="mobile"){a.index=c.originalEvent.touches[0].pageX-a.lableIndex}else{a.index=c.clientX-a.lableIndex}a.move()}};SliderUnlock.prototype.move=function(){var a=this;if((a.index+0)>=a.max){a.index=a.max-0;a.swipestart=false;a.isOk=true}if(a.index<0){a.index=a.min;a.isOk=false}if(a.index==a.max&&a.max>0&&a.isOk){a.success()}a.backgroundTranslate();a.updateView()};SliderUnlock.prototype.reset=function(){var a=this;a.index=0;a.elm.find("#label").animate({left:a.index},a.opts.duration).next("#lableTip").animate({opacity:1},a.opts.duration);a.updateView()};SliderUnlock.prototype.backgroundTranslate=function(){var a=this;a.elm.find("#label").css("left",a.index+"px").next("#lableTip").css("opacity",1-(parseInt($("#label").css("left"))/a.max))};SliderUnlock.prototype.updateView=function(){var a=this;if(a.index==(a.max-0)){$("#lockable").val(1);var b={filter:"alpha(opacity=1)","-moz-opacity":"1",opacity:"1"};a.elm.addClass("success").find("#lableTip").html(a.opts.successLabelTip).css(b)}else{$("#lockable").val(0);a.elm.removeClass("success").find("#lableTip").html(a.opts.labelTip)}a.always()};
</script>
<script>
$(function () {
var slider = new SliderUnlock("#slider", {
labelTip:"滑动停止充电",
successLabelTip:"成功"
}, function(){
if(confirm("您确定要停止充电吗")){
location.assign("http://www.baidu.com");
}
else{
slider.reset();
}
},function(){});
slider.init();
})
</script>
</body>
</html>
-
等级
本版专家分：676勋章
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- 脉脉勋章 绑定脉脉第三方账户获得
-
- GitHub 绑定GitHub第三方账户获取
-
- 领英 绑定领英第三方账户获取
-
-
自己写的一个拖拽效果demo，你可以参考一下原理去实现你要的效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>index</title>
<style>
* {
margin: 0;
padding: 0;
}
body{background:#000;}
.box {
width: 250px;
height: 250px;
position: absolute;
overflow: hidden;
background:pink;
outline:rgba(252,156,27,0.8) solid 25px;
}
</style>
</head>
<body>
<div class="box" id="box">
</div>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
var OclientX,
OclientY,
NclientX,
NclientY,
flag = false,
obj = $(".box");
obj.mousedown(function(e){
flag = true; //鼠标按下后改变可拖动状态
e = e || event;
OclientX = e.pageX - $(this).offset().left; //计算出按下后鼠标相对对象左上角左边的距离
OclientY = e.pageY - $(this).offset().top; //计算出按下后鼠标相对对象左上角上边的距离
return false;
});
obj.mousemove(function(e){
e = e || event;
NclientX = e.pageX;
NclientY = e.pageY;
if(flag){
clientX = (NclientX - OclientX); //鼠标左边位置减去相对左上角左边位置可得拖动对象left
clientY = (NclientY - OclientY); //鼠标上边位置减去相对左上角上边位置可得拖动对象top
$(this).css({"left":clientX+"px","top":clientY+"px"});
}
return false;
});
obj.mouseup(function(){
flag = false; //松开鼠标改变可拖动装状态
return false;
});
});
</script>
</body>
</html>
- js原生拖拽事件（HTML5的拖放 API）
在HTML5之前，如果要实现拖放效果，一般会使用mousedown、mousemove和mouseup三个事件进行组合来模拟出拖拽效果，比较麻烦。而HTML5规范实现了原生拖放功能，使得元素拖放的实现更加方便和高效。 默认情况下，图像...
- 如何用JS实现一个简单的拖拽事件
想要实现这个跟随鼠标移动的效果，必须要懂得什么是JS的事件； 咱们先看看这个效果，这个带透明度的罩罩只有在鼠标移入图片的时候才会出现，这就涉及到了一个鼠标移入事件（onmouseover） 先写个基本的布局： <!...
- js事件实现拖拽效果
标题36-js事件实现拖拽效果 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;拖拽效果&...
- 关于原生JavaScript实现DOM拖拽事件（元素拖拽）
首先，类比于电脑桌面的图标拖拽平移，鼠标按下时进入事件，记录鼠标相对元素位置，然后鼠标移动，动态改变元素定位，最后鼠标松开，位置不再改变。 用到绑定的事件有：onmousedown,onmousemove,onmouseup。 值得...
- 如何用原生JS实现拖拽功能
实现思路代码实现mousedown事件mousemove事件mouseup事件效果 预备知识 鼠标事件mousedown,mousemove,mouseup； 实现思路 1.当鼠标移入元素并且点击时，触发mousedown事件，让元素变为可移动状态； 2.当鼠标在移动时...
- 用javaScript实现鼠标拖拽事件
用javaScript实现鼠标拖拽事件
- 使用javaScript实现鼠标拖拽事件
本文实例为大家分享了js实现鼠标拖拽事件的具体代码，供大家参考，具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; ...
- js实现拖拽事件
HTML <body> <div></div> </body> CSS div{ position: absolute; width: 200px; height: 200px; background: #369 ...JS window....
- 使用js实现鼠标拖拽事件
在博客上看到有基于jquery实现的 ... 发现元素如果设置有margin时...改为js实现，并增加了对magin的兼容 js效果链接 jquery效果链接 <!DOCTYPE html> <html> <head> ...
- JavaScript实现鼠标拖拽效果
前几篇博客一直在讲鼠标的移动事件相关的效果，今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果。效果如图： HTML代码： <div id="box"></div> CSS代码： * { margin: 0; padding: 0; } ...
- JS拖动事件（鼠标拖动事件）&手指事件（PC移动端拖拽）
拖动事件与手指事件 顾名思义，就是通过不同的触发条件来达到你想实现的拖动效果，至于第三条的可移动范围，可以是 父级dom 的宽高，也可以是 可见的视口宽高，具体根据自己的需求定制，下面会提供对应获取方法 ...
- JS的拖拽事件
拖拽的三大事件： onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标释放 这3个事件写拖拽在PC上是需要嵌套的。 话不多说，送上2种方式的代码，如下： 第一种方法 原理 根据以上原理实现托拽的代码如下： ...
- three.js实现拖拽
要想实现拖拽功能需要用到两个库文件 //THREE.TrackballControls()轨迹球控件，最常用的控件，可以使用鼠标轻松的移动、平移，缩放场景。 TrackballControls.js //DragControls包含两个事件：dragstart、dragend。...
- 【JavaScript DOM】使用原生JS实现拖拽元素
【JavaScript】使用js实现拖拽元素 文章关键要点 1、三个事件 onmousedown、onmousemove、onmouseout （onmousemove、onmouseout都在鼠标按下事件中） 2、鼠标按下获取元素的offsetLeft、offsetTop，鼠标距离可视...
- html5 拖拽事件，js实现拖拽删除功能。请大神赐教！
想把图片拉到删除框内，图片就会被删除，我在用了removeChild() ...附上实现拉图片到删除框的JS代码。 function enter(e){ //var three=document.getElementById('three'); var b=e.dataTransfer.getData('aa');...
- JS中实现拖拽效果
实现拖拽效果方法：利用JS监听鼠标的三个事件，共同配合来实现这个操作 （鼠标按下事件、鼠标释放事件、鼠标按下移动事件） 实现原理： 使用on来监听事件， 例：onmousedown监听鼠标按下事件；onmousemove监听鼠标...
- js实现拖动div元素（js实现元素拖动）
注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script> 效果图： <!doctype html> <html> <head>...JS拖拽div<...
- 原生js中使用addEventListener实现拖拽事件
addEventListener()方法用于指向元素添加事件，注意在IE8及更早版本，opera7.0及更早版本都不支持addEventListener(),但是可以使用attchEvent()方法来进行添加事件 提示：使用removeEventListener()来溢出...
- 用js实现按钮的拖拽
最近做了一个需求，要求实现客服按钮的拖拽效果。 本来以为只是一个简单的拖拽效果，最后做起来却发现在拖拽结束的时候会触发按钮的点击事件。 查了一些文章后解决了这个问题，下面贴上代码： html： <div ...
- 超级简单的利用javascript实现文件拖拽事件
1.效果图： 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <style type="text/css"> #div1 { width: 350px;......
- js原生拖拽的两种方法
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 1.onmousedown：鼠标按下事件 2.onmousemove：鼠标移动事件 3.onmouseup：鼠标抬起事件 重点： 1、一定要绝对定位，脱离文档流才...
- JavaScript实现拖拽功能
盒子拖拽 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head lang=&amp;quot;en&amp;quot;&amp;amp;gt; ...
- JavaScript实现div的鼠标拖拽
HTML <div class="box"></div> CSS .box{ width: 50px; height: 50px; position: absolute;...分为三个事件，鼠标点击下去（onmousedown），鼠标移动时候（onmousemove），鼠标松开（mouseup事
- 原生js实现拖拽效果，js拖拽原理
之前用原生js中的H5中的api：gragstart，graggover，drop写的拖拽发现不能微调位置，于是改为用原生js来写拖拽效果。 我们一共会用到三个事件：mosedown，mosemove以及moseup。 第一种理解方式：（更易于理解） ...
- js实现拖拽功能(支持左右拖动、删除)
概述：实现拖拽工作流程配置，可以鼠标左右移动元素，鼠标双击可以删除元素。 基本原理：就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变...
- js实现拖拽文件上传
//拖拽文件刚到目标上 $$('#app-form').on('dragenter', function () { console.log("dragenter"); }); //拖拽在目标上，一直执行 $$('#app-form').on('dragover', function () { console.log("dragover"); $$('#...
- 原生JS实现拖拽照片墙，实现照片互换位置
分享一个用原生JS实现的可拖拽照片墙，效果如下： 实现代码如下： <!DOCTYPE html> <html> <head> <meta ...原生JS实现拖拽照片墙，实现照...
- 用JS实现拖拽效果
知识储备： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title&... width:
- 使用js 实现鼠标拖拽会用到哪些事件
dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件. dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮 dragover:...
- JS 拖拽事件
这里写的是一个原生js实现拖拽的效果，首先： 1、实现拖拽的三大事件，是要首先清楚的 onmousedown （鼠标按下的时候）、onmousemove（鼠标移动的时候）、onmouseup（鼠标松开的时候） 2、给目标元素加上...