最近写了一个电子书手机版的程序,设计思路是当点击放大按钮后电子书flipbook可以被拖动然后浏览,点击缩小后电子书归位,然后禁止被拖动,可是禁止flipbook被拖动的代码不会写了,请知道的朋友告诉一声。
// JavaScript Document
// Zoom.js
$(".zoom-icon").bind("click", function () {
if ($(this).hasClass('zoom-icon-in')){
$("#flipbook").turn("zoom", 1.8);
alert("您使用了放大按钮触摸页脚翻页即将失效,但您可以使用翻页按钮");
mydrag("in");
//alert("in");
$(this).removeClass('zoom-icon-in');
$(this).addClass('zoom-icon-out');
exit;
}
if ($(this).hasClass('zoom-icon-out')){
$("#flipbook").turn("zoom", 1);
mydrag("out");
//alert("out");
$(this).removeClass('zoom-icon-out');
$(this).addClass('zoom-icon-in');
exit;
}
});
//pageCount = $(".flipbook").turn("pages");//总页数
//alert(pageCount);
//上一页
$(".previousPage").on("click", function () {
pageCount = $(".flipbook").turn("pages");//总页数
currentPage = $(".flipbook").turn("page");//当前页
if (currentPage >= 2) {
$(".flipbook").turn('page', currentPage - 1);
} else {
}
});
// 下一页
$(".nextPage").on("click", function () {
pageCount = $(".flipbook").turn("pages");//总页数
currentPage = $(".flipbook").turn("page");//当前页
if (currentPage <= pageCount) {
$(".flipbook").turn('page', currentPage + 1);
} else {
}
});
//返回到目录页
$(".home").bind("click", function () {
$(".flipbook").turn('page', 1); //跳转页数
});
function mydrag(dotype){
//拖拽页面
// 获取节点
var block = document.getElementById("flipbook");
var oW,oH;
if(dotype=="in"){
// 绑定touchstart事件
block.addEventListener("touchstart", function(e) {
console.log(e);
var touches = e.touches[0];
oW = touches.clientX - block.offsetLeft;
oH = touches.clientY - block.offsetTop;
//阻止页面的滑动默认事件
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();
}
}else if(dotype=="out"){
//将电子书归位
block.style.left = 0 + "px";
block.style.top = 0 + "px";
//禁止拖动
这里禁止被拖动的代码如何写?
//注销监听事件
block.removeEventListener("touchstart",defaultEvent, false);
block.removeEventListener("touchmove",defaultEvent, false);
block.removeEventListener("touchend",defaultEvent, false);
}
return;
}
0 个回复