<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">
<style type= "Text/css" >
Body{background-color: #000000;}
. window{position:absolute;z-index:1;overflow:hidden;width:100%;height:400px;background-color:red;left:0px;}
. Dragme{position:relative;background-image:url (' img/testbg.png '); width:100%;height:400px;}
</style>
<script src= "Http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script>
<script type= "Text/javascript" >
var Isdrag=false;
var tx,x;
$ (function () {
document.getElementById ("tap"). AddEventListener (' Touchend ', function () {
Isdrag = false;
});
document.getElementById ("tap"). AddEventListener (' Touchstart ', selectmouse);
document.getElementById ("tap"). AddEventListener (' Touchmove ', movemouse);
});
function Movemouse (e) {
if (Isdrag) {
var n = tx + e.touches[0].pagex-x;
$ ("#tap"). CSS ("left", N);
return false;
}
}
function Selectmouse (e) {
Isdrag = true;
tx = parseint (document.getElementById ("tap"). style.left+0);
x = E.touches[0].pagex;
return false;
}
var Isdrag=false;
var tx,x,ty,y;
$ (function () {
document.getElementById ("tap"). AddEventListener (' Touchend ', function () {
Isdrag = false;
// });
document.getElementById ("tap"). AddEventListener (' Touchstart ', selectmouse);
document.getElementById ("tap"). AddEventListener (' Touchmove ', movemouse);
// });
function Movemouse (e) {
if (Isdrag) {
var n = tx + e.touches[0].pagex-x;
m = ty + e.touches[0].pagey-y;
$ ("#tap"). CSS ({"Left": N, "top": M});
return false;
// }
// }
function Selectmouse (e) {
Isdrag = true;
tx = parseint (document.getElementById ("tap"). style.left+0);
ty = parseint (document.getElementById ("tap"). style.top+0);
x = E.touches[0].pagex;
y = e.touches[0].pagey;
return false;
// }
</script>
<body>
<div align= "left" class= "window" >
<div id= "tap" class= "Dragme" >
This is a demo<br> that can be dragged through the touchscreen
This demo cost me half a day because I've never done a touchscreen-oriented web before, supposedly mousedown,mouseup,mousemove and Touchstart,touchend,touchmove
is interoperable, meaning that the mouse time for PC development is effective for touch events, which is said to be of a different efficiency. But the test on the PC has no problem and is not valid on the phone.
And then......
Then Baidu for a long time ...
</div>
</div>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">
<style type= "Text/css" >body {height:2000px;} #block {width:200px;height:200px;background-color:red;position:absolute;left:0;top:0;} </style>
<script src= "Http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script>
<script type= "Text/javascript" >
Window.onload=function () {
Get node
var block = document.getElementById ("block");
var Ow,oh;
Binding Touchstart Events
Block.addeventlistener ("Touchstart", function (e) {
Console.log (e);
var touches = e.touches[0];
OW = Touches.clientx-block.offsetleft;
OH = Touches.clienty-block.offsettop;
Block sliding default events for pages
Document.addeventlistener ("Touchmove", Defaultevent,false);
},false)
Block.addeventlistener ("Touchmove", function (e) {
var touches = e.touches[0];
var oleft = Touches.clientx-ow;
var oTop = Touches.clienty-oh;
if (Oleft < 0) {
Oleft = 0;
}else if (Oleft > Document.documentelement.clientwidth-block.offsetwidth) {
Oleft = (document.documentelement.clientwidth-block.offsetwidth);
}
Block.style.left = oleft + "px";
Block.style.top = OTop + "px";
},false);
Block.addeventlistener ("Touchend", function () {
Document.removeeventlistener ("Touchmove", Defaultevent,false);
},false);
function DefaultEvent (e) {
E.preventdefault ();
}
}
</script>
<body>
<div>
Touchstart,touchmove,
Touchend,touchcancel
</div>
<div id= "Block" ></div>
Mobile slide Drag-and-drop