如何用JS实现拖拽事件

weixin_37700885 2017-03-25 03:35:11

这样一个滑块，请问如何实现以下效果：
拖拽按钮到尾部时，滑块内的字变成“停止成功，并出现遮罩层，遮罩层上有确认取消按钮，点击确认，跳转到其他页面，点击取消，则滑块回复到最开始的样子
如果拖拽长度较小，则滑块会返回到原始位置
滑块不可点击，只能拖拽才能实现效果

...全文

379 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

#麻辣小龙虾# 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>