jQuery ड्रैगेंटर या ड्रैगओवर बच्चों को शामिल करने के लिए

Question

मैं इस समय एक अपलोड स्क्रिप्ट पर काम कर रहा हूं, और निश्चित रूप से इसमें ड्रैग और ड्रॉप क्षमताएं हैं।

हालांकि मैं इस पाने के लिए काम करने के लिए जब मैं अपने तत्व पर एक फ़ाइल खींचें यह कहते कोशिश कर रहा हूँ वर्ग ड्रैग से अधिक लेकिन क्योंकि मेरे तत्व बच्चों यह लगातार फायरिंग कर रहा है क्योंकि यह प्रवेश करती है और छोड़ देता है तत्व।

मैं क्या जानना चाहता हूं मैं मुख्य तत्व बच्चों को शामिल करने के लिए *dragenter*/*dragover* का विस्तार कैसे कर सकता हूं?

यहाँ (कृपया ध्यान दें मैं फ़ाइल इनपुट निष्क्रिय कर दिया है) मेरे कोड का एक कांट छांट संस्करण है:

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

यह हल !!

यह ('dragenter') पर बजाय पर का एक सरल मामले मैं बाँध ('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

आप बस स्टाइल के साथ माउस बातचीत से तत्व छिपा सकते हैं:

उदाहरण बच्चे तत्वों से जोड़ें:

pointer-events: none; 

दुर्भाग्य से समर्थन नहीं महान IE में इस बात के लिए है: http://caniuse.com/#feat=pointer-events