拖放区内的 CSS3 过渡答案

【问题标题】：CSS3 transition within dropzone拖放区内的 CSS3 过渡
【发布时间】：2015-06-10 03:54:25
【问题描述】：

我的 Dropzone 表单的 dz-message 元素中有两个元素。一个隐藏在视线之外（使用overflow:hidden），一个是可见的。

当表单获得dz-drag-hover 类时，当dz-message 元素使用CSS 过渡向上移动时，第二个元素变得可见。

这是 insi dropzone 元素的结构：

<form class="new-album-dropzone" id="albumDropzone">
    <div class="dz-message">
        <div class="dz-message-empty">
            <div>
                <p>The best way to create collaborative image collections.<br/>No account required.</p>
                <p class="instruction">Drop in some images to get started.</p>
                <p>Or <a href="/sign-in" class="signInModalLink">click here to sign in</a>.</p>
            </div>
        </div>
        <div class="dz-message-hovered">
            <div>
                <p><span class="instruction">Drop it</span> like it's hot</p>
            </div>
        </div>
    </div>
</form>

看到dz-message-hovered 和dz-message-empty 元素中的<div> 了吗？当光标最终进入他们的身体时，它会导致 dropzone 认为 dragend 已经发生。这意味着dz-drag-hover 类已从表单中移除，dz-message 元素开始向下转换。

我制作了一个视频来帮助说明我的意思：http://quick.as/7OYPiG4Q1 - 看看当内部元素被拖过去时它是如何闪烁的？

在不分叉 dropzone 的情况下，我有什么简单的方法可以防止 dropzone 认为我已经完成拖动了吗？

【问题讨论】：

标签： javascript css dropzone.js

【解决方案1】：

我想出了一个解决方案！

我使用常规 Dropzone 选项（无需破解！）覆盖了 dragend 和 dragleave 函数，以检查鼠标事件是否发生在 dropzone 表单元素的边界之外。有点像这样：

    this.dropzone = new Dropzone(this.$('#albumDropzone')[0], {
        ... other options ...
        dragend: function(e) {
            if (mouseEventOutside(e, $(this.element))) {
                return this.element.classList.remove('dz-drag-hover');
            }
        },
        dragleave: function(e) {
            if (mouseEventOutside(e, $(this.element))) {
                return this.element.classList.remove('dz-drag-hover');
            }
        }
    });

为了处理当我将鼠标悬停在下部元素上时发生的闪烁，嗯，只要dragenter 发生就会改变，我是通过dragenter 事件回调引起的。我只是在那里检查输入的元素是否是dz-message 元素，如果是，它不会做任何导致闪烁的事情。使用正则表达式完成：if (/dz-message/g.test(e.toElement.className)) { }。

感谢任何花时间阅读的人:) 我希望这会有所帮助。

【讨论】：