个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
25
4
在编写接受文件输入的网络应用程序时，我想使用拖放功能，但我不希望页面上只有一个小的放置区。我认为如果您可以放在页面上的任何位置会更方便。幸运的是，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/
25
4
0
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
我已经完成了注册页面，并且运行顺利。 现在我需要弄清楚登录部分。我想要它，所以一旦用户登录，它就会将他们带到私有(private)页面，只有登录的用户才能看到。 它不需要针对每个用户进行个性化设置，只
出于个人好奇心，我目前正在学习区 block 链的工作原理。我正在学习这门类(class)，现在我已经使用网络套接字设置了点对点连接。区 block 链应用程序的多个实例现在可以使用这些套接字运行并相
我读过: The blockchain database isn’t stored in any single location, meaning the records it keeps are t
Closed. This question needs to be more focused。它当前不接受答案。 想要改善这个问题吗？更新问题，使它仅关注editing this post的一个问题。
如果我在区块链中进行交易，是否只有在将交易添加到区块链后才会进行比特币转账？如果是这样，挖掘区块可能需要时间，并且无法进行紧急付款。那么这不是区块链的劣势吗？ 最佳答案 如果您不重视能够在没有第三方(
Closed. This question needs to be more focused。它当前不接受答案。 想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题
根据我的理解，我读到的关于区 block 链的所有内容都表明，即使在私有(private)区 block 链上，每个参与者都可以查看所有交易。我看到它提到区 block 链的一个用例可能是共享医疗数据
服务器正在发送消息时，如何阻止连接到服务器的一个IP地址。我的发送消息选项程序如下所示。 private void buttonSendMsg_Click(对象发送者，EventArgs e) {
iam正在hadoop apache 2.7.1上工作 和iam添加大小不超过100 Kb的文件 所以如果我将块大小配置为1 mb或默认值是 128兆字节 不会影响我的文件，因为它们只会保存在一个块中
我有一个docker-compose文件here。我可以连接到7051并注册我的chaincode客户端，但是当我尝试连接到localhost:7050时，我得到一个错误，该错误在使用curl测试时如
从数据类型来看，区 block 链是单链表吗？因为每个 block 都使用哈希引用前一个 block 。 或者它是某种树？ 最佳答案 区 block 链表示为单链表的方式。每个 block 都有前一个
我无法理解给定代码片段的 hashcode() 部分。 我尝试过搜索它，但我无法弄清楚。 this.hash = Arrays.hashCode(new Integer[]{data.has
已关闭。这个问题是 not about programming or software development 。目前不接受答案。 这个问题似乎不是关于 a specific programming
我正在通过一些在线示例学习区 block 链。我有这个高级代码，我用以前的哈希创建一个新 block ，然后向它添加一个事务，然后生成 block 的困难哈希(有 8 个前导零) Block blo
我们有一个包含一些数字商品的网站。从那里购买的用户需要用 BTC 购买一些信用。在他购买信用卡后，脚本必须将他用 BTC 购买的货币 (USD) 数量加载到他的账户中。 所以这里我们有 HTML 表单
我目前正在使用 enumerateObjectsUsingBlock block 在 subview 下进行枚举，我怎样才能确定 block 的完成？ 下面是区 block 内容 [self.view
我通常将显示 block 放在链接上，以使按钮的所有 div 都处于事件状态，而不仅仅是文本。但在这种情况下，我需要在 ul li 中使用 display:inline-block 我认为这会禁用其他
我正在尝试创建付款账单并通过电报机器人发送给我的客户:我正在使用区 block 链 API V2-https://blockchain.info/api/api 接收。我的代码是: xpub='***
有个面试题:区 block 链和不可变链表有什么区别？ 我回答他们是相同的技术，然后没有通过测试。请纠正我的错误。 最佳答案 链表中的每一项通常通过指针或内存地址指向链表中的下一项。 区 block
我是一名优秀的程序员,十分优秀！