jQuery实现鼠标拖动 html 标签改变位置、大小——多层级适用和抑制冒泡

虔潜

已于 2023-04-20 14:28:25 修改

阅读量830

点赞数

文章标签： jquery 前端 javascript

于 2022-05-18 00:48:04 首次发布

本文链接：https://blog.csdn.net/weixin_46652259/article/details/124833151

版权

* 无意侵犯原作者版权，仅学于大众，回馈于大众。

* 如果平台或者作者认为本人本帖存在侵权或者冒犯，请发邮删贴！！！

邮箱：321270064@qq.com

最近想自己写一个“傻瓜式”的前端页面生成器，其中有一个想法，就是让未来的用户可以自己更改页面内标签的大小尺寸和位置，通过鼠标就可以完成。因为我本身是写java后端的，对前端的了解是有限的。同时，感觉磨前端也比较费时间的事情。所以，就直接在网上找了一些前端大佬的文献来看了（参考）。

以下为参考大佬文献的链接：

jQuery实现鼠标拖动div改变位置、大小的实践 - H5W3

在上述大佬的方法是完全可以实现单一标签节点的大小更改和位置更改的。但是，有还是几个问题：

1、适用单一节点；

2、对多层级出现层级事件冒泡；

3、class或者标签获取的集合移动相互干扰；

因此，根据个人的需求。对上述大佬写的方法进行了一些微小的更改：

//js脚本
/*阻止js 事件冒泡*/
function stopPropagation(e){
  e = e || window.event;
  if(e && e.stopPropagation){
    e.stopPropagation();
  }else{
    e.cancelBubble = true;
  }
}

/*尺寸调整 上*/
function resize_up(obj,top,left,e){
  if(e.clientY - top < 10 && e.clientX - left > 10 && e.clientX-left < parseInt(obj.width()) - 10) {
    obj.css("cursor","n-resize");
    obj.mousedown(function(e) {
      stopPropagation(e);/*阻止冒泡*/
      var ismove = true;
      var y = e.pageY - obj.offset().top + obj.parent().offset().top;
      var h = e.pageY + parseInt(obj.css("height"));
      $(document).mousemove(function(e) {
        if(ismove) {
          obj.css({"height":h - e.pageY, "top":e.pageY - y});
        }
      }).mouseup(function() {
        ismove = false;
      });
    });
  }
}

/*尺寸调整 左*/
function resize_left(obj,top,left,e){
  if(e.clientX - left < 10 && e.clientY - top > 10 && e.clientY-top < parseInt(obj.height()) - 10) {
    obj.css("cursor","w-resize");
    obj.mousedown(function(e) {
      stopPropagation(e);
      var ismove = true;
      var x = e.pageX - obj.offset().left + obj.parent().offset().left;
      var w = e.pageX + parseInt(obj.css("width"));
      $(document).mousemove(function(e) {
        if(ismove) {
          obj.css({"width":w - e.pageX, "left":e.pageX - x});
        }
      }).mouseup(function() {
        ismove = false;
      });
    });
  }
}

/*尺寸调整 下*/
function resize_below(obj,top,left,e){
  if(e.clientY-top  > parseInt(obj.height()) - 10 && e.clientX - left > 10 && e.clientX-left < parseInt(obj.width()) - 10) {
    obj.css("cursor","s-resize");
    obj.mousedown(function(e) {
      stopPropagation(e);
      var ismove = true;
      var h = e.pageY - parseInt(obj.css("height"));
      $(document).mousemove(function(e) {
        if(ismove) {
          obj.css({"height":e.pageY - h});
        }
      }).mouseup(function() {
        ismove = false;
      });
    });
  }
}

/*尺寸调整 右*/
function resize_right(obj,top,left,e){
  if(e.clientX-left > parseInt(obj.width()) - 10 && e.clientY - top > 10 && e.clientY-top  < parseInt(obj.height()) - 10) {
    obj.css("cursor","e-resize");
    obj.mousedown(function(e) {
      stopPropagation(e);/*阻止冒泡*/
      var ismove = true;
      var w = e.pageX - parseInt(obj.css("width"));
      $(document).mousemove(function(e) {
        if(ismove) {
          obj.css({"width":e.pageX - w});
        }
      }).mouseup(function() {
        ismove = false;
      });
    });
  }
}

/*尺寸调整 左上角*/
function resize_topLeftCorner(obj,top,left,e){
  if(e.clientX - left < 10 && e.clientY - top < 10) {
    obj.css("cursor","nw-resize");
    obj.mousedown(function(e) {
      stopPropagation(e);/*阻止冒泡*/
      var ismove = true;
      var x = e.pageX - obj.offset().left + obj.parent().offset().left;
      var y = e.pageY - obj.offset().top + obj.parent().offset().top;
      var w = e.pageX + parseInt(obj.css("width"));
      var h = e.pageY + parseInt(obj.css("height"));
      $(document).mousemove(function(e) {
        if(ismove) {
          obj.css({"height":h - e.pageY, "width":w - e.pageX, "top":e.pageY - y, "left":e.pageX - x});
        }
      }).mouseup(function() {
        ismove = false;
      });
    });
  }
}

/*尺寸调整 左下角*/
function resize_leftBottom(obj,top,left,e){
  if(e.clientY-top  > parseInt(obj.height()) - 10 && e.clientX - left < 10) {
    obj.css("cursor","sw-resize");
    obj.mousedown(function(e) {
      stopPropagation(e);/*阻止冒泡*/
      var ismove = true;
      var x = e.pageX - obj.offset().left + obj.parent().offset().left;
      var w = e.pageX + parseInt(obj.css("width"));
      var h = e.pageY - parseInt(obj.css("height"));
      $(document).mousemove(function(e) {
        if(ismove) {
          obj.css({"width":w - e.pageX, "left":e.pageX - x,"height":e.pageY - h});
        }
      }).mouseup(function() {
        ismove = false;
      });
    });
  }
}

/*尺寸调整 右上角*/
function resize_topRightCorner(obj,top,left,e){
  if(e.clientY - top < 10 && e.clientX-left > parseInt(obj.width()) - 10) {
    obj.css("cursor","ne-resize");
    obj.mousedown(function(e) {
      stopPropagation(e);/*阻止冒泡*/
      var ismove = true;
      var y = e.pageY - obj.offset().top + obj.parent().offset().top;
      var h = e.pageY + parseInt(obj.css("height"));
      var w = e.pageX - parseInt(obj.css("width"));
      $(document).mousemove(function(e) {
        if(ismove) {
          obj.css({"height":h - e.pageY, "top":e.pageY - y,"width":e.pageX - w});
        }
      }).mouseup(function() {
        ismove = false;
      });
    });
  }
}

/*尺寸调整 右下角*/
function resize_lowerRightCorner(obj,top,left,e){
  if(e.clientX-left > parseInt(obj.width()) - 10 && e.clientY-top > parseInt(obj.height()) - 10) {
    obj.css("cursor","se-resize");
    obj.mousedown(function(e) {
      stopPropagation(e);/*阻止冒泡*/
      var ismove = true;
      var w = e.pageX - parseInt(obj.css("width"));
      var h = e.pageY - parseInt(obj.css("height"));
      $(document).mousemove(function(e) {
        if(ismove) {
          obj.css({"width":e.pageX - w,"height":e.pageY - h});
        }
      }).mouseup(function() {
        ismove = false;
      });
    });
  }
}

/*尺寸调整 中间调整位置*/
function resize_settingPosition(obj,top,left,e){
  if(e.clientX - left > 10 && e.clientX-left < parseInt(obj.width()) - 10
    && e.clientY - top  > 10 && e.clientY-top  < parseInt(obj.height()) - 10) {
    obj.css("cursor","move");
    obj.css("cursor","default");
    obj.mousedown(function(e) {
      stopPropagation(e);/*阻止冒泡*/
      var ismove = true;
        /*obj.parent().offset()是父级补偿*/
      var x = e.pageX - obj.offset().left + obj.parent().offset().left;
      var y = e.pageY - obj.offset().top + obj.parent().offset().top;
      $(document).mousemove(function(e) {
        stopPropagation(e);/*阻止冒泡*/
        /*console.log("");*/
        if(ismove) {
          obj.css({"left":e.pageX - x, "top":e.pageY - y});
        }
      }).mouseup(function() {
        ismove = false;
      });
    });
  }
}

/*调用方法*/
function resize(node){
  $(node).mousemove(function(e){
    /*这里保证接下来的操作是对操作节点本身的（相对传入节点有多个或者多层（集合））*/
    var obj = $(this);
    obj.unbind("mousedown");
    obj.css("cursor","default");
    var left = obj.offset().left;
    var top = obj.offset().top;
    /*尺寸调整 上*/
    resize_up(obj,top,left,e);
    /*尺寸调整 左*/
    resize_left(obj,top,left,e);
    /*尺寸调整 下*/
    resize_below(obj,top,left,e);
    /*尺寸调整 右*/
    resize_right(obj,top,left,e);
    /*尺寸调整 左上角*/
    resize_topLeftCorner(obj,top,left,e);
    /*尺寸调整 左下角*/
    resize_leftBottom(obj,top,left,e);
    /*尺寸调整 右上角*/
    resize_topRightCorner(obj,top,left,e);
    /*尺寸调整 右下角*/
    resize_lowerRightCorner(obj,top,left,e);
    /*尺寸调整 中间调整位置*/
    resize_settingPosition(obj,top,left,e);
  });
}

本文主要是对多层级和集合标签进行了一些处理，其他的逻辑与原文（jQuery实现鼠标拖动div改变位置、大小的实践 - H5W3）还是一样的。

方法调用:（引入jquery.js依赖）

在方法里直接传入标签 resize（“div”）;也可以传入类名节点 resize（“.class”），对于单一标签通过id也是也可以的resize（“#id”）;

* 无意侵犯原作者版权，仅学于大众，回馈于大众。

* 如果平台或者作者认为本人本帖存在侵权或者冒犯，请发邮删贴！！！

虔潜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现鼠标拖动 html 标签改变位置、大小——多层级适用和抑制冒泡

* 无意侵犯原作者版权，仅学于大众，回馈于大众。* 如果平台或者作者认为本人本帖存在侵权或者冒犯，请发邮删贴！！！最近想自己写一个“傻瓜式”的前端页面生成器，其中有一个想法，就是让未来的用户可以自己更改页面内标签的大小尺寸和位置，通过鼠标就可以完成。因为我本身是写java后端的，对前端的了解是有限的。同时，感觉磨前端也比较浪费时间。所以就直接在网上找了一些前端大佬的文献来看了（参考）。抱歉，前面的调整大小存在位置微跳的bug,已经修复！
复制链接

扫一扫