CSS implements drag and drop to change layout size

Guanhui
Release: 2020-06-22 13:20:45
forward
2674 people have browsed it

CSS implements drag and drop to change layout size

Use the browser's non-overflow:auto element setting to resize to achieve column width control without JavaScript.

Recommended video tutorial: "CSS Video Tutorial-Jade Girl Heart Sutra Edition"

The scroll bar under the webkit browser can be customized, and the resize area The size is the size of the scrollbar, so we can make the entire stretch area as high as the container.

Implementation principle

There is a resize attribute in CSS. If an element's overflow If the attribute value is not visible, you can stretch the size of this element by setting the resize attribute.

However, there is a problem with this kind of stretching, that is, the dragging area is too small, just the lower right corner:

CSS implements drag and drop to change layout size

So is there any way to make this drag area larger?

Later, after my research, I found that the drag bar of the resize attribute and the drag bar of the scroll bar are things in the same system. You only need to customize the scroll bar to indirectly set the size of the resize bar. .

For example:


.resize-bar::-webkit-scrollbar {
 width: 200px; height: 200px;
}
Copy after login

At this time, the stretching area is very large:

The next thing to do is to hide the drag area behind a certain column layout, and then reveal part of the width for dragging, as shown in the following figure:

Finally, using adaptive layout for our left and right columns can achieve the effect we want.

The code is as follows:


.column {
    overflow: hidden;
}
.column-left {
    height: 400px;
    background-color: #fff;
    position: relative;
    float: left;
}
.column-right {
    height: 400px;
    padding: 16px;
    background-color: #eee;
    box-sizing: border-box;
    overflow: hidden;
}
.resize-save {
    position: absolute;
    top: 0; right: 5px; bottom: 0; left: 0;
    padding: 16px;
    overflow-x: hidden;
}
.resize-bar {
    width: 200px; height: inherit;
    resize: horizontal;
    cursor: ew-resize; 
    opacity: 0;
    overflow: scroll;
}
/* 拖拽线 */
.resize-line {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    border-right: 2px solid #eee;
    border-left: 1px solid #bbb;
    pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
    border-left: 1px dashed skyblue;
}
.resize-bar::-webkit-scrollbar {
    width: 200px; height: inherit;
}

/* Firefox只有下面一小块区域可以拉伸 */
@supports (-moz-user-select: none) {
    .resize-bar:hover ~ .resize-line,
    .resize-bar:active ~ .resize-line {
        border-left: 1px solid #bbb;
    }
    .resize-bar:hover ~ .resize-line::after,
    .resize-bar:active ~ .resize-line::after {
        content: '';
        position: absolute;
        width: 16px; height: 16px;
        bottom: 0; right: -8px;
        background: url(./resize.svg);
        background-size: 100% 100%;
    }
}
Copy after login


<p class="column">
    <p class="column-left">
        <p class="resize-bar"></p>
        <p class="resize-line"></p>
        <p class="resize-save">
            左侧的内容,左侧的内容,左侧的内容,左侧的内容
        </p>                                            
    </p>
    <p class="column-right">
        右侧的内容,右侧的内容,右侧的内容,右侧的内容
    </p>
</p>
Copy after login

Use the browser's non-overflow:auto element settings resizeThe stretch feature enables JavaScript-free column width control.

The scroll bar under the webkit browser can be customized. The size of the resize area is the size of the scrollbar. Therefore, we can make the entire stretch area as high as the container.

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of CSS implements drag and drop to change layout size. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:jb51.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!