28(拖放事件)更改拖拽元素的默认样式

最新推荐文章于 2024-05-17 04:51:24 发布
最新推荐文章于 2024-05-17 04:51:24 发布
阅读量575 收藏 9
点赞数 9
分类专栏： 08_新H5 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q506174602/article/details/135647932
版权
本文介绍了如何在HTML中利用JavaScript为可拖动元素('content')设置拖拽样式，通过`ondragstart`事件和`dataTransfer.setDragImage()`方法，实现拖拽时显示自定义图片。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>更改拖拽元素样式</title>
	<style type="text/css">
		.content {
			width: 100px;
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="content" draggable="true"></div>

	<script type="text/javascript">
		var content = document.querySelector('.content');

		var img = document.createElement('img');
		img.src = '../03_音视频/media/01.jpg';
		content.ondragstart = function() {
			// 第二个参数: xOffset 相对于图片的横向偏移量
			// 第三个参数: YOffset 相对于图片的纵向偏移量
			event.dataTransfer.setDragImage(img, 50, 50);
		}
	</script>
</body>
</html>

上述运行结果：

七色的天空
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
拖动时候的样式怎么改_前端拖动排序实践
weixin_39622980的博客
12-03 1168
前端的拖动排序也是一直很想实践的对象之一。排险者露出那毫无特点的微笑说：“这很难理解吗？当生命意识到宇宙奥秘的存在时，距它最终解开这个奥秘只有一步之遥了。”看到人们仍不明白，他接着说，“比如地球生命，用了四十多亿年时间才第一次意识到宇宙奥秘的存在，但那一时刻距你们建成爱因斯坦赤道只有不到四十万年时间，而这一进程最关键的加速期只有不到五百年时间。如果说那个原始人对字宙的几分钟凝视是看到了一颗宝石，其...
react js 修改拖拽默认展示的样式
m0_37931969的博客
11-21 237
修改react 拖拽默认展示的样式
Web前端最全撸一个vue项目实现拖拽功能_vue dragover，web前端开发如何提高页面性能优化
最新发布
2401_84123150的博客
05-17 500
原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。dataTransfer 对象允许我们在开始拖动元素时设置数据，并在将元素放在拖放区中时访问相同的数据。首先，我们必须设置数据。如你所见例子中有两个列表，我们可以在它们之间顺畅地拖放项目。API 中有八个拖放事件可以用在我们程序中。
Vue 实现拖拽模块(三)自定义拖拽组件的样式
记得抬头微笑
12-09 3785
本文主要介绍了 Vue 自定义拖拽组件的样式，元件支持通过右侧的属性样式配置元件的样式
前端使用H5中draggable实现拖拽排序效果 两种实现效果
杨杨吖的博客
09-12 2122
/ insertBefore 插入的节点如果在list中存在，那么则会删除，再插入新的位置。// 在目标节点的下一个元素之前插入拖拽的节点。// 在目标节点的下一个节点之前插入拖动节点。// 在拖动节点的下一个节点之前插入目标节点。// 拖拽节点下标小于目标节点的下标。// 拖拽节点下标大于目标节点的下标。// 在目标节点之前插入拖拽的节点。// 当拖拽放入某个目标节点后。// 当拖拽进入某个节点时候。// 当前拖拽节点拖拽结束。// 当前拖拽节点拖拽结束。// 当拖拽开始的时候。"当前拖动的节点："
用 JavaScript 实现元素的自定义拖拽
CodingmanNAN的博客
12-23 540
JavaScript 元素拖拽的使用可以是用户随意的拖动页面上的任何一个可以移动元素，使其按照用户的意愿自由移动。
拖放事件原理及实现详解
07-18
如果希望元素可以接受拖放，可以在该事件中清除任何阻止默认行为的样式，例如CSS的`pointer-events: none`。紧接着，`dragover`事件会被连续触发，这是调整目标元素外观或预览效果的好时机。 一旦拖动的元素离开...
html5指南-3.如何实现html元素拖拽功能
09-28
例如，当元素开始拖动时，我们可以更改其样式，表示拖动状态。当拖动结束时，我们可以处理投放位置等。以下是一个处理拖放事件的例子： ```html (event)" ondragend="handleDragEnd(event)" /> ``` 在 JavaScript ...
html5图片拖放
11-17
4. `dragleave`: 当拖动元素离开目标元素时触发，用于取消之前的样式修改。 5. `dragover`: 在拖动元素在目标元素上方移动时持续触发，通常需要阻止其默认行为，以允许`drop`事件发生。 6. `drop`: 当拖动元素被...
谈谈对JavaScript原生拖放的深入理解
10-21
例如，通过修改拖放源和目标的样式以提供视觉反馈，或者在`drop`事件中处理数据传输，如复制、移动或删除元素等。同时，为了保证跨浏览器的兼容性，需要对各个浏览器的特性进行适配。 总的来说，JavaScript原生拖放...
拖放
03-03
4. **CSS样式调整**：为了提供良好的用户体验，你可能需要在拖动过程中修改拖动元素和目标元素的样式，如添加阴影、改变边框等。 5. **兼容性处理**：虽然大多数现代浏览器都支持拖放API，但为了确保跨浏览器兼容性...
vue-cli 关闭 Uncaught error 的全屏提示_vue报错如何不显示在屏幕上(1)
2401_84617731的博客
05-08 302
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】在使用vue-cli开发项目的时候，如果代码抛出异常了，那么就会出现一个全屏的提示框，长下面这样：经过一段时间的排查发现是webpack的问题，排查方式就是打开控制台，看这个框的一些属性，通常会有一些关于这个技术的关键词，例如这个：可以很明显的看到是所以我们现在只需要在项目的// 省略其他配置...client: {### 最后。
JS弹出框实现拖拽移动和修改宽高的功能
qq_53868229的博客
06-05 905
这里写自定义目录标题拖拽移动拖拽修改宽高完整代码 拖拽移动 通过定义dom节点的onmousedown函数，可以实现对拖拽事件的处理： 创建div： const popup = document.createElement('div'); popup.style.position = 'absolute'; popup.style.top = '50px'; popup.style.left = '50px'; popup.style.zIndex = 1; popup.style.cursor = "mo
html5元素拖拽效果
为天空着色
09-26 936
html5元素拖拽效果的实现需要借助js，分为4个步骤，代码如下： html5元素拖拽效果 /** 存储拖放元素的ID值 */ function setsData(ev){ ev.dataTransfer.setData('text',ev.target.id); } /** 允许改元素接受拖放元素进来 */ function allowAll(ev){
记录自己在看H5拖拽功能时遇到的问题
weixin_54241625的博客
05-15 493
解决通过dom.style.backgroundColor拿不到元素的样式问题，通过window.getComputedStyle(dom元素).css元素获取解决问题
HTML5拖放
uncle_Huang的博客
07-16 282
HTML5拖放 拖放的步骤 draggable属性设置为true draggable = “true”; 2 编写与拖放有关的事件处理代码 事件/产生事件的元素 描述 dragstart /被拖放的元素 开始拖放元素 drag /被拖放的元素 拖放过程中 dragenter/拖放过程中鼠标经过的元素 被拖放的元素开始进入本元素的范围之内 dragover/拖放过程中...
html拖拽切换样式
qq_41371197的博客
10-08 1039
<!DOCTYPE HTML> <html> <head> <style type="text/css"> div {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript">...
拖动时候的样式怎么改_ps新手入门之图层样式
weixin_39835117的博客
12-05 276
通过上一篇文章我们知道了怎样混合两个图层效果，今天这篇文章我们就来讲讲如何直接添加ps的一些效果在图层上，接下来要介绍的工具就是我们的图层样式。先来介绍一下添加图层样式的方法，主要有四种，分别是：双击图层缩览图的后方，弹出对话框点击图层面板下方fx按钮，添加图层样式图层菜单中选择图层样式在画布区域右击弹出混合选项选择（移动工具、抓手工具、放大镜工具不可用）最常用就是第一种和第二种。如果想要复制图层...
接受拖放事件的是Qwidget
07-08
如果你想将图片拖放到`QWidget`中而不是`QLabel`，你可以按照以下步骤进行操作： 首先，创建一个带有拖放事件的自定义`QWidget`类，命名为`DraggableWidget`。 DraggableWidget.h： ```cpp #ifndef DRAGGABLEWIDGET_H #define DRAGGABLEWIDGET_H #include <QWidget> #include <QDragEnterEvent> #include <QDropEvent> #include <QMimeData> class DraggableWidget : public QWidget { Q_OBJECT public: explicit DraggableWidget(QWidget *parent = nullptr); protected: void dragEnterEvent(QDragEnterEvent* event) override; void dropEvent(QDropEvent* event) override; }; #endif // DRAGGABLEWIDGET_H ``` DraggableWidget.cpp： ```cpp #include "DraggableWidget.h" DraggableWidget::DraggableWidget(QWidget *parent) : QWidget(parent) { setAcceptDrops(true); } void DraggableWidget::dragEnterEvent(QDragEnterEvent* event) { if (event->mimeData()->hasImage()) event->acceptProposedAction(); } void DraggableWidget::dropEvent(QDropEvent* event) { if (event->mimeData()->hasImage()) { const QPixmap pixmap = qvariant_cast<QPixmap>(event->mimeData()->imageData()); QLabel* label = new QLabel(this); label->setPixmap(pixmap); label->setScaledContents(true); label->move(event->pos() - QPoint(label->width() / 2, label->height() / 2)); label->show(); event->acceptProposedAction(); } } ``` 接下来，在你的主窗口类（例如`MainWindow`）中，创建一个实例化`DraggableWidget`的对象，并将其设置为`centralWidget`。 mainwindow.h： ```cpp #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QWidget> #include <QLabel> #include "DraggableWidget.h" class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = nullptr); ~MainWindow(); private: DraggableWidget* centralWidget; }; #endif // MAINWINDOW_H ``` mainwindow.cpp： ```cpp #include "mainwindow.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { centralWidget = new DraggableWidget(this); setCentralWidget(centralWidget); } MainWindow::~MainWindow() { } ``` 现在，你可以将图片拖放到`DraggableWidget`中，并在拖放过程中显示图片。记得将上述代码编译运行后，可以直接拖放图片到`DraggableWidget`中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

七色的天空

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值