this.each(function () {
var self = $(this);
self.css("position","absolute")
var draging = false;
var clientX,clientY,moveClientX,moveClientY,eleTop,eleLeft;
self.bind("touchstart", function (e) {
draging = true;
var touch = e.touches[0];
clientX =touch.clientX;
clientY = touch.clientY;
eleTop = self.position().top;
eleLeft = self.position().left;
});
self.bind("touchmove", function (e) {
if(draging){
e.preventDefault();
var touch = e.touches[0];
moveClientX = touch.clientX;
moveClientY = touch.clientY;
self.css("left",eleLeft+moveClientX-clientX);
self.css("top",eleTop+moveClientY-clientY);
}
});
self.bind("touchend", function () {
draging = false;
})
})
}
$(".box").MyDrag();
<style type="text/css">
*{margin:0; padding: 0;}
img{ border:none;}
a{ text-decoration: none;color:#fff;}
li{list-style-type: none;}
i{ font-style: normal;}
html{height:100%;font-size:20px;overflow-x: hidden;}
input,button,select{ -webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
@media screen and (min-width:1000px){html{font-size:40px}}
@media screen and (max-width:999px){html{font-size:30px}}
@media screen and (max-width:600px){html{font-size:20px}}
body{height:100%;font-size:1rem;color:#fff;min-width: 320px;font-family: Helvetica Neue,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;}
.body-wrap{
min-width: 320px;
height: 100%;
background-color: white;
}
.box{
width: 30%;
height: 4rem;
background-color: #0000FF;
}
</style>
</head>
<body>
<div class="body-wrap">
<div class="box">hello</div>
</div>
<script type="text/javascript" src="zepto.js"></script>
效果：
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
