使用 Dragstart PreventDefault 禁用浏览器默认图像拖动,但它也禁用我的拖动事件

2024-05-04

我尝试阻止浏览器默认图像在dragstart中拖动,但不知何故它也禁用了drag和dragend事件。无论如何,我可以禁用浏览器默认图像拖动,但它仍然会运行拖动和拖动结束事件?

或者唯一的选择是使用背景图像?我不想这样做,因为我需要因此更改很多代码。现在我知道为什么每个人都使用背景图像了。

$("#addObjectBarContainer a img")
        .bind("dragstart", function(event){
            var tmpObjImg = $("<img></img>");
            tmpObjImg
                .attr({
                    id: "temp-img-object-drag"
                ,   src: $(this).attr("src")
                })
                .css({
                    position:"absolute"
                });

            tmpObjImg.appendTo("body");
            event.preventDefault();
        })
        .bind("drag" , function(event){
            $("#temp-img-object-drag").css({
                top: event.pageY,
                left: event.pageX
           });
        })
        .bind("dragend",function(event){
            var ObjectTop = event.pageY - $("#canvas").offset().top;
            var ObjectLeft = event.pageX -$("#canvas").offset().left
            $("#temp-img-object-drag").remove();
            $(this).parent().trigger("click");

            $(activeObject).css({
                top: ObjectTop,
                left: ObjectLeft
            });
            $(activeObject,"div:first-child").css({
                top: ObjectTop,
                left: ObjectLeft
            });

            dragresize.elmY = ObjectTop;
            dragresize.elmX = ObjectLeft;

            inspector_Update(activeObject, "select");
        });

现在你可以使用event.dataTransfer.clearData()在 Dragstart 事件侦听器中禁用默认行为,但仍执行所需的侦听器。

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

使用 Dragstart PreventDefault 禁用浏览器默认图像拖动,但它也禁用我的拖动事件 的相关文章

  • 将纯文本转换为 HTML

    我有一个脚本 在某个时刻我可以通过 Ajax 调用获取 HTML 数据 我必须将此 HTML 转换为纯文本 如下所示 div text data 我现在想扭转这一局面 再次将文本设为 HTML 我有一个简单的 Jquery 方法可以做到这一
  • 这种类型注释在没有 TypeScript 的 React 代码中如何工作?

    我在看这段代码示例 https reacttraining com react router web example auth workflow在 ReactRouter 页面上 这篇文章很有趣 const PrivateRoute com
  • jQuery输入文件点击方法和IE上拒绝访问

    我尝试仅使用一个按钮作为输入文件 它在 Firefox Chrome Safari 中工作正常 但在 IE 中不行 提交表单时我总是收到 访问被拒绝 的消息 代码 input file click 有真正的解决方法吗 我在谷歌上浪费了大约2
  • jQuery 表格排序

    我有一个非常简单的 HTML 表格 有 4 列 Facility Name Phone City Specialty 我希望用户能够排序设备名称 and City only 我如何使用 jQuery 进行编码 我发现了这个 我想我应该投入
  • JavaScript 将键添加到数组中的每个值

    我下面有这个数组 它由一个简单的数组组成 我想要完成的是放一把钥匙id在每个数组值前面以实现类似的效果 id a id b id c id d 有没有一种简单的方法可以做到这一点 任何帮助将不胜感激 谢谢 var test a b c d
  • C# 和 Javascript SHA256 哈希的代码示例

    我有一个在服务器端运行的 C 算法 它对 Base64 编码的字符串进行哈希处理 byte salt Convert FromBase64String serverSalt Step 1 SHA256Managed sha256 new S
  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale
  • 如果没有 /// 标签,TypeScript 的“将 JavaScript 输出合并到文件中”选项无法推断出正确的脚本顺序

    我正在开发一个使用 将 JavaScript 输出合并到文件中 选项的 TypeScript 解决方案 我经常引用另一个文件中定义的项目 例如 In MyBaseClass ts export class MyBaseClass In My
  • 如果一个对象结构与另一个对象结构不匹配/不匹配,如何引发异常

    我将读取格式正确的用户输入对象 也就是说 输入对象现在可以具有接口中未定义的任何键或子结构 如果用户提供了无效的对象 我如何抛出异常 预定义接口 export interface InputStructureInterface tableN
  • 如何仅显示/隐藏此 bootstrapvue 表的第二列和第三列?

    下面的代码将显示 隐藏 a 中的所有列BootstrapVue桌子 代码的来源就是这里的答案 使用 bootstrap vue 组件和 bootstrap 3 动态显示 隐藏列 https stackoverflow com questio
  • 当我多次调用 requestAnimationFrame 时会发生什么

    我的意思是一次调用多个具有相同功能的 requestAnimationFrame function Draw DoSomething function AFunc prepare something requestAnimationFram
  • 销毁 JQuery 可拖动对象

    我有一组可拖动的元素 如何删除可拖动功能 draggable draggable disable 对我来说不是一个选择 draggable draggable destroy 回报Uncaught TypeError Cannot read
  • ES6继承:使用`super`访问父类的属性

    JavaScript 的super关键字 当我在 Chrome Babel TypeScript 上运行代码时 得到了不同的结果 我的问题是哪个结果是正确的 规范的哪一部分定义了这种行为 下面的代码 class Point getX con
  • 模板中带有 ng-if 的 angularjs 指令

    我正在构建一个在模板内使用 ng if 的指令 奇怪的是 提供给链接函数的元素没有扩展ng if代码 它只是ng if的注释行 经过一番尝试 我发现通过将链接代码包装在 timeout 中似乎可以使其正常工作 但我想知道这是否不是正确的处理
  • webpack中动态加载外部模块失败

    我正在尝试建立以下架构 一个核心 React 应用程序 它具有一些基本功能 并且能够在运行时加载其他 React 组件 这些额外的 React 组件可以按需加载 并且它们在构建核心应用程序时不可用 因此它们不能包含在核心应用程序的捆绑包中
  • 如何为我的整个 Node.js 应用程序使用相同的 MySQL 连接?

    我有一个app js 我从那里运行我的整个应用程序 在 app js 内部 我require许多文件中都有代码 对于每个文件 我都这样做 var mysql require mysql var mclient mysql createCon
  • 扩展 RegExp 以获取文件扩展名

    我知道 已经有很多基于 RegExp 的解决方案 但是我找不到适合我需求的解决方案 我有以下函数来获取 URL 的各个部分 但我还需要文件扩展名 var getPathParts function url var m url match w
  • PDF 在 Safari 中隐藏 Jquery Modal

    这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题 在 IE 中 我在对话框中使用 iframe 解决了问题 所以它工
  • ThreeJS 中阴影的奇怪行为

    所以我有一个 ThreeJS 场景 并且添加了一些球体 多材质 我还添加了定向光 this light new THREE DirectionalLight 0xFFFFFF 1 this light position set 2 10 2
  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒

随机推荐

  • AWS Lambda 上的 Google-chrome

    是否可以在带有容器的 AWS Lambda 中使用 puppeteer 运行 Google chrome 而不是 Chromium 当我在浏览器中创建新页面时脚本卡住 const page await browser newPage 来自
  • 为什么 React JS 不自动为动态子项生成键?

    在编写 ReactJS 代码时 我必须为动态子项提供键 例如 render const options this state const availableOptions options map opt gt return
  • VSTS 包源不从上游源提取包 (nuget.org)

    我已经为我们的开发团队在 VSTS 上设置了一个新的团队项目 并且正在使用Package Management用于发布 NuGet 包的扩展 我还启用了公众nuget orgfeed 作为我们内部包 feed 的上游来源 按照推荐here
  • 引导导航栏后面的空间

    使用引导程序navbar 我试图弄清楚如何使其不隐藏主体部分的顶部 实际上 使用这里推荐的方法可以很好地解决这个问题 Twitter Bootstrap 顶部导航栏阻挡页面顶部内容 https stackoverflow com quest
  • 敏感 SSIS 包参数字符串中的特殊字符导致包无效

    我的 SSIS 包上有一个敏感字符串参数 用于存储远程服务器的密码 但是 当字符串值包含大括号时 作业代理会在配置该步骤的包参数时引发错误 Microsoft SQL Server Management Studio 在命令行参数中检测到错
  • 如何使用 PHP 发送 OPTIONS 请求

    有谁知道如何使用 PHP 发送 OPTIONS 请求 我找不到执行此操作的curl setopt 我正在使用 php 5 6 7 我已经弄清楚了 GET POST DELETE 和 PUT 只需要选项 我已经尝试过以下 hd 的答案 ch
  • 计算以字符串形式给出的算术表达式

    我正在开发一个项目 需要计算以字符串形式给出的算术表达式的值 这就是我选择使用的方式 即运行字符串直到符号相乘 在此期间 我保留乘法字符串之前的数字 如果这些数字之前有符号 我会重置字符串 最后 当我计算乘号时 我检查接下来会发生什么并将其
  • 如何在Eclipse中设置默认Maven的Java?

    如果我创建新的Maven项目于Eclipse并基于快速入门原型 它出现J2SE 1 5 in Java Build Path窗口和 1 5 英寸Java Compiler JDK Compliance window 所以 我通常必须手动将其
  • 如何从其他表填充表的外键

    我有以下表格 其中translation是空的 我正在尝试填充 translation id translated language id template id language id langname langcode template
  • AngularJS:绑定中的拼写错误有调试模式吗?

    我只是浪费了半个小时寻找结果
  • 实体框架 - Linq NOT IN 查询

    我见过其他几个帖子提出类似的问题 但坦率地说我很困惑 我正在尝试在 EntityFarmework 和 Linq 中执行以下 sql 语句 但无法让 NOT IN 和 UNION 工作 SELECT LmsTeam FROM LmsTeam
  • AutoMapper ForMember 忽略不起作用

    在 MVC 应用程序中复制相同实体类型 但希望忽略复制主键 对现有实体进行更新 但是在下面的地图中将 Id 列设置为忽略不起作用 并且 Id 被覆盖 cfg CreateMap
  • params 具有默认参数值的参数[重复]

    这个问题在这里已经有答案了 我见过params参数的次数比我能说的还要多 并且总是删除它而不考虑它的含义 现在我已经了解了它的目的 我刚刚了解到的是params参数必须是参数列表中的最后一个 但这是我对指定默认值的参数的了解 例子 MyMe
  • Font Awesome 可以与 Rails 7 中的导入映射一起使用吗?

    我是 Rails 7 的 importmap 的新手 文件说 https github com rails importmap rails您可以固定 JavaScript 模块 然后导入它 bin importmap pin react r
  • cordova 本地通知声音在 ios 和 Android 中不起作用

    我在用cordova plugin local notifications https github com katzer cordova plugin local notifications插入 现在我在 Android 和 iOS 中获
  • Team Foundation Server:将工作项分配给组而不是单个用户

    在 TFS 2010 中 是否有一种方法可以将工作项分配给组 即开发人员或设计人员 而不是单个用户 我还希望能够创建一个查询 以便我们也可以对该组进行过滤 是的你可以 如果您的组是可分配到的较大组的成员 那么它将显示在可分配用户的列表中 例
  • Grpc.Auth:无法从程序集“Grpc.Core.Api”加载类型“Grpc.Core.CallCredentials”

    Context 我正在尝试使用 Google 的 Cloud Natural Language API 我有我的服务帐户密钥 JSON 文件 并且正在尝试编写一个简单的 NET Core 应用程序 更具体地说是使用 NET Core 的 A
  • 如何滚动 ngGrid 以显示当前选择?

    我正在从 JavaScript 设置 ngGrid 的选择 调用gridOptions selectItem 我将 multiSelect 设置为 false 因此只选择了一行 我希望 ngGrid 自动滚动以显示新选择的行 但我不知道该怎
  • Android - 创建后台服务来接收PubNub消息

    我正在使用 PubNub API 来获取实时消息 我已经实现了代码来订阅我的频道并接收持续的消息 我只想在后台接收这些消息 即使我的应用程序未打开 我已经了解了 android 中的服务和广播接收器 但我不明白如何在 PubNub 中使用它
  • 使用 Dragstart PreventDefault 禁用浏览器默认图像拖动,但它也禁用我的拖动事件

    我尝试阻止浏览器默认图像在dragstart中拖动 但不知何故它也禁用了drag和dragend事件 无论如何 我可以禁用浏览器默认图像拖动 但它仍然会运行拖动和拖动结束事件 或者唯一的选择是使用背景图像 我不想这样做 因为我需要因此更改很