javascript实现的元素拖动函数宿主为浏览器_javascript技巧

//宿主为浏览器
//将相应的元素对象的引用传到函数中
function candrag(drager) {
  drager.onmousedown = function (down) {
    var offx = drager.offsetLeft
    var offy = drager.offsetTop;
    var offxl = down.clientX - offx;
    var offyl = down.clientY - offy;
    window.condition = 0;//为window添加了condition属性，用于解决和click之间的矛盾
    document.onmousemove = function (move) {
      drager.style.left = move.clientX - offxl + "px";
      drager.style.top = move.clientY - offyl + "px";
      drager.style.cursor = "move";
      condition = Math.abs(move.clientX - down.clientX) + Math.abs(move.clientY - down.clientY);
    }
  }
  drager.onmouseup = function () {
    document.onmousemove = null;
    draggerr.style.cursor = "auto";
  }
}
/*对于和click之间的矛盾解决，需要判断condition
*例如：
candrag(dragger);
d01.onclick = function () {
  if (!condition) {
    d01.style.backgroundColor = "red";
  }
}
*其中，d01为dragger的子元素
*/ 

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript
元素拖动
javascript宿主对象、javascript拖动div、javascript 拖动事件、javascript 拖动、javascript鼠标拖动，以便于您获取更多的相关知识。