js图标拖动不覆盖

在JavaScript中实现图标拖动且不覆盖其他元素，通常涉及到HTML5的拖放API以及一些事件处理。以下是相关的基础概念、优势、类型、应用场景以及解决方案：

基础概念

HTML5 Drag and Drop API：这是HTML5提供的一套用于实现拖放功能的接口。
事件处理：包括dragstart、dragover、drop等事件。

优势

用户体验：拖放功能可以显著提升用户界面的交互性和用户体验。
灵活性：可以轻松实现复杂的布局和交互效果。

类型

文件拖放：允许用户将文件从操作系统拖动到网页中。
元素拖放：允许用户在网页内部拖动元素，如图片、图标等。

应用场景

图片上传：用户可以通过拖放图片到指定区域来上传。
列表排序：用户可以通过拖放列表项来重新排序。
图标布局：用户可以通过拖放图标来调整布局。

解决方案

以下是一个简单的示例代码，展示如何实现图标拖动且不覆盖其他元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Example</title>
    <style>
        .draggable {
            width: 50px;
            height: 50px;
            background-color: #f00;
            position: absolute;
            cursor: move;
        }
        .dropzone {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="dropzone" id="dropzone">
        <div class="draggable" id="draggable" draggable="true"></div>
    </div>

    <script>
        const draggable = document.getElementById('draggable');
        const dropzone = document.getElementById('dropzone');

        let offsetX, offsetY;

        draggable.addEventListener('dragstart', (e) => {
            offsetX = e.offsetX;
            offsetY = e.offsetY;
            e.dataTransfer.setData('text/plain', 'draggable');
        });

        dropzone.addEventListener('dragover', (e) => {
            e.preventDefault();
        });

        dropzone.addEventListener('drop', (e) => {
            e.preventDefault();
            const x = e.clientX - dropzone.getBoundingClientRect().left - offsetX;
            const y = e.clientY - dropzone.getBoundingClientRect().top - offsetY;
            draggable.style.left = `${x}px`;
            draggable.style.top = `${y}px`;
        });
    </script>
</body>
</html>

解释

HTML结构：
- dropzone：放置图标的区域。
- draggable：可拖动的图标。

CSS样式：
- draggable：设置图标的大小、背景颜色和定位方式。
- dropzone：设置放置区域的边框和定位方式。
JavaScript逻辑：
- dragstart事件：记录鼠标点击图标时的偏移量，并设置拖动数据。
- dragover事件：阻止默认行为，允许放置。
- drop事件：计算图标的新位置，并更新其样式。

避免覆盖

在上述示例中，通过计算鼠标点击图标时的偏移量，并在放置时考虑这个偏移量，可以确保图标不会覆盖其他元素。此外，可以通过调整dropzone的布局和图标的大小来进一步优化用户体验。

如果遇到图标覆盖的问题，可以检查以下几点：

偏移量计算：确保偏移量计算正确，避免图标放置位置不准确。
布局设计：合理设计dropzone的布局，确保有足够的空间放置图标。
事件处理：确保dragover和drop事件处理正确，避免默认行为干扰。

通过以上方法，可以实现图标的拖动且不覆盖其他元素。

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

有帮助

没帮助

在ExtJS中拖动时删除反馈图标

、、、、

我已经创建了一个DataView，其中的项目可以在内部拖动以重新排列，但问题是，虽然我可以轻松地拖动和重新排列数据视图中的项目，同时拖动时，项目创建的覆盖显示“红色”反馈图标(这表明项目不能被拖放在这里)，而我不想显示任何反馈图标(既不是绿色也不是红色)，只覆盖项目就足够了。如何摆脱反馈图标？

浏览 4提问于2013-05-27得票数 3

1回答

我目前正在使用Mapbox GL JS，我有，我希望能够拖动图标。我正在做类似于的操作，其中我有mouseDown、onMove和onUp函数。然而，我卡住的部分是在onMove，我不确定如何设置自定义图标，这是div在整个拖动过程中更新其位置。我正在更新图标的新坐标(lng和lat)，但我不确定如何实际移动它们，因为现在图标不会移动/拖动。在最初的可拖动点示例中，它有map.getSource('point&#

浏览 9提问于2016-09-29得票数 2

1回答

如何在ag网格角2+中设置行拖动默认图标的可见性

、

这将为所有有子行或单行的行创建默认图标。但是，我只希望通过将拖动图标的可见性设置为隐藏来使此图标仅用于特定的行。如果我有条件地填充rowDrag真或假，那么我不希望拖动图标的行，图标不会出现，但它破坏了对齐。这就是为什么我希望显式地将所有行的rowDrag设置为true，然后显式地将可见性设置为隐藏。

浏览 1提问于2018-04-09得票数 0

回答已采纳

1回答

有人知道如何使用Android2.1在地图应用程序的覆盖项上创建一个带有2个按钮的消息气泡吗？

、、、、

目前，我已经实现了一个覆盖项，它在Android地图应用程序上显示一个Geo点图标。单击图标时，它会从下面的AlertDialog方法中弹出一个onTap。我有以下问题：如果是，请共享一些示例代码。

浏览 2提问于2010-03-20得票数 1

回答已采纳

2回答

实现自动滚动后奇怪的可拖动行为

、、、

我现在正在实现拖动操作过程中的自动滚动。我对其进行了设置，以便当您开始拖动时，灰色覆盖显示在浏览器窗口的顶部和底部。当您拖动到其中一个覆盖图中时，浏览器窗口将开始自动滚动。通过拖动左侧的一个十字准线图标来拖动项目。但有一个问题:如果您滚动到页面底部，然后将一个项目拖到顶部覆盖，它将按预期向上滚动。然而，对我来说，我得到了页面的一半，可拖动的帮助器不会再高了。

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

回答已采纳

1回答

如何设置在缩放或拖动(左、右、上、下)图像时准确定位另一个视图？

、、、、

我有一个图像视图(绿色图标)添加到图像背景。动态设置绿色图标的位置(图1)此图像可以放大、缩小、向左、向右、向上、向下拖动。我想在缩放或拖动图像背景时准确地移动imageview的位置(绿色图标)。你能建议我一些解决方案，方向或脚本吗？谢谢大家！

浏览 1提问于2016-02-25得票数 1

1回答

如何使用widget curent render作为拖放图像

、、

我有谨慎的恼人的问题与dnd拖动图像。当我开始拖动某个小部件时，它会在移动时显示一些默认图标。我只想让这个图标实际上是小工具外观本身。因此，它看起来就像我通过拖动来移动小部件一样。以这种方式工作，但我需要使用当前外观的小部件，因为有主题和覆盖的几个图像。

浏览 0提问于2012-09-26得票数 1

回答已采纳

1回答

安卓MapView可拖拽标记

、、

我想在Android MapView (com.google.android.maps.MapView)中创建一个可拖动的标记，就像这样：。我已经有一个覆盖图指向我想要的位置，但我希望标记图标是可拖动的，就像上面的例子一样。有没有什么东西可以用来做这件事，或者有必要自己来实现拖拽逻辑？

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

回答已采纳

2回答

如何在事件中设置自定义数据，如拖放？

、、、

我现在可以做所有这些事情，但是我不知道如何从treewidget开始为拖动事件设置自定义数据。

浏览 4提问于2012-09-13得票数 1

回答已采纳

1回答

在AppKit中检测鼠标是否正在被拖动

、、

此视图也是特定类型文件的拖动目标。当我将一个文件(例如，从Finder)拖动到此视图中时，绿色加号图标在光标旁边短暂显示，但一旦跟踪区域更新了光标，该加号图标就消失了。有没有办法让我知道鼠标正在被拖动，并且如果是的话，不更新光标？

浏览 6提问于2016-07-18得票数 0

2回答

如何重写jQuery hide()函数？

、、

我有一个返回到顶部锚图像，当用户点击它时，它会带他回到顶部与js动画。我首先用js隐藏了图标，直到它到达某个点，然后它就会显示出来。这工作得很好。这就是我的问题。在我的@media查询中，我不希望返回顶部图标从0px显示到480px视口。因此，在0px到480px的@media查询中，我将图标设置为显示:none。但它仍在上映。我知道是js迫使它显示出来的。如何仅覆盖0到480px的js hide()函数？

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

回答已采纳

1回答

OL3 :选择图像/标记拖到另一个坐标(视觉问题OpenLayers 3)

有一个标记(Image)，它是可拖动的，但视觉不是我想要的：任何提示都是非常欢迎的！谢谢

浏览 5提问于2014-11-12得票数 0

回答已采纳

3回答

jQuery将可链接的图像图标动态定位在可拖动的图像上

、

谁能告诉我如何动态覆盖图像(在我的情况下是一个图标)在图像的右上角，无论该图像的大小是什么。它需要能够与可拖动的ui一起工作，以便当图像被移动时，覆盖的图标留在它的位置。最后，该图标将需要是可链接的，以便我可以分配onClick功能给它。我使用的是最新版本的jQuery。

浏览 1提问于2012-05-17得票数 1

回答已采纳

1回答

Windows7-半透明拖拽管理器？

、

将文件从Windows资源管理器拖动到其他应用程序时，我现在会看到所拖动文件的漂亮图标。我记不起以前的Windows版本中的这一点，所以我希望他们最终实现了半透明拖动管理器的等价物，在那里您可以将透明图像与拖动内容相关联。有人知道这件事吗？

浏览 0提问于2009-10-13得票数 0

回答已采纳

2回答

调整div的大小并使其可拖放

、、、、

我希望div是可拖动的，当光标在调整大小的图标上时，div应该是可调整大小的。如果我使用可拖动的方法，并且只调整可拖动的大小是有效的，那么它没有可拖动的方法就能工作，但是我希望它可以移动，并且在光标处于可调整大小的图标时调整大小。有人能帮我吗？ height: 99%;} <script src="https://code.jquery.com/jquery-1.12

浏览 2提问于2017-04-25得票数 2

回答已采纳

1回答

向konvajs变压器锚添加自定义图标

html、css、js、output如何禁用旋转器锚点的拖动，这样图标就不会移动？如何禁用锚的所有事件处理程序，并添加单击事件？可以使用fillPatternImage将图标添加到形状本身吗？而不是添加图标作为一个新的形状，如im。如果可能，请提供

浏览 8提问于2019-10-28得票数 1

回答已采纳

1回答

在离子覆盖侧菜单中，我得到错误值是未定义的？

、、、

我正在尝试显示覆盖侧菜单，我为此编写了代码，在我的代码中，我在标题中添加了菜单图标，如果我们单击覆盖侧菜单是打开的，而我们单击外部它正在关闭。但如果我拖动页面覆盖侧菜单不来，我检查我的代码都是完美的，但我得到了一个错误的value is undefined，我已经在中添加了代码。你能告诉我为什么我得到的错误值是未定义的。

浏览 2提问于2015-11-26得票数 0

1回答