9***@qq.com
9***@qq.com
  • 发布:2017-03-18 14:49
  • 更新:2017-03-18 14:49
  • 阅读:2731

这个div如何禁止它再被拖动

分类:HTML5+
mui

最近写了一个电子书手机版的程序,设计思路是当点击放大按钮后电子书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;  

}

2017-03-18 14:49 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复