拖拽和拉伸div元素功能分析与实现

最新推荐文章于 2023-06-01 14:35:52 发布
最新推荐文章于 2023-06-01 14:35:52 发布
阅读量2.3k 收藏 7
点赞数 5
分类专栏： 小知识点汇总 文章标签： js 拖拽 拉伸
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37631322/article/details/89973554
版权

综述：综合考察对于元素的拖动相关API的使用和逻辑思维能力，非常有用的一个实现思路，后期可以将其封装成一个可以复用的组件积累下来

1.实现拖拽和四个方向拉伸元素的实现方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现拖拽和拉伸</title>
</head>
<body>
<div id="test" style="position:absolute;left:0;top:0;width:600px;height:600px; border:1px solid #adadad;">
    我是测试的可拉伸，拖动的元素
</div>
<script>
    var clickBox = document.getElementById('test');
    /**
     *time/author：2019/5/9 "mouyao"
     *desc:当在当前元素上按下鼠标时，就触发拖动和拉伸操作
     */
    clickBox.onmousedown = function(e){
        e=e||event;  //兼容ie和其他浏览器的写法
        var mouseDownX = e.clientX;
        var mouseDownY = e.clientY;
        var clickBoxLeft = clickBox.offsetLeft;
        var clickBoxTop = clickBox.offsetTop;
        var clickBoxWeight = clickBox.offsetWidth;
        var clickBoxHeight = clickBox.offsetHeight;

        var direction = 0;
        if (mouseDownX<clickBoxLeft+30) {
            direction='left';
        } else if (mouseDownX >clickBoxLeft+clickBoxWeight - 30){
            direction='right';
        }

        if (mouseDownY<clickBoxTop+30){
            direction = 'top';
        } else if (direction < clickBoxTop + clickBoxHeight - 30) {
            direction = 'bottom';
        }
        if ((clickBoxLeft + clickBoxWeight-30)< mouseDownX&&mouseDownX< (clickBoxLeft + clickBoxWeight) && (clickBoxTop+clickBoxHeight-30)<mouseDownY&& mouseDownY<(clickBoxTop+clickBoxHeight)) {
            direction = 'rightBottomCorner';
        }else if((clickBoxLeft +30)< mouseDownX&&mouseDownX< (clickBoxLeft + clickBoxWeight-30) && (clickBoxTop+30)<mouseDownY&& mouseDownY<(clickBoxTop+clickBoxHeight-30)){     //如果是在中间位置，则实现拖动功能
            direction="drag";
        }

        /**
         *time/author：2019/5/9 "mouyao"
         *desc:当鼠标开始华东的时候，根据鼠标的移动方向去调整他的X，Y坐标和长宽
         */
        document.onmousemove = function(e) {
            e = e || event; //是要是使用原生js给我们提供的e回调参数，这存储了很多有用的信息
            var xx = e.clientX;
            var yy = e.clientY;
            if (direction==='left') {
                clickBox.style.width = clickBoxWeight + mouseDownX - xx + 'px'
                clickBox.style.left = xx + 'px';
            } else if (direction==='right') {
                clickBox.style.width = clickBoxWeight + xx - mouseDownX + 'px'
            }

            if (direction==='top'){
                clickBox.style.height = clickBoxHeight + mouseDownY - yy + 'px';
                clickBox.style.top = yy + 'px';
            } else if (direction==='bottom'){
                clickBox.style.height = clickBoxHeight + yy - mouseDownY + 'px';
            }
            if (direction==='rightBottomCorner'){
                clickBox.style.width = clickBoxWeight +xx-mouseDownX+'px'
                clickBox.style.left =clickBoxLeft+'px';
                clickBox.style.height = clickBoxHeight +yy-mouseDownY+'px';
                clickBox.style.top =clickBoxTop+'px';
            }else if(direction==="drag"){
                clickBox.style.left =xx-mouseDownX+clickBoxLeft+ 'px';
                clickBox.style.top =yy-mouseDownY+clickBoxTop+ 'px';
            }
            //return false; //这里为了避免抖动
        };
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        if (e.preventDefault){
            e.preventDefault();
        }
    };
    /**
     *time/author：2019/5/9 "mouyao"
     *desc:在拉伸的过程中，实现居中状态长存,有时间将其做成一个插件公布出来，供大家使用
     */


</script>
</body>
</html>

 

Programmer boy
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标拖动改变DIV等网页元素的大小的实现方法
08-30
下面小编就为大家带来一篇鼠标拖动改变DIV等网页元素的大小的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML 可拖动div标签
u012939262的博客
08-11 5730
可拖动div
JavaScript实现鼠标拖拽调整div大小
beichen3997的博客
11-02 4198
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, html { width: 100%; height: 100%; margin: 0; } #container { width: 200px; height: 200px; .
拖动改变上下两个div大小
亲亲而仁民，仁民而爱物
12-19 4033
drag div body{font:14px/1.5 Arial;color:#666;} #box{position:relative;width:600px;height:400px;border:2px solid #000;margin:10px auto;overflow:hidden;} #box ul{list-style-position:ins
div上下展开收缩 html,Javascript 实现div层缓慢收缩与展开
weixin_39601641的博客
05-30 558
本文通过Javascript实现伸缩和展开特效功能，给人感觉动画的效果，div标签与Js完美结合，特效相当的给力，并且不受任何内容的限制，收缩和展示的速度是可以通过修改时间来控制循环时间以及可以控制高度大小。具体实现，Javascript代码如下：//高度varmh=30;//每次变化的量varstep=1;//循环时间varms=15;functiontoggle(o){if...
html让屏幕可以上下拉动,想用JQ实现一个按住一个图标,div可以上下拖动的效果,请给个详细的JQ和HTML代码,谢谢了...
weixin_35126480的博客
06-03 151
网上有插件，我这也有案例代码，要是贴上来就太多了，我以前写了个放windows窗口的效果，你可以参考一下，代码如下，全部复制出去，修改下jquery库的路劲就可以测试：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdh...
JS对DIV进行左右上下拖拽拉伸
最新发布
maise6666的博客
06-01 925
Js完成div上下左右拖拽拉伸效果
div 八个方向拉伸缩放
jeb222222的博客
06-13 3581
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;title&gt;&lt;/title&gt; &lt;style&gt;  #cut{     opacity:0.6; height:150px; width:150px; position:absolute; top:150px; left:150px; cu...
基于数据驱动的，自定义div任意布局框架，可鼠标拖动调节的div大小
JAMES费的空间
08-04 803
最近在想用web页面作为机器人前端的控制界面，以前对前端有点粗浅的技术储备。查了一些资料，发现前端可以设计出非常漂亮的界面，并且可以不限于计算机本地运行，那么如果将机械臂的控制UI用web界面实现是非常有好处的，一个好处是可以实现异地的操控，这不就是传说中的远程控制吗，想象一下这样一副场景：一个打工仔不用去工厂，在家打开浏览器登录工厂机械臂的工号，就可以操作机械臂干活了，当然这个活是较为精细的，机器智能还不能代替人干的那种。...
实现弹窗拖拽，四边拉伸及对角线拉伸
weixin_43422861的博客
09-16 337
参考文章Vue自定义指令实现弹窗拖拽，四边拉伸及对角线拉伸
拖动div 拉伸div
03-26
纯js版本的拖动div 拉伸div 复用拖拽函数 复用改变大小函数
vue实现div可拖动位置也可改变盒子大小的原理
10-14
主要介绍了vue实现div可拖动位置也可改变盒子大小，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue中实现拖动调整左右两侧div的宽度的示例代码
10-15
主要介绍了vue中实现拖动调整左右两侧div的宽度的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
html 可以拖动的div,多个div实现随意拖拽功能
weixin_42342626的博客
06-10 2440
鼠标事件mousedownmousemovemouseup注意事项:被拖动的div的position属性值一定是absolute。切记不可使用margin-top:10px;而应该使用top:10px;onmousedown事件需要在window.onload时加载。如果被拖动的div上有文字会有自带的文字拖动效果，需要将改div上的所有拖动事件绑定在该div上，可以使用setCapture。代码...
DIV层的拖动和兼容
依然饭特稀。。。
09-24 403
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">var x,yvar drag_=falsevar D=new Function(obj,return document.getElementById(obj);)var IE=new Function(,i
自定义图表--随意拖拽拉伸功能的实现
小陈的博客
12-17 1384
每个组件图表拖拽到工作台中都是需要复制的图表组件宽与高都是可以拉伸的组件的拖拽体验需要丝滑最后工作台的组件都是需要持久化存储的本文只是简单的写了个demo实现了随意拖拽拉伸元素功能的实现，仅仅只是自定义图表众多复杂功能中的一环，以后还会更新其余功能的实现demo与思路，希望大家多多支持~！；最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
vue div宽高自由拉伸。
qq_38295468的博客
12-07 762
vue可拉动盒子高度宽度设置
简单实现可拖拽的div
sunxiaobai1的博客
11-22 2527
【代码】简单实现可拖拽的div。
sh文件、shell、shell脚本、bat文件、bat脚本
我的博客
03-25 7190
综述：对于各个系统不太理解，这几个文件在日常的工作，记录下加深认识 1.shell(壳) shell是一个shell脚本解释器，是一个运行在Linux系统下的批处理脚本解释器，通过这个窗口建立用户和Linux系统底层提供的一系列方法的交互； .sh就是一种运行在Linux系统下的文件，文件中存储的shell脚本； 2.batch（批处理） 个人理解，batch和shell类似，只不过...
js实现同时兼容pc和移动端的元素拖拽功能
05-24
要实现同时兼容 PC 端和移动端的元素拖拽功能，可以使用 HTML5 新增的 drag 事件和 touch 事件。 首先，需要将元素设置为可拖拽，可以使用 draggable 属性。例如： ```html <div draggable="true">可拖拽的元素</div> ``` 然后，需要监听元素的 dragstart、drag、dragend 事件或 touchstart、touchmove、touchend 事件来实现拖拽效果。 在 PC 端，可以使用 drag 事件来实现拖拽效果，例如： ```javascript var dragElement = document.getElementById('drag-element'); dragElement.addEventListener('dragstart', function(event) { // 拖拽开始时，保存拖拽元素的 ID event.dataTransfer.setData('text/plain', event.target.id); }); document.body.addEventListener('dragover', function(event) { // 阻止默认拖拽行为 event.preventDefault(); }); document.body.addEventListener('drop', function(event) { // 阻止默认拖拽行为 event.preventDefault(); // 获取拖拽元素的 ID var id = event.dataTransfer.getData('text/plain'); var dragElement = document.getElementById(id); // 将拖拽元素添加到放置区域 event.target.appendChild(dragElement); }); ``` 在移动端，可以使用 touch 事件来实现拖拽效果，例如： ```javascript var dragElement = document.getElementById('drag-element'); var startX, startY; dragElement.addEventListener('touchstart', function(event) { startX = event.touches[0].clientX; startY = event.touches[0].clientY; }); dragElement.addEventListener('touchmove', function(event) { var offsetX = event.touches[0].clientX - startX; var offsetY = event.touches[0].clientY - startY; // 移动元素 this.style.transform = 'translate(' + offsetX + 'px, ' + offsetY + 'px)'; }); dragElement.addEventListener('touchend', function(event) { // 拖拽结束时，清除 transform 样式 this.style.transform = ''; }); ``` 需要注意的是，移动端的 touch 事件可能会和浏览器默认行为冲突，需要使用 preventDefault() 方法来阻止默认行为。另外，由于移动端的屏幕尺寸多样化，需要根据具体情况来调整拖拽的逻辑和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值