问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在不添加额外标记的情况下调整边框拖放的 div 大小

社区维基
1
新手上路，请多包涵

我有一个绝对定位的侧面板，我需要通过拖动此边框来更改其宽度。我还需要在边框悬停时更改光标。是否可以在不添加另一个 div 进行拖动的情况下执行此操作？

这是标记：

 #right_panel {
    position: absolute;
    border-left: solid 3px #ccc;
    width: 100px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
}

 <body>
    <div id="right_panel"></div>
</body>

我不需要完整的解决方案。 A 是（带文档参考）/否答案就足够了。我不需要助手 div 的回答。我已经有一个：

 var m_pos;
function resize(e){
    var parent = resize_el.parentNode;
    var dx = m_pos - e.x;
    m_pos = e.x;
    parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}

var resize_el = document.getElementById("resize");
resize_el.addEventListener("mousedown", function(e){
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
}, false);
document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);

 #right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
}

#resize {
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: w-resize;
}

 <body>
    <div id="right_panel">
        <div id="resize"></div>
    </div>
</body>

同样，这是我想要的功能，除了我想删除额外的 div 。

原文由 Anton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlcss
阅读 253
2 个回答
得票最新
社区维基
1
✓ 已被采纳

如果没有额外的 div，当然可以做到这一点。使用 css 和 ::after 创建边框并更改光标。使用 MouseEvent.offsetX 判断是否处理元素中的点击。

在您的示例中，您想要单击主 div，但仅单击前 4 个像素。您可以通过在点击处理程序中检查 e.offsetX < 4 来做到这一点：

 const BORDER_SIZE = 4;
const panel = document.getElementById("right_panel");

let m_pos;
function resize(e){
  const dx = m_pos - e.x;
  m_pos = e.x;
  panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
}

panel.addEventListener("mousedown", function(e){
  if (e.offsetX < BORDER_SIZE) {
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
  }
}, false);

document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);

 #right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0ff;
}

#right_panel::after {
    content: '';
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}

 <body>
    <div id="right_panel"></div>
</body>

原文由 lucascaro 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

我希望它可以帮助你

http://jsfiddle.net/T4St6/82/

 <div id="container">
    <div id="left_panel"> left content! </div>
    <div id="right_panel">
        <div id="drag"></div> right content!
    </div>
</div>

CSS

 body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;

}
 #left_panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 100px;
    background: grey;
}

#right_panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    color:#fff;
    background: black;
}
 #drag {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: w-resize;
}

查询器

var isResizing = false,
    lastDownX = 0;

$(function () {
    var container = $('#container'),
        left = $('#left_panel'),
        right = $('#right_panel'),
        handle = $('#drag');

    handle.on('mousedown', function (e) {
        isResizing = true;
        lastDownX = e.clientX;
    });

    $(document).on('mousemove', function (e) {
        // we don't want to do anything if we aren't resizing.
        if (!isResizing)
            return;

        var offsetRight = container.width() - (e.clientX - container.offset().left);

        left.css('right', offsetRight);
        right.css('width', offsetRight);
    }).on('mouseup', function (e) {
        // stop resizing
        isResizing = false;
    });
});

原文由 Manjunath Siddappa 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题