87,997
社区成员
发帖
与我相关
我的任务
分享如何用JS实现拖拽事件
这样一个滑块，请问如何实现以下效果：
拖拽按钮到尾部时，滑块内的字变成“停止成功，并出现遮罩层，遮罩层上有确认取消按钮，点击确认，跳转到其他页面，点击取消，则滑块回复到最开始的样子
如果拖拽长度较小，则滑块会返回到原始位置
滑块不可点击，只能拖拽才能实现效果
...全文
请发表友善的回复…
发表回复
#麻辣小龙虾# 2017-03-27
- 打赏
- 举报
自己写的一个拖拽效果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>
cn00439805 2017-03-27
- 打赏
- 举报
<!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>
___紫菜 2017-03-27
- 打赏
- 举报
可以结合鼠标mousedown和mouseup事件，鼠标移动方向和坐标。
或者直接去找找有没有类似的插件
或者直接去找找有没有类似的插件
