在编写接受文件输入的网络应用程序时，我想使用拖放功能，但我不希望页面上只有一个小的放置区。我认为如果您可以放在页面上的任何位置会更方便。幸运的是，window.ondrop 事件会在页面上的任何位置触发，但我想要一些奇特的效果来向用户直观地展示拖放是可能的。
要做到这一点，只需要检测文件何时被拖入窗口，以及何时被拖出，以触发显示用户该应用程序启用了拖动。事实证明，拖动事件并不是那么方便。我假设 window.ondragenter 只会在用户进入页面时触发一次。然后当您离开窗口时，它会触发 window.ondragleave。错误的。当鼠标在页面中的子元素上移动时，它会不断触发。
我查看了事件对象中可用的属性，试图找到任何可以隔离我需要的东西，但没有任何效果。我得到的最进一步的是能够更改 body 的背景颜色。并且仅当页面上没有其他内容时。
大量的文件上传网站都做到了。例如 Imgur 和 WeTransfer。他们的网站都是意大利面编码和压缩到不可读的程度，我通过谷歌搜索找不到任何关于这个主题的内容。
那么如何做到这一点呢？
最佳答案
诀窍是使用覆盖整个页面的放置区，并缓存 target的 window.ondragenter与 target 比较的 window.ondragleave .
首先是降落区:
<style>
div.dropzone
{
/* positions to point 0,0 - required for z-index */
position: fixed; top: 0; left: 0;
/* above all elements, even if z-index is used elsewhere
it can be lowered as needed, but this value surpasses
all elements when used on YouTube for example. */
z-index: 9999999999;
/* takes up 100% of page */
width: 100%; height: 100%;
/* dim the page with 50% black background when visible */
background-color: rgba(0,0,0,0.5);
/* a nice fade effect, visibility toggles after 175ms, opacity will animate for 175ms. note display:none cannot be animated. */
transition: visibility 175ms, opacity 175ms;
}
</style>
<!-- both visibility:hidden and display:none can be used,
but the former can be used in CSS animations -->
<div style="visibility:hidden; opacity:0" class="dropzone"></div>
即使拖放区将覆盖整个页面，使用 visibility:hidden或 display:none会将其隐藏起来。我用了visibility:hidden以便 CSS 动画可用于动画转换。
分配事件
<script>
/* lastTarget is set first on dragenter, then
compared with during dragleave. */
var lastTarget = null;
window.addEventListener("dragenter", function(e)
{
lastTarget = e.target; // cache the last target here
// unhide our dropzone overlay
document.querySelector(".dropzone").style.visibility = "";
document.querySelector(".dropzone").style.opacity = 1;
});
window.addEventListener("dragleave", function(e)
{
// this is the magic part. when leaving the window,
// e.target happens to be exactly what we want: what we cached
// at the start, the dropzone we dragged into.
// so..if dragleave target matches our cache, we hide the dropzone.
// `e.target === document` is a workaround for Firefox 57
if(e.target === lastTarget || e.target === document)
{
document.querySelector(".dropzone").style.visibility = "hidden";
document.querySelector(".dropzone").style.opacity = 0;
}
});
</script>
流程如下:您将文件拖到窗口上，window.ondragenter 会立即触发。 target设置为根元素，<html> .然后，您立即取消隐藏覆盖整个页面的放置区。 window.ondragenter将再次开火，这次目标是你的降落区。每次dragenter事件触发，它将缓存目标，因为这将是匹配最后一个 window.ondragleave 的目标当您拖出窗口时触发的事件。
为什么会这样？我不知道，但那是怎么做的。这几乎是唯一在用户拖出页面时触发的工作方法。
我相信它是有效的，因为一旦 dropzone 被取消隐藏，它将总是是最后一个目标。它覆盖了页面的每个像素，甚至是 <html>。标签。此方法依赖于离开窗口时的 dragleave 触发。 不幸的是有一个bug in Firefox这会阻止它正常工作。请为它投票，以便它尽快得到修复。从 Firefox 57.0.2 开始，dragleave 似乎可以正常触发。但是，需要一个解决方法，检查 document而不是缓存的元素:
if(e.target === lastTarget || e.target === document)
Here's a JSBin of it in action .经测试可在最新的 Chrome、Firefox、Edge 和 IE11 中运行。
关于javascript - 整个页面作为拖放区，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28226021/
我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？ 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere
对于作为String#tr参数的单引号字符串文字中反斜杠的转义状态，我觉得有些神秘。你能解释一下下面三个例子之间的对比吗？我特别不明白第二个。为了避免复杂化，我在这里使用了'd'，在双引号中转义时不会改变含义("\d"="d")。'\\'.tr('\\','x')#=>"x"'\\'.tr('\\d','x')#=>"\\"'\\'.tr('\\\d','x')#=>"x" 最佳答案 在tr中转义tr的第一个参数非常类似于正则表达式中的括号字符分组。您可以在表达式的开头使用^来否定匹配(替换任何不匹配的内容)并使用例如a-f来匹配一
当我创建一个Rails应用程序时，控制台:railsnewfoo我的代码可以使用字符串“foo”吗？puts"Yourapp'snameis"+app_name_bar 最佳答案 Rails.application.class将为您提供应用程序的全名(例如YourAppName::Application)。从那里您可以使用Rails.application.class.parent获取模块名称。 关于ruby-on-rails-应用程序的名称是否可以作为变量使用？，我们在StackOve
我在搜索我的值是方法的散列时遇到问题。我只是不想运行plan_type与键匹配的方法。defmethod(plan_type,plan,user){foo:plan_is_foo(plan,user),bar:plan_is_bar(plan,user),waa:plan_is_waa(plan,user),har:plan_is_har(user)}[plan_type]end目前如果我传入“bar”作为plan_type，所有方法都会运行，我怎么能只运行plan_is_bar方法呢？ 最佳答案 这个变体怎么样？defmethod
我正在尝试使用以下代码通过将ffmpeg实用程序作为子进程运行并获取其输出并解析它来确定视频分辨率:IO.popen'ffmpeg-i'+path_to_filedo|ffmpegIO|#myparsegoeshereend...但是ffmpeg输出仍然连接到标准输出并且ffmepgIO.readlines是空的。ffmpeg实用程序是否需要一些特殊处理？或者还有其他方法可以获得ffmpeg输出吗？我在WinXP和FedoraLinux下测试了这段代码-结果是一样的。 最佳答案 要跟进mouviciel的评论，您需要使用类似pope
require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
有没有办法跳过CSV文件的第一行，让第二行作为标题？我有一个CSV文件，第一行是日期，第二行是标题，所以我需要能够在遍历它时跳过第一行。我尝试使用slice但它会将CSV转换为数组，我真的很想将其读取为CSV，以便我可以利用header。 最佳答案 根据您的数据，您可以使用另一种方法和skip_lines-option此示例跳过所有以#开头的行require'csv'CSV.parse(DATA.read,:col_sep=>';',:headers=>true,:skip_lines=>/^#/#Markcomments!)do|
我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.
据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b