jQuery dragenter o dragover per includere i bambini

Question

Attualmente sto lavorando a uno script di caricamento e, naturalmente, dispone di funzionalità di trascinamento della selezione.

Tuttavia sto cercando di ottenere questo al lavoro quando ho trascina un file sul mio elemento si aggiunge la classe drag-over però perché il mio elemento ha figli è costantemente a sparare perché entra ed esce dalla elemento.

Che cosa voglio sapere è come è possibile espandere il *dragenter*/*dragover* per includere anche gli elementi principali figli?

Ecco una versione tagliata verso il basso del mio codice (si prega di notare che ho disattivato l'input file):

$(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

risolto !!

Si tratta di un semplice caso di invece su su ('DragEnter') avevo bisogno di usare bind ('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

Si può semplicemente nascondere gli elementi dalla interazione del mouse con la designazione:

ad es. aggiungere questo agli elementi figlio:

pointer-events: none; 

Purtroppo il supporto non è grande in IE per questo: http://caniuse.com/#feat=pointer-events