événements de pointeur: aucun; a déjà été implémenté, en débogage, le booléen continuait à basculer rapidement entre true et false pour les deux "dragging" et draggingOL "
Structure HTML
var dropFileApp = new Vue({ el: '#dropfile', data: { dragAndDropCapable: false, dragging : false, draggingOL : false, files: [], uploadPercentage: 0 }, // define methods under the `methods` object mounted(){ /* Determine if drag and drop functionality is capable in the browser */ this.dragAndDropCapable = this.determineDragAndDropCapable(); /* If drag and drop capable, then we continue to bind events to our elements. */ if( this.dragAndDropCapable ){ /* Listen to all of the drag events and bind an event listener to each for the fileform. */ ['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach( function( evt ) { /* For each event add an event listener that prevents the default action (opening the file in the browser) and stop the propagation of the event (so no other elements open the file in the browser) */ this.$refs.fileform.addEventListener(evt, function(e){ e.preventDefault(); e.stopPropagation(); }.bind(this), false); }.bind(this)); /* Add an event listener for drop to the form */ this.$refs.fileform.addEventListener('drop', function(e){ /* Capture the files from the drop event and add them to our local files array. */ for( let i = 0; i < e.dataTransfer.files.length; i++ ){ this.files.push( e.dataTransfer.files[i] ); this.getImagePreviews(); } console.log((this.files.length)) /* Instantly upload files */ this.submitFiles(); }.bind(this)); } }, methods: { /* Determines if the drag and drop functionality is in the window */ determineDragAndDropCapable(){ /* Create a test element to see if certain events are present that let us do drag and drop. */ var div = document.createElement('div'); /* Check to see if the `draggable` event is in the element or the `ondragstart` and `ondrop` events are in the element. If they are, then we have what we need for dragging and dropping files. We also check to see if the window has `FormData` and `FileReader` objects present so we can do our AJAX uploading */ return ( ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div ) ) && 'FormData' in window && 'FileReader' in window; }, /* Gets the image preview for the file. */ getImagePreviews(){ /* Iterate over all of the files and generate an image preview for each one. */ for( let i = 0; i < this.files.length; i++ ){ /* Ensure the file is an image file */ if ( /\.(jpe?g|png|gif)$/i.test( this.files[i].name ) ) { /* Create a new FileReader object */ let reader = new FileReader(); /* Add an event listener for when the file has been loaded to update the src on the file preview. */ reader.addEventListener("load", function(){ this.$refs['preview'+parseInt( i )][0].src = reader.result; }.bind(this), false); /* Read the data for the file in through the reader. When it has been loaded, we listen to the event propagated and set the image src to what was loaded from the reader. */ reader.readAsDataURL( this.files[i] ); }else{ /* We do the next tick so the reference is bound and we can access it. */ this.$nextTick(function(){ this.$refs['preview'+parseInt( i )][0].src = '/images/file.png'; }); } } }, /* Submits the files to the server */ submitFiles(){ /* Initialize the form data */ let formData = new FormData(); /* Iteate over any file sent over appending the files to the form data. */ for( var i = 0; i < this.files.length; i++ ){ let file = this.files[i]; formData.append('files[' + i + ']', file); } /* Make the request to the POST /file-drag-drop URL */ axios.post( '/file-drag-drop', formData, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: function( progressEvent ) { //Showing Loading }.bind(this) } ).then(function(){ console.log('SUCCESS!!'); }) .catch(function(){ console.log('FAILURE!!'); }); }, /* Removes a select file the user has uploaded */ removeFile( key ){ this.files.splice( key, 1 ); } } })
Fondamentalement après avoir fait glisser une image dans la balise DIV, la balise OL apparaîtra.
La balise OL n'a pas de glisser-déposer, j'ai donc ajouté Dragenter et laissé à OL
Quand j'ajoute le deuxième dragenter vers la balise OL, lorsque vous faites glisser une image dans la zone, le booléen de glisser-déplacer OL basculera rapidement entre vrai et faux à un intervalle de 0,5 s. Idem pour le css, afficher et afficher très rapidement.
J'ai essayé plusieurs méthodes, y compris un seul dragenter UNIQUEMENT, même problème. Le problème vient peut-être de v-show, je ne suis pas sûr.
a> Ci-dessus, l'image de la balise DIV Ci-dessus se trouve l'image de la balise OL
Javascript
<ol id="product-images" @dragenter="draggingOL=true" @dragleave="draggingOL=false"> <li v-for="(file, key) in files" style="pointer-events: none;"></li> </ol> <div v-show="files.length < 1 || draggingOL == true"> <div ref="fileform" :class="['next-upload-dropzone', dragging ? 'css1' : '', draggingOL ? 'css1 css2' : '']" @dragenter="dragging=true" @dragleave="dragging=false"> </div> </div>
Je vais continuer à tester, déboguer et mettre à jour ce fil. p>
4 Réponses :
La solution est de ne pas utiliser @dragleave
J'ai changé le booléen pour draggingOL en false lors du déclenchement manuel de la demande de publication pour l'image au lieu d'utiliser @dragleave.
J'ai eu un problème similaire. Cela a été résolu, vous devez empêcher le bouillonnement d'événements pour les événements Vue: Empêcher le bouillonnement d'événements dans Vue
<div v-on:dragleave.self="dragLeave($event)"> ... </div>
J'ai résolu le même problème dans mon code en faisant le suivant:
Et cela a fonctionné pour moi! J'espère que ça aide quelqu'un :)
Je l'ai résolu en ajoutant une superposition transparente à ma superposition:
<div style="position: relative" @dragenter.prevent.stop="dropzone = true" @dragover.prevent.stop="dropzone = true" > <!-- Bunch of other stuff here --> <div v-if="dropzone" class="dropzone" > <i class="material-icons">cloud_upload</i> <div class="dropzone_text">Drop files here</div> <!-- transparent, catches drop & dragleave events --> <div style="width: 100%; height: 100%; position: absolute" @drop.prevent.stop="dropzone = false" @dragleave.prevent.stop="dropzone = false" ></div> </div>
Bonne suggestion.
Il semble que votre
v-show
change de visibilité. Lorsque la visibilité change, leglisser-laisser
. Pouvez-vous créer un jsfiddle ou fournir un code exécutable qui isole le problème? Cela peut faciliter la fourniture d'une solution.@Daniel n'a pas pu faire fonctionner CSS, je pense que mon CSS est trop compliqué maintenant, hmm ok merci pour vos conseils sur v-show