SOURCE

console 命令行工具 X clear

                    
>
console
// by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/
// zxx.drag v1.0 2010-03-23 元素的拖拽实现
var params = {
  left: 0,
  top: 0,
  currentX: 0,
  currentY: 0,
  flag: false
};
//获取相关CSS属性
var getCss = function(o, key) {
  return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
};

//拖拽的实现
var startDrag = function(bar, target, callback) {
  if (getCss(target, "left") !== "auto") {
    params.left = getCss(target, "left");
  }
  if (getCss(target, "top") !== "auto") {
    params.top = getCss(target, "top");
  }
  //o是移动对象
  bar.onmousedown = function(event) {
    params.flag = true;
    if (!event) {
      event = window.event;
      //防止IE文字选中
      bar.onselectstart = function() {
        return false;
      }
    }
    var e = event;
    params.currentX = e.clientX;
    params.currentY = e.clientY;
  };
  document.onmouseup = function() {
    params.flag = false;
    if (getCss(target, "left") !== "auto") {
      params.left = getCss(target, "left");
    }
    if (getCss(target, "top") !== "auto") {
      params.top = getCss(target, "top");
    }
  };
  document.onmousemove = function(event) {
    var e = event ? event: window.event;
    if (params.flag) {
      var nowX = e.clientX,
      nowY = e.clientY;
      var disX = nowX - params.currentX,
      disY = nowY - params.currentY;
      target.style.left = parseInt(params.left) + disX + "px";
      target.style.top = parseInt(params.top) + disY + "px";
    }

    if (typeof callback == "function") {
      callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
    }
  }
};
var eleDrag = document.getElementById("drag");
if (eleDrag) {
  startDrag(eleDrag, eleDrag, function(x, y) {
    eleDrag.style.backgroundPosition = ( - 1 * x) + "px " + ( - 1 * y) + "px";
  });
}
<div class="a">
  <div class="b" id="drag">
  </div>
</div>
* {
  padding: 0;
  margin: 0;
}

.a {
  width: 1920px;
  height: 1080px;
  background: url('http://pic1.win4000.com/wallpaper/2/587db3e9e6221.jpg') no-repeat;
  position: relative;
  overflow: hidden;
}

.b {
  width: 500px;
  height: 500px;
  position: absolute;
  background: inherit;
  filter: blur(20px);
  overflow: hidden;
  cursor: -webkit-grab;
}

.b:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: #fff 1px solid;
}