草庐IT

javascript - 将元素拖放到 iframe 中。可放置区域坐标错误，碰撞错误

coder 2024-05-16 原文

我需要在 Web 应用程序中实现网页中存在的元素和 iframe 中的元素之间的拖放功能(在你开始提示 iframe 之前，出于技术原因我需要它，这不是一个选项)。

我在页面中有一些元素可以拖到 iframe 内的目标可放置元素中。

我已经设法用 jQuery UI 和 YUI 做到了，尽管这两个库都存在同样的问题:目标元素(可放置目标)坐标被误解，两个库考虑的放置区域都是错误的，并不代表实际可放置的对象，因此被拖动的对象和放置的元素之间的碰撞完全困惑了。这就像库看到可放置元素位于它有效所在的另一个位置。

我认为这是由于 iframe 没有位于页面的左上角，而是位于中间。我认为这是因为我读过很多人提示这个问题，如果 iframe 位于左上角，问题就会消失。有人建议可以根据 screenX 和 screenY 计算可放置元素的坐标，而不是 clientX 和 clientY，这可能是问题的原因，没有考虑元素在 iframe 中，因此坐标不同在 iframe 之外的其他元素之间。

因此，由于似乎没有办法直接使用库功能来解决这个问题，而且我真的没有时间尝试所有可用的库，所以我正在考虑通过修改(修补)相关库的内部功能。

问题是:

1) 以前是否有人遇到过这种行为，并设法解决了这个问题？或者，是否有一个图书馆能够完美地做到这一点？

2) 有没有办法使用库本身的方法和功能来解决这个问题？如果没有，

3) 有人知道库的哪一部分计算可放置区域坐标，以便我可以将其修复为最后的极端选项吗？

在此先致谢，我们将不胜感激!

编辑

这个 fiddle 演示了这个问题。尝试将绿色方 block 移到红色方 block 内(在 iframe 内)。你会注意到两个方 block 之间的碰撞是错误的。

http://jsfiddle.net/DQdZ9/23/

最佳答案

这不是“银弹”，但我会继续发布它作为答案，但我不确定它对您有多大值(value)。我在 jQuery UI 中找到了一个关键函数，它可能正是您正在寻找的。它在$.ui.ddmanager(拖放管理器)中，函数是prepareOffsets。这一行:

m[i].offset = m[i].element.offset();

似乎是设置偏移量以供实际放置元素时使用的那个。这可能是一个可以根据可放置元素是否为 iframe 的子元素来调整结果偏移量的地方。

它上面还有另一个函数 $.ui.intersect 执行逻辑以查看 draggable 和 droppable 是否相互相交。

我使用的是最新版本的 jQuery UI，文件是 jquery-ui-1.8.14.custom.js，第 2012-2029 行。如果您获得单个可放置文件本身，jquery.ui.droppable.js，它位于第 203-220 行。这些是开发文件，而不是最小文件。

关于javascript - 将元素拖放到 iframe 中。可放置区域坐标错误，碰撞错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6817758/

javascriptiframesection的jquery-uidrag-and-dropyui

有关javascript - 将元素拖放到 iframe 中。可放置区域坐标错误，碰撞错误的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  3. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  4. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  5. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  6. ruby-on-rails - 错误 : Error installing pg: ERROR: Failed to build gem native extension - 2

    我克隆了一个rails仓库，我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby​​'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe

  7. ruby - ＃之间？ Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  8. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  9. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  10. arrays - 这是 Ruby 中 Array.fill 方法的错误吗？ - 2

    这个问题在这里已经有了答案:Arraysmisbehaving(1个回答)关闭6年前。是否应该这样，即我误解了，还是错误？a=Array.new(3,Array.new(3))a[1].fill('g')=>[["g","g","g"],["g","g","g"],["g","g","g"]]它不应该导致:=>[[nil,nil,nil],["g","g","g"],[nil,nil,nil]]

随机推荐