基于iscroll4修改，兼容ie8，支持滚动条

Mon Jun 20 2016 18:50:52 GMT+0800 (CST)

Github地址：https://github.com/cometruer/iscroll4-iefix

我真的很懒，有需要的自取，以后有更新再提交。

新的博客终于迁移完毕

Sat Jun 04 2016 20:45:37 GMT+0800 (CST)

之前一直是用wordpress写博客，这个域名申请了快6年了，我已经懒癌晚期了，现在终于开始重新写博客了。机器放在阿里云上，备案也搞了，系统用的thinkjs开发的火麒麟博客系统。接下来要多分享些跟技术有关的文章。

PS:希望自己可以坚持。

实现Flash背景上的拖动以及解决被Flash覆盖的问题

Sat Jun 04 2016 20:41:19 GMT+0800 (CST)

相信对于很多前端的同学来说，拖动并不陌生，网上随随便便搜一下能搜出很多关于拖动的文章，github上也有很多关于拖动的库可以用。最近接到一个需求，需要修改线上一个拖动窗口的功能。类似下图：

看似简单的问题背后却隐藏着很多坑，让我不得不写这么一篇文章梳理一下。

我们之前的拖动代码也许就是某位同学从网上找的一篇拖动的文章写的，存在的问题如下：

1. 第一个问题：拖动不流畅，卡顿

2. 第二个问题：背景是个Flash游戏，窗口经常被Flash盖住

对于第一个问题，拖动不流畅，卡顿。理所当然我必须看下代码

// 鼠标按下div1时
obj.onmousedown = function(e) {
    var evnt = e || event; // 得到鼠标事件
    disX = evnt.clientX - obj.offsetLeft; // 鼠标横坐标 - div1的left
    disY = evnt.clientY - obj.offsetTop; // 鼠标纵坐标 - div1的top
    // 鼠标移动时
    document.onmousemove = function(e) {
        var evnt = e || event;
        var x = evnt.clientX - disX;
        var y = evnt.clientY - disY;
        var window_width = document.documentElement.clientWidth - obj.offsetWidth;
        var window_height = document.documentElement.clientHeight - obj.offsetHeight;

        x = (x < 0) ? 0 : x;
        x = (x > window_width) ? window_width: x;
        y = (y < 0) ? 0 : y;
        y = (y > window_height) ? window_height: y;

    };

    // 鼠标抬起时
    document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
    };

    return false;
};

我觉得这种写法不好，而且有bug，所以我改写了个方法。

var ox = 0; //原始坐标
var oy = 0; //原始坐标
var moveObj = $("move-div")

moveObj.on("mousedown", function(event) {
    ox = parseInt(event.pageX);
    oy = parseInt(event.pageY);

    that.target = that.videoBox;
});

$(document).on("mouseup", function(event) {
    that.target = null;
    ox = 0;
    oy = 0;
});

$(document).on("mousemove", function(event) {
    if (that.target) {
        //console.log(target)
        var nX = parseInt(event.pageX);
        var nY = parseInt(event.pageY);

        var newX = nX - ox;
        var newY = nY - oy;
        var realX = targteOffsetObj.left + newX;
        var realY = targteOffsetObj.top + newY;
        that.target.css({
            left: realX,
            top: realY
        });
    }
});

我只需要将绑定范围扩大到document下，这样就不会丢失焦点。然后每次点击的时候设定target，然后计算移动的相对位置，修改下css就搞定移动的问题。

理想很丰满，现实很骨感。

这样做依然存在问题，那就是移动快的时候，鼠标移动速度太快移到了背景的Flash上面，瞬间就会失去event对象，这种情况下还是会出现卡顿现象。

我第一个方法是绑定个mouseout，希望通过监听mouseout时实时fix一下坐标。但是这样并不理想，mouseout只能监听到刚移出几像素的时候，移动范围大了还是会丢失，还是会非常卡。所以，我后来想了个方案，在点击的时候给移动的对象加一个class,class里面是给宽高各加了200px。这样，即使移动很快，只要不超过这200px的范围，那么就一直可以监听到事件。后来试了下效果确实还不错。第一个问题算是解决了，那么就开始搞第二个问题。

第一个问题算是解决了，那么就开始搞第二个问题。

对于Flash背景来说，即使扩大了宽高，只要进入Flash的范围，就会被其抢走焦点。所以我第一个方案是将绑定改成draggable的方式，因为drag毕竟是HTML5的新属性，没准能抢过Flash。带着这种希望，我实现了第二种拖动方法。

moveObj.attr("draggable", "true");
moveObj.on("dragstart", function(event) {
    ox = parseInt(event.originalEvent.x);
    oy = parseInt(event.originalEvent.y);

    that.target = that.videoBox;
    moveObj.addClass("choose");
    //让火狐浏览器支持drag事件
    event.originalEvent.dataTransfer.setData("text", event.target.innerHTML);
});

moveObj.on("drag", function(event) {
    if (that.target) {
        //松开那一下修改
        if (event.originalEvent.x == 0 && event.originalEvent.y == 0) {
            return false;
        }
        var nX = parseInt(event.originalEvent.x);
        var nY = parseInt(event.originalEvent.y);

        var newX = nX - ox;
        var newY = nY - oy;
        var realX = targteOffsetObj.left + newX;
        var realY = targteOffsetObj.top + newY;
        that.move(realX, realY);
    }
});

moveObj.on("dragend", function(event) {
    that.target = null;
    ox = 0;
    oy = 0;
    moveObj.removeClass("choose");
    callback();
    //防止个别恶心浏览器下进行搜索
    event.preventDefault();
});

写完试了一下，效果不错，而且毕竟是HTML5原生支持的，效率会比自己写的js效率高。但是这里还是遇到了两个坑，第一个是火狐下draggable不执行，解决方法是在dragstart的时候hack一下。

event.originalEvent.dataTransfer.setData("text", event.target.innerHTML);

但是第二个坑是即使hack成功，他的对象里没有可用来计算相对位移的属性，所以最终火狐下还是要屏蔽这种方法。

当然还有一个最关键的问题，draggable的元素并不能抢过Flash，焦点还是让Flash无情的抢走了。

所以，我们又回归到了问题的核心：

到底什么东西能够抢过Flash,焦点不会被Flash抢走呢？

后来我灵光一现，既然Flash这么牛逼，为什么我不用Flash来做我的容器，这样就不会被Flash抢走焦点了。于是，就有了第三个拖动的方法。

//通过swfobject创建flash，替换掉原来的move-object
window.onload = function() {
    that.createFlash();
};
//生成了flash需要需要时间，所以不能直接绑定在move-object上面
$(document).on("mousedown", "#move-object", function(event) {
    ox = parseInt(event.pageX);
    oy = parseInt(event.pageY);

    that.target = $("#video_content");
    moveObj.addClass("choose");
    event.preventDefault();
    event.stopPropagation();
});

$(document).on("mouseup", "#move-object", function(event) {
    that.target = null;
    ox = 0;
    oy = 0;
    moveObj.removeClass("choose");
    event.preventDefault();
    event.stopPropagation();
});

$(document).on("mousemove", function(event) {
    if (that.target) {
        var nX = parseInt(event.pageX);
        var nY = parseInt(event.pageY);

        var newX = nX - ox;
        var newY = nY - oy;
        var realX = targteOffsetObj.left + newX;
        var realY = targteOffsetObj.top + newY;

        that.move(realX, realY);
        event.preventDefault();
        event.stopPropagation();
    }
});

这个Flash是请我同事帮我写的空的Flash，什么操作都没有，它只是做一件事，不让背景Flash抢去焦点。事实证明，确实做到了。即使鼠标范围移出到Flash背景上，只要鼠标不松开，事件就不会消失。而且不管我鼠标移动多快，焦点都在这个Flash元素上。

所以，困扰已久的Flash背景下拖动的问题算是解决了。

最终我的程序会自动选择适合拖动方式，支持Flash的优先使用Flash，如果不支持Flash优先使用drag，如果不支持drag就用最初的js拖动。

但是，特殊浏览器下比如IE，窗口游戏中被Flash覆盖的问题却始终还未解决。我试了很多方案，最终针对游戏中被Flash覆盖，我用了重新设置宽高的方式强制调用浏览器重绘机制，可以解决被覆盖的问题，窗口不会再被盖掉。

this.videoBox.css("width",  this.videoBox.width());//调用重绘机制

(这里需要注意的是，网上很多说修改zoom属性，我这里并没有效果，所以用的只是宽。)

实际测试中，又发现了一个新的问题，就是窗口虽然因为重绘显示了，但是只显示了一部分，还有一部分不显示。

最终，我们用Iframe作为垫片，做一个等大的Iframe在我的窗口下，然后移动窗口的时候同步移动这个垫片。但是美中不足的是这个Iframe不能透明，是一个黑色的背景色，设置透明也会透出Flash本身的黑底。

这点美中不足暂时还没办法解决。但是这个拖动问题已经算解决了。

最后，说一下忙了这一通总结出的两点结论：

1.只有Flash可以抢过Flash的焦点

2.只有Iframe可以盖住Flash

我知道这个问题、这个场景可能很奇葩，很多同学并不会遇到。而我因为要解决这个问题，去查了很多资料，从一个拖动，引发出很多不同的技术，不一样的思维，学到了很多其他的知识。

所以，我这里想说的是，作为前端，一定要有发散的思维，要从不同的维度考虑问题。拖动的问题可以从Flash上解决，那么其他的问题呢？

希望我写的这篇文章大家看了有那么一点点收获，获得一些不一样的灵感。

How I make my first game by libgdx (1)

Wed Sep 21 2011 05:29:03 GMT+0800 (CST)

Hello guys,I am back. The little website is so deserted before because of my laziness. So now,I want it to be changed. I will use English by now so maybe I can improve my English. And I want all of people over the world can enjoy my little website. Closer to home. About 5 months ago,as I had just resigned,I decide to be an android developer. I want to do something different with my work before. So between software and game,I choose the game. After trying a lot framework,I choose libgdx and begin the great journey. I do not want to say how wonderful the libgdx is(please google and you will know why).I just tell you how I use it. So, let's begin. Ther are some articles in the web,but I will just write my own. Key 1: Preparing. As we know, if you want to make a game,you must have the resources(images,audio and so on). Because I am not good at painting,so after waste a lot of time in painting,I decide use other's image to be my game's actor. So I found a PC game called "Little Fighter" and it is perfect. I borrow some images from it in order to save my time in painting. Then I make a menu screen like that image below. By the way,it is easier to draw a screen by libgdx than by android's xml. You know,it is difficult to draw a screen as you want by edit an xml. Key 2: The map. I want to make a game,so I need a map. The best way is tilemap which is easier to build. Libgdx offer you a tool so called "tiled-preprocessor". All of your tile map must recod so the libgdx can use it. You must import it in eclipse and rebuild the "Java Build Path" of this project. You need to change the inputDir and the outputDir to your own path as I do below. For example:

 inputDir = new File("D:/maps");
 outputDir = new File("D:/maps/output");

And comment all "System.exit(0);" in order to run it. Then run it and you will get three files and they are want you need. In my application, I found the tile map is loads so slowly and it has something different with the original. So I change two places. The one is add this line settings.stripWhitespace=false; into the main method of the "TiledMapPacker.java" to make it look like the original . And change the last two num to "100" like tileMapRenderer = new TileMapRenderer(map, atlas, 100, 100); so it could loads quickly.

TO BE CONTINUE......

Google中国总部本人8月亲探

Fri Oct 22 2010 11:40:05 GMT+0800 (CST)

来访者登记

二楼小会议室

这是访客必须要贴的标签，必然不让进

会议室墙上google的Logo

二楼会议室外的休息区

零食架，随便拿

咖啡机，冰箱

蛮帅的老师

ZoRo的博客

基于iscroll4修改，兼容ie8，支持滚动条

新的博客终于迁移完毕

实现Flash背景上的拖动以及解决被Flash覆盖的问题

How I make my first game by libgdx (1)

Google中国总部本人8月亲探