隐藏拖动预览 - HTML 拖放

2023-11-21

我的一个网站具有拖放功能。一旦您开始拖动我的可拖动 div 之一,就会出现所拖动元素的透明预览。这实际上妨碍了我的用户准确放置元素的方式,因为他们拖动的内容并不直接反映删除的内容。

有没有办法删除或更好地将拖动预览更改为不同的图像?


我相信您可以使用 SetDragImage 函数,它是数据传输 API 的一部分

以下链接有一些示例 Javascript,它将事件附加到 ondragstart 事件。使用 DataTransfer API,您可以使用任何您想要的图像(甚至是不可见的图像)设置事件的拖动图像。

.dragdemo {
    width: 170px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border-radius: 6px;
    background: green; color: #efe;
}
<div id="drag-something" class="dragdemo" draggable="true">drag me</div>
<script>
document.getElementById("drag-something").addEventListener("dragstart", function(e) {
    var crt = this.cloneNode(true);
    crt.style.backgroundColor = "red";
    crt.style.display = "none"; /* or visibility: hidden, or any of the above */
    document.body.appendChild(crt);
    e.dataTransfer.setDragImage(crt, 0, 0);
}, false);
</script>

http://www.kryogenix.org/code/browser/custom-drag-image.html

希望这可以帮助

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

隐藏拖动预览 - HTML 拖放 的相关文章

随机推荐

  • CPU 中的 LRU 缓存是如何实现的?

    我正在为面试做准备 想重温一下我对缓存的记忆 如果CPU有一个带有LRU替换策略的缓存 那么它在芯片上实际上是如何实现的呢 每个缓存行会存储一个时间戳记吗 另外 在双核系统中两个 CPU 同时写入同一个地址时会发生什么情况 对于只有两种路的
  • AngularJs:替换字符串的一部分

    AngularJs 有没有办法替换字符串 我正在尝试做类似的事情 string replace some thing Thanks 你的片段有效 demo http plnkr co edit yNuNeE5yO3rgKAYfGx48 p
  • 相当于 C# 中 VB 的格式

    等效代码是什么Format iCryptedByte 000 VB NET 在 C 中 String Format format iCryptedByte where format like 0 D2 参见MSDN1 2 3
  • 在 Matplotlib 中绘制 k-NN 决策边界图

    How do I color the decision boundaries for a k Nearest Neighbor classifier as seen here I ve got the data for the 3 clas
  • Android:Edittext-获取当前行

    在编辑文本中是否有获取光标当前行的方法 如果没有 我会编写自己的方法 但只是想检查一下 如果我确实编写自己的方法 最好的方法是遍历编辑文本中的每个字符 直到选择开始并使用 For 循环计算 n 的数量 还是有更好的方法 谢谢 只是为了让人们
  • Angular 2 中无法加载图像

    HTML 文件 div img src New Google Logo png div 这里 New Google Logo png 与 html 文件位于同一文件夹中 但是在 ng 服务之后 html 页面会加载其他详细信息 但不会加载图
  • 如何在 Windows 上 pip 或 easy_install tkinter [重复]

    这个问题在这里已经有答案了 IDLE 抛出错误并说tkinter无法导入 有没有简单的安装方法tkinter via pip or easy install 似乎有很多软件包名称为此而流传 这个和其他各种变体tkinter pypy不工作
  • auto 关键字在 Dev C++ 中不起作用[重复]

    这个问题在这里已经有答案了 这是我写的代码 看看如何auto关键字有效 但它没有在 Dev C 中编译并给出以下警告 警告 C 11 auto 仅适用于 std c 11 或 std gnu 11如何克服这个故障并按照警告的指示去做 inc
  • Xamarin Forms:TabbedPage 中的内容页

    我正在尝试将一些自定义内容页面放入选项卡式页面中 遗憾的是我不确定如何使用 XAML 语法执行此操作 我的虚拟项目如下所示 Page 1
  • 将 AsyncRead 转换为 TryStream 字节的最佳方法是什么?

    我有一个AsyncRead并想将其转换为Stream
  • 同一个表中与 SQLAlchemy 的多对一关系

    我有一张 客户 表 其中客户可以是另一个客户的子项 这是表定义 ClientID int IDENTITY 1 1 NOT NULL name varchar 50 NOT NULL VPFSID varchar 50 NOT NULL T
  • 在 WebView 中从相机或图库上传图像

    此应用程序中的 WebView 打开一个带有上传按钮的页面 下面的代码块允许打开一个对话框以从图库或相机上传图像 在我的活动中 我有 private WebView wv make HTML upload button work in We
  • 一个干净的 CSS3 3 列布局,从哪里开始?

    我目前正在更新一个相当旧的网站 上次更新是在 2001 年左右 并同意使用 HTML5 和 CSS3 对于总体设计 我正在研究一种非常干净的白色和灰色色调风格 带有许多填充和边距 我的问题出在主页上 我想要一个 3 列居中布局 但从哪里开始
  • Python ctypes 加载错误:未定义的符号

    我试图使用 ctypes 将从 C 源代码编译的共享库加载到 Python 中 共享库 名为 库子库 下面 使用libusb图书馆 这就是 make 所做的 gcc c O2 Wall Werror g I src I boot vnd f
  • 从 CSV 文件中提取数据(融合表和 kml 解决方法)

    在使用 C 的 Android 版 Xamarin 谷歌地图中 您可以基于此创建多边形tutorial public void OnMapReady GoogleMap googleMap mMap googleMap PolylineOp
  • TransactionScope 无法与并行扩展一起使用?

    如果我执行以下操作 Using scope New TransactionScope entries Content ReadAs Of IList Of WebMaint AsParallel ForAll Sub entry repos
  • jquery推送制作多维数组

    我在没有帮助的情况下查看了其他类似的帖子 它们都是从已经制作的多维数组开始的 我想通过使用 push 神奇地制作一个 我的阵列 ItemsArray push RoomName RoomName Item this is where I w
  • 当数组长度不为空时出现“恐慌:运行时错误:索引超出范围”

    我很难学习如何在 Go 中循环字符串来做一些事情 具体来说 分隔单词而不是包含元音 我写了这个代码片段 https play golang org p zgDtOyq6qf 这是我运行时遇到的错误 panic runtime error i
  • 提高 LIKE 子句的性能

    这几天来 这一直是我头疼的事情 我之前创建数据库时对性能一无所知LIKE 我使用的查询是这样的 SELECT FROM JOINS WHERE tableA col1 LIKE keyword OR tableB col2 LIKE key
  • 隐藏拖动预览 - HTML 拖放

    我的一个网站具有拖放功能 一旦您开始拖动我的可拖动 div 之一 就会出现所拖动元素的透明预览 这实际上妨碍了我的用户准确放置元素的方式 因为他们拖动的内容并不直接反映删除的内容 有没有办法删除或更好地将拖动预览更改为不同的图像 我相信您可