Изменение свойств CSS элемента во время перетаскивания файла

Изменение свойств CSS элемента во время перетаскивания файла

10.03.2020 07:47:19 Просмотров 12 Источник

Я настроил окно перетаскивания в своем веб-приложении Vue JS. Элемент представляет собой простой div, который обрабатывает файл, когда он перетаскивается и падает на него.

Я использовал его https://www.raymondcamden.com/2019/08/08/drag-and-drop-file-upload-in-vuejs в качестве ориентира.

HTML:

<div v-if="status == 'upload'">
    <h3> Please fill the data sheet and upload it here!</h3>
    <div class="downbox" @drop.prevent="addFile" @dragover.prevent>
        <span style="font-size: 60px"><font-awesome-icon icon='cloud-upload-alt'/></span>
        <br>
        Click to Browse 
        <br>
        or Drag and Drop a File Here
    </div>
</div>

JS:

addFile: function(e){
            let droppedFiles = e.dataTransfer.files;
            if ((droppedFiles[0].name).slice(-5) !== '.xlsx') {
                this.$swal({
                    text: "Please upload a file of type .xlsx",
                    title: "Incorrect File Type!",
                    icon: "error",
                })
                this.status = 'upload'
            }
            else {
            this.file = droppedFiles
            this.status = 'show'
            }

        },

removeFile: function(){
    this.file = null
    this.status = 'upload'
}

CSS:

    .downbox {
  width: 500px;
  border-radius: 50px;
  border-width: 6px;
  border-color: white;
  border-style: dashed;
  background-color: #7a2ab3;
  padding: 10px;
  font-size: 25px;
  font-weight: bold;
  transition: 0.6s;
  margin-left: auto;
  margin-right: auto;
}

.downbox:hover{
  background-color: #c56bc5;
}

Как вы можете видеть, цвет фона изменяется при наведении курсора мыши на div.

Однако, когда я перетаскиваю файл на div, это изменение цвета не отображается. Поэтому я не знаю, не считается ли это ":hover", если вы щелкаете мышью, перетаскивая файл.

В любом случае я хотел бы знать, что я могу добавить в код, чтобы изменить свойство CSS background-color, когда я перетаскиваю файл на div.

У вопроса есть решение - Посмотреть?

Ответы - Изменение свойств CSS элемента во время перетаскивания файла / Changing CSS properties of an element while a file is being dragged

Daniel Brambila

10.03.2020 08:18:38

Проверьте это решение, по-видимому, вы должны использовать координаты X и Y:

https://stackoverflow.com/a/8615260/12448004

Serg

10.03.2020 10:20:46

Я использую следующее решение (упрощенное здесь):

<template>
   <div ref="drag" :class="{over: isOver}">
      ...
   </div>
</template>


<script>
...
mounted () {
   // add the needed event listeners to the container
   this.$refs.drag.addEventListener("dragover", () => {
        this.isOver = true; // add class on drag over
      });
   this.$refs.drag.addEventListener("dragleave", () => {
        this.isOver= false; // remove class on drag leave
      }); 
}

</script>
<css>
.over {...}
</css>
Закрыть X