dropzone中的CSS3转换

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

当表格获得dz-drag-hover类时，当使用CSS转换向上移动dz-message元素时，第二个元素将变为可见。

这是INSI悬浮窗元件的结构：

<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认为我完成拖动？

来源

2015-04-05 basicallydan

我想出了一个解决方案！

我使用常规的Dropzone选项（不需要黑客入侵）来检查是否发生鼠标事件发生在dropzone表单元素的边界之外，从而忽略了dragend和dragleave函数。它看起来有点像这样：

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)) { }。

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

来源

2015-04-05 17:56:46 basicallydan

dropzone中的CSS3转换

回答

相关问题