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轉換

回答

相關問題