Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

使用margin负值做拖动修正

  说到元素的拖动,网络上大堆的代码。但是清一色的使用点击时候记录鼠标在元素上的相对坐标的方式来实现,但这并不是个好方法。这么做需要浪费个存储坐标的变量,而且在mousemvoe事件中给还要去计算不觉得很浪费吗?为什么不直接用margin负值修正呢?
<!DOCTYPE html>
<style>
div {
  position:absolute;
  width:100px;height:100px;
  background:tomato;
  cursor:move;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:noen;
}
</style>
<script>
onload=function(){
  //由于麻烦,懒得做低版本IE的兼容了
  var div=document.querySelector("div");
  //添加鼠标事件
  div.addEventListener("mousedown",function(e){
    //不用记录点击位置,直接在margin上做偏移
    div.style.marginLeft=div.offsetLeft-e.clientX+"px";
    div.style.marginTop=div.offsetTop-e.clientY+"px";
    //定义事件
    var move=function(e){
      //移动时直接赋上鼠标坐标,不需要多余的计算
      div.style.left=e.clientX+"px";
      div.style.top=e.clientY+"px";
    },up=function(e){
      //注销事件
      document.removeEventListener("mousemove",move);
      document.removeEventListener("mouseup",up);
    };
    //绑定事件
    document.addEventListener("mousemove",move);
    document.addEventListener("mouseup",up);
    //默认触发一次move
    move(e);
  });
};
</script>
<div></div>

  下面是使用jQuery的写法,同样的原理并兼容到低版本浏览器 //需要jQuery1.7+
$(function(){
  var div=$("div");
  div.on("mousedown",function(e){
    var offset=div.offset();
    div.css({
      marginLeft:offset.left-e.clientX,
      marginTop:offset.top-e.clientY,
      left:e.clientX,top:e.clientY
    });
    $(document).on("mousemove.dragging",function(e){
      div.css({left:e.clientX,top:e.clientY});
    }).one("mouseup",function(e){
      $(document).off("mousemove.dragging");
    });
  });
});
  我们应该在mousemove这样会持续触发的事件中执行尽量少的代码,能在其它事件中执行的就不要丢进mousemove。这篇文章使用margin负值只是一个抛砖引玉,现在的CSS3中还可以使用transform来完成可以节省更多资源。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^