vue 自定义拖拉宽度变大变小

最新推荐文章于 2024-05-31 13:39:09 发布

H0101L

最新推荐文章于 2024-05-31 13:39:09 发布

阅读量735

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_38125257/article/details/104014966

版权

本文介绍了一种使用HTML、CSS和JavaScript实现拖动块来动态调整DIV元素宽度的方法。通过结合CSS定位和JavaScript事件监听，可以创建一个响应式的拖动条，使用户能够直观地改变元素的宽度。

摘要由CSDN通过智能技术生成

HTML

<div class="宽度要变化的div">
        <div class="拖拉的块" v-move></div>
</div>

CSS

.宽度要变化的div{
	position:relative;
	width:100px;
	height:300px;
	}
.拖拉的块{
	height: 100%;
        width: 10px;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        cursor: col-resize;
        }

JS

export default {
directives: {
move(el, bindings) {
      el.onmousedown = function(e) {
        var init = e.clientX;
        var parent = document.getElementById("宽度要变化的div");
        var initWidth = parent.offsetWidth;
        document.onmousemove = function(e) {
          var end = e.clientX;
          var newWidth = end - init + initWidth;
          parent.style.width = newWidth + "px";
        };
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null;
        };
      };
    }
}
}