您的位置：首页 > 其它

div自由拖拽

2015-11-05 18:11 316 查看

div自由拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="base64.js"></script>
<style>
.s1{
position:fixed;
top:100px;
left:200px;
background:#00F;
width:200px;
height:50px;
border-radius:70%;
}
.s0{
width:1000px;
height:1000px;

}
.s2{
position:fixed;
top:100px;
left:300px;
background:#F00;
width:400px;
height:50px;
border-radius:70%;
}
.s3{
position:fixed;
top:100px;
left:400px;
background:#CF6;
width:100px;
height:200px;
border-radius:70%;
}
.s4{
position:fixed;
top:100px;
left:500px;
background:#F06;
width:200px;
height:150px;
border-radius:70%;
}
.s5{
position:fixed;
top:100px;
left:500px;
background:#000;
width:20px;
height:20px;
border-radius:70%;
}
.s6{
position:fixed;
top:100px;
left:500px;
background:#000;
width:20px;
height:20px;
border-radius:70%;
}
.s7{
position:fixed;
top:100px;
left:500px;
background:#C30;
width:20px;
height:150px;
border-radius:70%;
}
.s8{
position:fixed;
top:100px;
left:500px;
background:#C30;
width:20px;
height:150px;
border-radius:70%;
}
*,.body{
height:2000px;;
}
</style>
<script>
$(document).ready(function(){
var sslist=$("#s0 #ss");
alert(sslist.length);
sslist.mousedown(function(event) {

var isMove = true;
var abs_x = event.pageX - $(this).offset().left;
var abs_y = event.pageY - $(this).offset().top;
var index=sslist.index($(this));
$(document).mousemove(function(event) {
if (isMove) {
var obj = $("#s0 #ss").eq(index);
obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
}
});

$(document).mouseup(function(event) {
isMove = false;
});
});
});
var xx="aHR0cA==";
alert(Base64.decode(xx));
</script>
</head>

<body>
fasfdsafdsafdasfdsaf
<div id="s0">
<div id="ss" class="s1"></div>
<div id="ss" class="s2"></div>
<div id="ss" class="s3"></div>
<div id="ss" class="s4"></div>
<div id="ss" class="s5"></div>
<div id="ss" class="s6"></div>
<div id="ss" class="s7"></div>
<div id="ss" class="s8"></div>
<div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： div 拖拽

相关文章推荐

新的分享

章节导航