충돌 @Dragenter @Dragleave / v-show 이벤트가 계속 빠르게 발생함

충돌 @Dragenter @Dragleave / v-show 이벤트가 계속 빠르게 발생함

포인터 이벤트: 없음; 이미 구현된 디버그에서 부울은 "끌기"와 "끌기"와 "끌기" 모두에 대해 계속 true와 false 사이를 빠르게 전환했다.

HTML 구조

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

기본적으로 DIV 태그로 이미지를 끌면 OL 태그가 나타난다.

OL 태그에 끌 수 있는 항목이 없으므로 Dragenter를 추가한 후 OL로 이동

두 번째 드래그 엔터를 OL 태그에 추가하면 이미지를 영역으로 끌면 끌기와 끌기의 부울이 모두 표시됨OL은 0.5초 간격으로 빠르게 true와 false로 전환된다.css, show and un show는 매우 빠르게.

드래그엔터터를 하나만 포함해도 몇 가지 방법을 시도했는데, 같은 문제였습니다.아마 v-show에 문제가 있는 것 같아, 잘 모르겠어.

위는 DIV 태그 이미지 위는 OL 태그 이미지

자바스크립트

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 );
  }
}
})

나는 이 스레드를 계속 테스트하고 디버그하고 업데이트 할 것이다.

나도 비슷한 문제가 있었어.해결되었다. Vue 이벤트에서 이벤트 버블을 방지해야 한다: Vue에서 이벤트 버블을 방지하십시오.

<div v-on:dragleave.self="dragLeave($event)">
    ...
</div>

내 코드에서 다음 작업을 수행하는 동안 동일한 문제를 해결했다.

1. "v-on:draglev" 제거됨
2. 달려라, 드레이깅파일이 업로드되었을 때(또는 방금 선택되었을 때) OL=false'
3. 'v-on:mouselev="draggingOL=false"가 추가됨

그리고 그것은 나에게 효과가 있었어!누군가에게 도움이 되길 바라 :)

내 오버레이에 투명 오버레이를 추가하여 해결했다.

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

해결책은 @draglev를 사용하지 않는 것이다.

끌기 위해 부울을 변경했다.@draglev를 사용하는 대신 수동으로 이미지에 대한 사후 요청을 실행한 후 OL을 false로 설정하십시오.

참조URL: https://stackoverflow.com/questions/54014788/conflicting-dragenter-dragleave-v-show-events-keep-firing-rapidly