使用 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 禁用浏览器默认图像拖动,但它也禁用我的拖动事件 的相关文章

  • 我怎样才能让这个脚本在 WordPress 上运行?

    我有这个脚本 document ready function text1 click function this hide 代码html div class div1 p class text1 text to appear when th
  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小
  • JS 保留以零结尾的小数[重复]

    这个问题在这里已经有答案了 在JavaScript中 是否可以 锁定 十进制数 以保留以零结尾的 浮点数 例如 我有 2 个不同的数字 如下所示 伪代码 let a 1 0 let b 1 00 a b true should be fal
  • 如何在 React Native 上显示 SVG 文件?

    我想显示 svg 文件 我有一堆 svg 图像 但我找不到显示的方式 我尝试使用Image and Use的组成部分反应本机 svg https github com magicismight react native svg但他们不这样做
  • 全局传递 xhr onload 函数的值

    在我正在创建的应用程序中 我有以下 XMLHttpRequest 并且我正在尝试传递结果data在 的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j
  • 使用 JQuery 禁用和启用所有超链接

    我有以下禁用所有超链接的内容 但在事件发生后我想再次启用它们 我该如何执行此操作 a click function return false 我认为这不仅仅是将其设置为 true 那么简单 谢谢大家 不要以这种方式绑定 点击 处理程序 而是
  • 销毁 JQuery 可拖动对象

    我有一组可拖动的元素 如何删除可拖动功能 draggable draggable disable 对我来说不是一个选择 draggable draggable destroy 回报Uncaught TypeError Cannot read
  • 为什么我收到“在嵌套函数中通过 this 对类字段进行潜在无效的引用访问”错误

    在普通 JS 中 我的代码可以正常工作 对于这种情况 我想组件化我的Wall类应该在浏览器中显示用户上传的图像 同样 这在 vanilla JS 中正常工作 但在 JSX 中不起作用 我得到了一个potentially invalid re
  • 模板中带有 ng-if 的 angularjs 指令

    我正在构建一个在模板内使用 ng if 的指令 奇怪的是 提供给链接函数的元素没有扩展ng if代码 它只是ng if的注释行 经过一番尝试 我发现通过将链接代码包装在 timeout 中似乎可以使其正常工作 但我想知道这是否不是正确的处理
  • 如何使用新的analytics.js跟踪多个帐户?

    我需要使用 Google 的新的analytics js 跟踪一个页面上两个帐户的综合浏览量 有大量教程和示例如何使用较旧的 ga js 进行操作 但我发现的只是这个分析文档页面 https developers google com an
  • Web组件中嵌套槽的内容不可见

    我有一个 Web 组件 它应该接受任意元素来包装其内容 虽然我可以在 Chrome 开发工具中看到插槽已正确分配 但 DOM 中什么也没有出现 以前有人见过这个问题吗 定义 class ExampleParent extends HTMLE
  • javascript 是否有等效的 __repr__ ?

    我最接近Python的东西repr这是 function User name password this name name this password password User prototype toString function r
  • 扩展 RegExp 以获取文件扩展名

    我知道 已经有很多基于 RegExp 的解决方案 但是我找不到适合我需求的解决方案 我有以下函数来获取 URL 的各个部分 但我还需要文件扩展名 var getPathParts function url var m url match w
  • ChartJs:如何按时间值(而不是像素)以编程方式平移

    我使用的是chartJs 3 6 1 和 Chartjs plugin zoom 1 2 1 但我认为这并不重要 我有 2 个时间序列折线图 当我通过拖放平移一个图表时 我也想移动 平移另一个图表 为此 我为 graphA 启用了缩放 平移
  • 为什么 Node.js 应用程序只能从 127.0.0.1/localhost 访问?

    我本来打算教我的朋友介绍 Node 但是后来 我想知道为什么这个代码来自nodejs org var http require http http createServer function req res res writeHead 20
  • ThreeJS 中阴影的奇怪行为

    所以我有一个 ThreeJS 场景 并且添加了一些球体 多材质 我还添加了定向光 this light new THREE DirectionalLight 0xFFFFFF 1 this light position set 2 10 2
  • 在 JavaScript 函数的 Django 模板中转义字符串参数

    我有一个 JavaScript 函数 它返回一组对象 return Func id name 例如 我在传递包含引号的字符串时遇到问题 Dr Seuss ABC BOOk 是无效语法 I tried name safe 但无济于事 有什么解
  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒
  • MongoDB:javascript执行失败:无法在 src/mongo/shell/collection.js 保存 DBQuery 对象

    在 MongoDb 中 当我尝试修改集合中的现有文档时 它会生成以下异常 javascript execution failed can t save a DBQuery object at src mongo shell collecti
  • 如何在 Jquery/Javascript 中绑定模糊和更改,但只触发一次函数?

    我试图在选择元素更改时触发函数 由于 Ipad 在 on change 方面遇到问题 我还想绑定到 blur 这在 Ipad 上工作得很好 但是我不希望两个事件都触发该函数两次 所以我需要某种挂钩来确保两个事件是否都触发change and

随机推荐

  • 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事件 无论如何 我可以禁用浏览器默认图像拖动 但它仍然会运行拖动和拖动结束事件 或者唯一的选择是使用背景图像 我不想这样做 因为我需要因此更改很