Drop 事件在 Chrome 中未触发

2024-03-20

似乎 drop 事件没有在我预期的时候触发。

我假设当被拖动的元素释放到目标元素上方时,会触发 drop 事件,但情况似乎并非如此。

我有什么误解吗?

http://jsfiddle.net/LntTL/ http://jsfiddle.net/LntTL/

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(){
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})

为了让 div 元素上发生 drop 事件,您必须取消ondragenter and ondragover事件。使用 jquery 和您提供的代码...

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(event){
    event.preventDefault();
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})
$('.drop').on('dragover',function(event){
    event.preventDefault();
})

欲了解更多信息,请查看MDN 页面 https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#droptargets.

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

Drop 事件在 Chrome 中未触发 的相关文章

  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • 为什么 window 与 Internet Explorer 中的 window.self 不同?

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 如何在React Native Android中获取响应头?

    您好 我想在获取 POST 请求后获取响应标头 我尝试调试看看里面有什么response with console log response 我可以从以下位置获取响应机构responseData但我不知道如何获取标题 我想同时获得标题和正文
  • nodejs (libuv) 事件循环是否在一个阶段(队列)中执行所有回调,然后再进入下一阶段或以循环方式运行?

    我正在研究 Node js 中 libuv 提供的事件循环 我遇到了关注 Deepal Jayasekara 的博客 https blog insiderattack net event loop and the big picture n
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 自动建议 php 的 ajax

    我有一个 html 表单 php 脚本和 jquery 我需要一个 ajax 代码来从我的 php 脚本中进行自动建议 以下是代码 表单 html
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • 如何使用 Javascript 设置查询字符串

    有没有办法使用 javascript 设置查询字符串的值 我的页面有一个过滤器列表 单击该列表时 它将更改右侧的页内结果窗格 我正在尝试更新 url 的查询字符串值 因此如果用户离开页面 然后单击 后退 按钮 他们将返回到最后一个过滤器选择
  • Javafx 拖放 TabPane

    我 在 JavaFx 应用程序中 有一个带有不同选项卡的选项卡 我想实现拖放功能以将选项卡拖到舞台之外 这样它就可以生成一个新窗口 就像在 Google Chrome 中一样 谢谢您的帮助 您应该检查 Tom Schindl 在他的网站上显
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 使用单击事件调用“trigger”方法时的复选框值

    如何在点击事件中获取正确的当前值以通过触发器调用 Html
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 有没有办法使用 ko.observableArray 作为地图?

    有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 在 iOS 7 Safari 中,如何区分通过边缘滑动与后退/前进按钮的 popstate 事件?

    在 iOS 7 Safari 中 现在有两种后退 前进导航方式 使用底部的传统后退 前进按钮箭头或从屏幕边缘滑动 我正在使用动画在 ajax 应用程序中的页面之间进行转换 但如果用户通过边缘滑动进行导航 我不想触发该转换 因为这本身就是一个
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

随机推荐

  • 按数据属性对列表进行排序

    我有一个人员列表 其职称按名字排序 如下所示 ul li a href span class list name John Smith span a span class list desc Professor span li li a h
  • 在 iOS 模拟器中运行 React Native 应用程序时找不到 UMModuleRegistryAdapter.h

    我有一个简单的 React Native 应用程序 我一直在 Android 上测试它 现在想在 iOS 上测试它 它使用 React 导航 I ran npm run ios但我收到以下错误 info In file included f
  • 如何找到终结器队列挂起的原因?

    我有一个应用程序从 go 开始就经历了缓慢的内存泄漏 Using ANTS 内存分析器我可以看到所有泄漏的内存都由终结器队列的 GC 根保存 我怀疑可能发生的情况是终结器死锁 等待锁变得可用 我们的类都没有实现显式终结器 我们通常避免使用它
  • 如何使用 VisualVM 查找内存泄漏

    我怀疑我们的 ActiveMQ 连接桥存在重大内存泄漏 我们看到了典型的内存泄漏模式 应用程序加载良好 如果长时间运行或在短时间内一遍又一遍地重新启动 则速度会变慢 我查找了查找 Java 内存泄漏的现代最佳实践 许多开发人员似乎正在放弃
  • Log4Net 部署时不记录日志

    我正在使用 log4net 来记录我的应用程序 这是一个 WPF 应用程序 日志记录在调试模式下运行良好 但不适用于我部署的版本 该应用程序安装在 C Program Files x86 MyApp 中 我使用 InnoSetup 创建安装
  • Python 中的“类型错误:无法实例化抽象类”

    我有一个模块fi定义了以下类 class Asset metaclass abc ABCMeta pass abc abstractmethod def get price self dt datetime date kwargs Noth
  • Python 中的 COM/ActiveX 可以做什么? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我读到可以使用 COM ActiveX 在 Crystal Reports 中自动生成月度报告 我不太了解这是什么或者你可以用它做什么
  • Bootstrap 在 3 列上通过右拉、左拉改变 div 顺序

    我一整天都在研究这个问题 但没有找到解决方案 我在一个容器中一行有 3 列 1 右侧内容 右拉 2 导航 左拉 三 主要内容 它在大屏幕上的外观 Menu Content Right Content 在较小的屏幕上它应该是什么样子 Menu
  • str_replace 多维数组 PHP 中的键

    我有一个多维数组 如下所示 Array results gt Array 0 gt Array object id gt 13 id gt 13 idno gt e00110 o00005 2010 PROG display label g
  • 为什么 Chrome 要求 robots.txt?

    我在日志中注意到 Chrome 请求了robots txt和我所期望的一切一样 2017 09 17 15 22 35 sanic INFO Goin Fast http 0 0 0 0 8080 2017 09 17 15 22 35 s
  • 将另一个转换附加到现有属性

    有没有办法将新的转换属性附加到现有属性 例如 我有一个div animation 其定义如下 animation transform translateX 50 translateY 50 现在我想追加transform scale 1 到
  • SlowCheetah 未在构建时转换文件

    我有一个项目正在尝试使用 SlowCheetah 我已经创建了我的配置文件 Test web config 和我想要使用的所有转换 调试 Mock config 调试 SQL config 发布 在我的构建配置中 我有一个构建后事件应该将转
  • Django 管理员:获取根据 GET 字符串过滤的 QuerySet,与更改列表中所见完全一样?

    在 Django 管理中 用户可以设置过滤器来限制更改列表中显示的行 如何获取具有由查询字符串定义的过滤器集的 QuerySet 实例 例如 如果我传递 start date gte 2009 11 06 Django 管理员将在某处应用
  • Ant 构建类路径 jar 生成“打开 zip 文件时出错”

    我有一个在 eclipse 中构建的项目 依赖于第 3 方 jar 我正在尝试为 ant 生成一个合适的构建文件 使用 Eclipses 内置的导出 gt ant 构建文件功能作为起始块 当我运行构建目标时 出现以下错误 javac err
  • Dotnet build 和 dotnet pack 生成不同的 nupkg

    这与这个问题 https stackoverflow com questions 76467763 cant use analyzer in nuget package an instance of analyzer cannot be c
  • Django 以 JSON 形式返回单个记录

    我创建了一个表单 用于在我们的网络管理中添加有关客户的注释 我正在使用 jQuery 和 Ajax 来提交 for 我希望 Django 视图返回新添加的注释 记录 以便我可以将其附加到客户注释表中 我的 Ajax 发送正在工作 并且正在保
  • 使用 php Imagemagick 调整图像大小

    我正在尝试使用 imagemagick 的函数 thumbnailImage 调整图像大小 现在 我之后没有对图像进行任何操作 只是回显新的尺寸以查看它是否有效 到目前为止 它还不起作用 这是我的代码 注意 它确实呼应了原始尺寸 但不是新尺
  • 如何让浏览器提示保存密码?

    嘿 我正在开发一个 Web 应用程序 它有一个登录对话框 其工作原理如下 用户点击 登录 登录表单 HTML 通过 AJAX 加载并显示在页面的 DIV 中 用户在字段中输入用户名 密码并单击提交 这不是一个
  • Django 过滤器测试

    class BusinessPartnerFilter SilBaseFilter active django filters BooleanFilter name date deactivated lookup expr isnull p
  • Drop 事件在 Chrome 中未触发

    似乎 drop 事件没有在我预期的时候触发 我假设当被拖动的元素释放到目标元素上方时 会触发 drop 事件 但情况似乎并非如此 我有什么误解吗 http jsfiddle net LntTL http jsfiddle net LntTL