拖拽demo

拖拽条交互示例

最新推荐文章于 2024-05-20 10:05:02 发布

原创最新推荐文章于 2024-05-20 10:05:02 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

jq 专栏收录该内容

4 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
*{
padding: 0;
margin: 0;
}
.groove{
width:67.8%;
height:16px;
background-color: #1a4a73;
border-radius: 10px;
position: relative;
margin:120px auto;
}
.slider{
width: 100px;
height: 16px;
border-radius: 10px;
background:#58a1e0;
cursor: pointer;
position: absolute;
left: 200px;
top: 120px;
margin:0 20px;
}
.box{
width:100%;
position: absolute;
top:-40px;
}
.box span{
display:inline-block;
padding:0 19px;
}
</style>
</head>
<body>

<div class="groove">
<div class="box">
<span>01月</span>
<span>02月</span>
<span>03月</span>
<span>04月</span>
<span>05月</span>
<span>06月</span>
<span>07月</span>
<span>08月</span>
<span>09月</span>
<span>10月</span>
<span>11月</span>
<span>12月</span>
</div>
</div>
<div class="slider"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

<script>
$(function(){
//移动窗口的步骤
//1、按下鼠标左键
//2、移动鼠标
$('.slider').mousedown(function(e){
// e.pageX
var positionDiv = $(this).offset();
var distenceX = e.pageX - positionDiv.left; //记录鼠标点击的位置与div左上角水平方向的距离
var distenceY = e.pageY - positionDiv.top; //记录鼠标点击的位置与div左上角垂直方向的距离

$(document).mousemove(function(e){
var x = e.pageX - distenceX;
var y = e.pageY - distenceY;
var doc = $(document).width()-200;
if(x<200){
x=200;
}
else if(x>doc-$('.slider').outerWidth(true)){
// x = $(document).width()-$('.slider').outerWidth(true);
x = doc-$('.slider').outerWidth(true);

}
if(y<0){
y=0;
}
else if(y>$(document).height()-$('.slider').outerHeight(true)){
y = $(document).height()-$('.slider').outerHeight(true);
}
$('.slider').css({
'left':x+'px',
'top':120+'px'
});
});
$(document).mouseup(function(){
$(document).off('mousemove'); //移除鼠标移动事件
});
});
});
</script>
</body>
</html>