文章/答案/技术大牛

发布

js拖拽改变大小

在JavaScript中实现拖拽改变大小的功能，通常涉及到HTML、CSS和JavaScript的结合使用。以下是基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案：

基础概念

HTML结构：创建一个可拖拽的元素和一个用于调整大小的把手（handle）。
CSS样式：设置元素的样式，使其可以拖拽和调整大小。
JavaScript事件处理：监听鼠标事件（如mousedown、mousemove、mouseup）来实现拖拽和调整大小的功能。

优势

用户体验好：用户可以直观地调整元素的大小。
灵活性高：适用于各种需要动态调整大小的场景。

类型

水平调整大小：只允许用户在水平方向上调整大小。
垂直调整大小：只允许用户在垂直方向上调整大小。
自由调整大小：允许用户在任意方向上调整大小。

应用场景

可编辑的布局：如网页编辑器中的布局调整。
响应式设计：根据用户需求动态调整元素大小。
数据可视化：如图表的大小调整。

实现示例

以下是一个简单的示例代码，展示如何实现一个可拖拽调整大小的元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag to Resize</title>
    <style>
        .resizable {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            position: relative;
        }
        .resizer {
            width: 10px;
            height: 10px;
            background-color: darkblue;
            position: absolute;
            bottom: 0;
            right: 0;
            cursor: se-resize;
        }
    </style>
</head>
<body>
    <div class="resizable">
        <div class="resizer"></div>
    </div>

    <script>
        const resizable = document.querySelector('.resizable');
        const resizer = document.querySelector('.resizer');
        let isResizing = false;
        let initialWidth, initialHeight, initialX, initialY;

        resizer.addEventListener('mousedown', (e) => {
            isResizing = true;
            initialWidth = resizable.offsetWidth;
            initialHeight = resizable.offsetHeight;
            initialX = e.clientX;
            initialY = e.clientY;
            document.addEventListener('mousemove', resize);
            document.addEventListener('mouseup', stopResize);
        });

        function resize(e) {
            if (!isResizing) return;
            const dx = e.clientX - initialX;
            const dy = e.clientY - initialY;
            resizable.style.width = `${initialWidth + dx}px`;
            resizable.style.height = `${initialHeight + dy}px`;
        }

        function stopResize() {
            isResizing = false;
            document.removeEventListener('mousemove', resize);
            document.removeEventListener('mouseup', stopResize);
        }
    </script>
</body>
</html>

可能遇到的问题和解决方案

拖拽不流畅：
- 原因：可能是由于事件处理频繁，导致性能问题。
- 解决方案：使用requestAnimationFrame来优化重绘频率。

边界条件处理：
- 原因：拖拽到浏览器边缘时可能会出现问题。
- 解决方案：添加边界检查，限制拖拽范围。
兼容性问题：
- 原因：不同浏览器对事件处理的支持可能不同。
- 解决方案：进行跨浏览器测试，并使用polyfill或兼容性代码。

通过以上方法，你可以实现一个基本的拖拽调整大小的功能，并根据具体需求进行优化和扩展。

页面内容是否对你有帮助？

有帮助

没帮助

可缩放图片- android

、、、

我想让它像手机浏览器一样，当你用手指在手机上互相拖拽时，它就会放大。我该怎么办？？我到处都找过了。如果没有办法，我可以只有两个按钮，-和+。如果我点击一个，"imageview“会改变大小吗？我想让它像手机浏览器一样，当你用手指在手机上互相拖拽时，它就会放大。我该怎么办？？我到处都找过了。如果没有办法，我可以只有两个按钮，-和+。如果我点击一个，"imageview“会改变大小吗？

浏览 5提问于2011-11-07得票数 0

回答已采纳

1回答

使用UINavigationController的UIPopoverController是否更改锚点？

、、、、

一旦UINavigationController推入一个新视图，弹出窗口的大小就会以动画的方式改变，并且弹出窗口的位置会返回到第一次显示它的锚点，然后再用我的自定义导航栏拖动。

浏览 3提问于2011-11-21得票数 3

4回答

调整绘图大小以匹配框架大小

、、

然后，我禁用了调整框架的大小，使其始终可见。下面是示例代码。在这里，我希望100x100的正方形保持在中间，与调整大小的JFrame成比例：import j

浏览 0提问于2011-08-19得票数 6

回答已采纳

3回答

jQuery UI .effect()在if..else条件下不起作用

、、、

我想改变大小的拖拽项目，如果position.left超过100，否则它返回到原来的大小。但是如果我添加else语句，jqueryUI effect()就不能工作。<script src="https://code.jquery.com/jquery-3.1.0.js"&

浏览 0提问于2017-08-31得票数 2

1回答

我将做一个网页应用程序与图像和文本与用户处理功能，如拖放，调整大小和旋转。我已经使用Jquery来实现拖放、旋转和调整大小，，但它似乎不是一个很好的实现所有这些事情没有问题。问题之一是，在旋转过程中，我无法创建四个角手柄来旋转图像，对于调整大小，我会遇到问题，并使用另一个js链接(resizable-rotation.patch.js)。请告诉我哪一个Js是最适合实现所有这些事情(拖拽，调整大小和旋转)。

浏览 3提问于2016-11-12得票数 4

回答已采纳

1回答

基于其他单元格更改excel中的数组

、

有没有办法在excel中更新数组大小，而不需要每次都改变公式？例如，如果我有一个公式并希望将其更新为我可以在不手动拖拽和键入的情况下完成此操作吗？其中，C1的值=5

浏览 11提问于2017-06-16得票数 1

回答已采纳

1回答

将一个div拖到另一个div上，当我在它上面时更改另一个div的大小

、、、

我只是想让当我拖拽div时，有约会的那些小div存储，以改变这些小div的大小。当我用鼠标移动和移出时，我成功了，但当我拖动另一个div时，它不起作用。有谁知道该怎么做。

浏览 0提问于2012-05-02得票数 0

回答已采纳

4回答

防止src更改时大图像闪烁

、、、、

img id="img4" src="img4.png" width="250">其中一个是我用jQuery UI拖拽的，所有人都在改变他们的src，也在拖拽： $('#img2').attr('src','

浏览 1提问于2013-05-24得票数 6

回答已采纳

1回答

如何在fabricjs中增加移动设备上的触摸区控制点(不增加控制点的显示尺寸)？

、、、

但不改变控制点的大小(为了更好的视图)。如何增加控制点的交互性=视图控制点大小x 2？ background-color: gray;<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdnjs.cloudflare.

浏览 5提问于2019-08-01得票数 1

1回答

添加fileList后，antd拖拉器上载不起作用

、

我对拖拽的蚂蚁有点问题。我正在尝试添加一个自定义文件列表到拖拽，但当我这样做时，拖拽不再响应。默认fileList的问题是，如果一个文件超过了大小限制，并且没有通过"beforeUpload“函数，它仍然会被添加到fileList。

浏览 2提问于2020-04-24得票数 0

2回答

在拖动过程中将项目保持在鼠标下方

、、、、

我实际上使用jQuery .draggable()方法来拖动一些项目。正如你在这里看到的：如果你拿起一个项目并开始滚动，项目停留在他的第一个位置，你需要移动鼠标才能把它带到它那里。示例html代码： <div class="draggableItm">.c

浏览 0提问于2014-05-19得票数 0

1回答

带有悬停区域的地图，显示div中的alt文本-相对于悬停区域

、、、

这是我的js：if($('#Map')) { var altText

浏览 4提问于2013-04-22得票数 0

1回答

传输拖动事件- Jquery / UI

、、、、

我想让元素转移它们的拖拽事件。这应该会在一次拖拽中发生。有人知道我是怎么做到的吗？

浏览 0提问于2013-12-30得票数 1

1回答

setResizable()无法正常工作

、

我测试了这个例子来创建不能通过鼠标拖动来调整大小的对话框： launch(args); @Override

浏览 3提问于2013-06-10得票数 0

回答已采纳

2回答

使用jQuery对有序列表进行重新排序

、

NumVotes="2">[Alot of HTML]</li></ol> 最初排序是很好的(C# LINQ)，我有一个JS过滤器系统，你可以通过它改变显示的项目类型，所以我需要在过滤器改变后重新排序列表。我看过可排序插件，但它似乎只是为了让用户拖拽LIs。

浏览 0提问于2013-01-17得票数 0

回答已采纳

1回答

获取SwiftUI图像视图的大小

、

我想得到我的图像的帧大小，用于拖拽手势识别器中的一些计算(基本上标准化拖拽的触摸坐标)。我该如何解决这个问题呢？有没有其他方法可以获得图像的视图大小？

浏览 0提问于2021-02-27得票数 0

1回答

拖动包含在另一个填充中的div大小。

、、、

我试图调整div的大小，就像这里在堆栈溢出编辑器(在编辑器底部)一样。载于div中： })$(document).mouseup(function(e){}); 然后，我通过更改js问题是我不相信这个-80，我是通过尝试和错误做的，如果我的页面上发生了什么变化，我担心它会把拖拽器搞砸。有更好的方法吗？

浏览 0提问于2015-09-09得票数 4

回答已采纳

1回答