grab和grabbing手形效果实例页面

展示

代码

• HTML：

  <h4>拖动图片</h4>
  <div class="container">
      <img src="1.jpg" draggable="false">
  </div>

• CSS：

  .container {
      width: 300px; height: 225px;
      border: solid deepskyblue;
      overflow: hidden;
  }
  .container > img {
      /* 准备抓取 */
      cursor: -webkit-grab;
      cursor: -moz-grab;
      cursor: grab; 
  }
  .container > img:active {
      /* 已经抓住 */
      cursor: -webkit-grabbing;
      cursor: -moz-grabbing;
      cursor: grabbing;
  }

• JavaScript：

  var box = document.querySelector(".container");
  var grab = document.querySelector(".container img");
  
  var store = { move: false };
  
  grab.addEventListener("mousedown", function (event) {
      store.move = true;
      store.startY = event.pageY + box.scrollTop;
      store.startX = event.pageX + box.scrollLeft;
  });
  
  document.addEventListener("mousemove", function(event) {
      store.y = event.pageY;
      store.x = event.pageX;
      if (store.move == true) {
          box.scrollTop =  store.startY - store.y;
          box.scrollLeft =  store.startX - store.x;
          event.preventDefault();
      }        
  });    
  document.addEventListener("mouseup", function(event) {
      store.move = false;
  });