jQuery dragenter lub dragover na rzecz dzieci

Question

Obecnie pracuję nad skryptem do przesyłania i oczywiście ma on funkcje przeciągania i upuszczania.

Jednak staram się uzyskać to do pracy, kiedy przeciągnij plik nad moim elementu dodaje klasa przeciągnij nad jednak ponieważ mój element ma dzieci jest stale odpalane ponieważ wchodzi i opuszcza element.

Co chcę wiedzieć to jak mogę rozszerzyć *dragenter*/*dragover*, aby uwzględnić również główne elementy dzieci?

Tutaj jest przycięty dół wersja mojego kodu (proszę pamiętać, że zostały wyłączone wejście pliku):

$(document).ready(function(){ 
 
    $(window).on('dragenter', function(){ 
 
     $(this).preventDefault(); 
 
    }); 
 
    $('#drag-and-drop-zone').on('dragenter', function(){ 
 
     $(this).addClass('drag-over'); 
 
    }); 
 
    $('#drag-and-drop-zone').on('dragleave', function(){ 
 
     $(this).removeClass('drag-over'); 
 
    }); 
 
});

.uploader 
 
{ 
 
    width: 100%; 
 
    background-color: #f9f9f9; 
 
    color: #92AAB0; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    padding: 30px 0px; 
 
    margin-bottom: 10px; 
 
    border-radius: 5px; 
 
    font-size: 200%; 
 
    box-shadow: inset 0px 0px 20px #c9afb2; 
 
    cursor: default; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
.uploader div.or { 
 
    font-size: 50%; 
 
    font-weight: bold; 
 
    color: #C0C0C0; 
 
    padding: 10px; 
 
} 
 

 
.uploader div.browser label { 
 
    background-color: #ffffff; 
 
    border: 2px solid #f44; 
 
    padding: 5px 15px; 
 
    color: #f44; 
 
    padding: 6px 0px; 
 
    font-size: 40%; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    border-radius: 2px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: block; 
 
    width: 300px; 
 
    margin: 20px auto 0px auto; 
 
    transition: all 0.3s linear 0s; 
 
} 
 

 
.uploader div.browser span { 
 
    cursor: pointer; 
 
} 
 

 
.uploader div.browser input { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    border: solid transparent; 
 
    border-width: 0 0 100px 200px; 
 
    opacity: .0; 
 
    filter: alpha(opacity= 0); 
 
    direction: ltr; 
 
    cursor: pointer; 
 
} 
 

 
.uploader div.browser label:hover { 
 
    background-color: #f44; 
 
    color: #fff; 
 
    border: 2px solid #fff; 
 
} 
 

 
.drag-over{ 
 
    border: 2px solid #00aef0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="uploader" id="drag-and-drop-zone"> 
 
    <div>Drag &amp; Drop Images Here</div> 
 
    <div class="or">-or-</div> 
 
    <div class="browser"> 
 
     <label> 
 
      <span>Select Image</span> 
 
      <input type="file" title="Click to add Images" accept="image/*" name="files" disabled="true"> 
 
     </label> 
 
    </div> 
 
</div>

Answer 1

rozwiązać go !!

Jest to prosta sprawa a nie na on ('dragenter') że konieczne użycie wiązania ('dragover')

$(document).ready(function(){ 
 
    $(window).on('dragenter', function(){ 
 
     $(this).preventDefault(); 
 
    }); 
 
    $('#drag-and-drop-zone').bind('dragover', function(){ 
 
     $(this).addClass('drag-over'); 
 
    }); 
 
    $('#drag-and-drop-zone').bind('dragleave', function(){ 
 
     $(this).removeClass('drag-over'); 
 
    }); 
 
});

.uploader 
 
{ 
 
    width: 100%; 
 
    background-color: #f9f9f9; 
 
    color: #92AAB0; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    padding: 30px 0px; 
 
    margin-bottom: 10px; 
 
    border-radius: 5px; 
 
    font-size: 200%; 
 
    box-shadow: inset 0px 0px 20px #c9afb2; 
 
    cursor: default; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
.uploader div.or { 
 
    font-size: 50%; 
 
    font-weight: bold; 
 
    color: #C0C0C0; 
 
    padding: 10px; 
 
} 
 

 
.uploader div.browser label { 
 
    background-color: #ffffff; 
 
    border: 2px solid #f44; 
 
    padding: 5px 15px; 
 
    color: #f44; 
 
    padding: 6px 0px; 
 
    font-size: 40%; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    border-radius: 2px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: block; 
 
    width: 300px; 
 
    margin: 20px auto 0px auto; 
 
    transition: all 0.3s linear 0s; 
 
} 
 

 
.uploader div.browser span { 
 
    cursor: pointer; 
 
} 
 

 
.uploader div.browser input { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    border: solid transparent; 
 
    border-width: 0 0 100px 200px; 
 
    opacity: .0; 
 
    filter: alpha(opacity= 0); 
 
    direction: ltr; 
 
    cursor: pointer; 
 
} 
 

 
.uploader div.browser label:hover { 
 
    background-color: #f44; 
 
    color: #fff; 
 
    border: 2px solid #fff; 
 
} 
 

 
.drag-over{ 
 
    border: 2px solid #00aef0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="uploader" id="drag-and-drop-zone"> 
 
    <div>Drag &amp; Drop Images Here</div> 
 
    <div class="or">-or-</div> 
 
    <div class="browser"> 
 
     <label> 
 
      <span>Select Image</span> 
 
      <input type="file" title="Click to add Images" accept="image/*" name="files" disabled="true"> 
 
     </label> 
 
    </div> 
 
</div>

Answer 2

Można po prostu ukryć elementy z interakcji myszy z stylizacji:

np. dodać do elementów podrzędnych:

pointer-events: none; 

Niestety wsparcie nie jest wielki w IE na to: http://caniuse.com/#feat=pointer-events