javascript - 冲突的@Dragenter @Dragleave / v-show 事件不断快速触发
问题描述
指针事件:无;已经实现,在调试中,布尔值在“拖动”和“拖动OL”的真假之间快速切换
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
当我将第二个 dragenter 添加到 OL 标签时,当您将图像拖入该区域时,dragging 和 draggingOL 的布尔值将以 0.5s 的间隔在 true 和 false 之间快速切换。css 也一样,显示和取消显示非常迅速。
我尝试了几种方法,包括只有一个 Dragenter,同样的问题。也许问题出在v-show,我不确定。
Javascript
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事件防止事件冒泡: Prevent event bubbling in Vue
<div v-on:dragleave.self="dragLeave($event)">
...
</div>
推荐阅读
- c# - IronPython 2.7.8 中的 VISBRAIN
- reactjs - 组件的重新渲染是否会创建其子组件的新实例?
- angularjs - 如何为 AngularJS(版本 1)的 angular-ui/ui-calendar 设置默认月份?默认情况下,它将其设置为当前月份
- android - 如何比较两个不同的 Firebase 数据库子数据项
- swift - 如何为 NSPoint 返回一个未定义的值
- r-markdown - 如何强制 RMarkdown 文档中的 Tikz 显示西里尔文字?
- python - manage.py runserver 打开 pycharm 而不是运行服务器
- c++ - 我的复制构造函数没有被调用
- javascript - PrimeNG 确认对话框无法点击,锁屏
- angular - 如何在 Angular 6 中使用 take(1)?