Vue makes div height draggable
|
This article shares the specific code of Vue to realize the draggable height of div for your reference. The specific content is as follows Here is a ready-made demo that can realize the dragging function of the page div, but the effect is not quite the same as what I want, so I modified it again according to my actual needs. Let’s take a look at the current demo effect first.
<template>
<div id="eagleMapContainer" style="border: 1px solid red;overflow-y: auto;" title="">
<div id="tz" @mousedown="dragEagle" style="border: 1px solid blue;">
<div title="Drag to resize" id="move_tz" style="border: 1px solid green;"></div>
</div>
</div>
</template>
<script>
export default {
name: "eagleMap",
data() {
return {}
},
methods: {
dragEagle: function (e) {
var targetDiv = document.getElementById('eagleMapContainer');
//Get the width and height of the map container when clicked:
var targetDivHeight = targetDiv.offsetHeight;
var startX = e.clientX;
var startY = e.clientY;
var _this = this;
document.onmousemove = function (e) {
e.preventDefault();
//Get the width and height of the mouse drag: take the absolute value var distX = Math.abs(e.clientX - startX);
var distY = Math.abs(e.clientY - startY);
//Drag upwards:
if (e.clientY < startY) {
targetDiv.style.height = targetDivHeight + distY + 'px';
}
//Drag downwards:
if (e.clientX < startX && e.clientY > startY) {
targetDiv.style.height = (targetDivHeight - distY) + 'px';
}
if (parseInt(targetDiv.style.height) >= 300) {
targetDiv.style.height = 300 + 'px';
}
if (parseInt(targetDiv.style.height) <= 150) {
targetDiv.style.height = 150 + 'px';
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
},
};
</script>
<style scoped>
#eagleMapContainer {
position: absolute;
left: 13%;
bottom: 10px;
z-index: 200;
overflow: hidden;
visibility: visible;
width: 200px;
height: 200px;
}
#tz {
position: absolute;
right: 1px;
top: 1px;
width: 27px;
height: 20px;
cursor:ne-resize;
z-index: 200001;
background-image: url("");
}
#tz:hover {
background-color: #666;
}
#move_tz {
position: absolute;
right: 0px;
top: 0px;
width: 27px;
height: 20px;
cursor:ne-resize;
z-index: 100;
background-image: url("");
background-position: 0px 0px;
}
</style>
But the effect was not quite what I wanted, so I had to modify it a little bit. The effect I want is: I have a div that contains a lot of small square lists. Because the scrolling is set beyond the limit, I add a drag to the div with the scroll bar to achieve height change.
The next step is to transform the demo above. To make it simple, just go to the code: Add a div below the div that needs to be dragged above, and click on this div to start the dragging function.
<!-- Drag and drop small box -->
<div id="tz" @mousedown="dragEagle">
<div title="Drag to resize" id="move_tz"></div>
</div>You need to set an id for the div that changes its height based on dragging, assuming it is "fuDiv", and then write a method.
// dragEagle(e) {
var targetDiv = document.getElementById('fuDiv');
//Get the width and height of the map container when clicked:
var targetDivHeight = targetDiv.offsetHeight;
var startX = e.clientX;
var startY = e.clientY;
var _this = this;
document.onmousemove = function (e) {
e.preventDefault();
//Get the width and height of the mouse drag: take the absolute value var distY = Math.abs(e.clientY - startY);
//Drag upwards:
if (e.clientY < startY) {
targetDiv.style.height = targetDivHeight - distY + 'px';
}
//Drag downwards:
if (e.clientX < startX && e.clientY > startY) {
targetDiv.style.height = (targetDivHeight + distY) + 'px';
}
if (parseInt(targetDiv.style.height) >= 320) {
targetDiv.style.height = 320 + 'px';
}
if (parseInt(targetDiv.style.height) <= 160) {
targetDiv.style.height = 160 + 'px';
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
},Then set the CSS style for them. In fact, this part is casual and can be done according to your own preferences.
#tz {
width: 100%;
height: 5px;
cursor: s-resize;
z-index: 200001;
}
#move_tz {
width: 100%;
height: 5px;
cursor: s-resize;
z-index: 100;
background-image: url("");
background-position: 0px 0px;
}Final result:
The effect is not particularly good, and there are still many areas that deserve optimization, which I will not write for now. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: About the VMware vcenter unauthorized arbitrary file upload vulnerability (CVE-2021-21972)
>>: Web page HTML code explanation: ordered list and unordered list
Recommend
Introduction to Linux system swap space
Swap space is a common aspect of computing today,...
Detailed explanation of Linux text processing tools
1. Count the number of users whose default shell ...
Circular progress bar implemented with CSS
Achieve results Implementation Code html <div ...
Sharing experience on MySQL slave maintenance
Preface: MySQL master-slave architecture should b...
Sharing tips on using Frameset to center the widescreen
Copy code The code is as follows: <frameset co...
React implements paging effect
This article shares the specific code for React t...
Mysql solution to improve the efficiency of copying large data tables
Preface This article mainly introduces the releva...
Solution to Docker disk space cleaning
Some time ago, I encountered the problem that the...
Sample code on how to implement page caching in vue mobile project
background On mobile devices, caching between pag...
Analysis of MySql index usage strategy
MySql Index Index advantages 1. You can ensure th...
The most commonly used HTML tags to create web pages
1. Optimization of commonly used HTML tags HTML s...
Solution to the problem of the entire page not being centered when using margin:0 auto in HTML
I wrote a jsp page today. I tried to adjust <di...
How to use the flash plug-in to call the PC's camera and embed it into the TML page
Preface The reason for writing this article is mai...
Several ways to implement CSS height changing with width ratio
[Solution 1: padding implementation] principle: I...
Detailed explanation of React setState data update mechanism
Table of contents Why use setState Usage of setSt...