- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
指针事件:无;已经实现了,在调试中, bool 值在“拖动”和“拖动OL”的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
当我将第二个 dragenter 添加到 OL 标签时,当您将图像拖入该区域时, dragging 和 draggingOL 的 bool 值将以 0.5s 的间隔快速在 true 和 false 之间切换。 CSS 也一样,非常快速地显示和取消显示。
我尝试了几种方法,包括只有一个 dragenter ONLY,同样的问题。也许问题出在 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>
关于javascript - 冲突的@Dragenter @Dragleave/v-show 事件持续快速触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54014788/
我有一个 dragenter 的工作示例和 dragleave突出显示应放置文件的区域的事件。本例 works correctly . 现在如果我只添加一个 在我的 dragenter 区域内,hig
概述 我有以下 HTML 结构,并附上了 dragenter和 dragleave 的事件元素。 this is some text
我正在编写一个 WPF 应用程序,在应用程序的控件中支持拖放,并且还在我的桌面文件和我的应用程序之间拖放。我用装饰器来改变我的鼠标光标。 控件之间的内部拖放操作没有问题。问题是桌面文件和我的应用程序之
我在使用“dragstart”、“dragleave”事件的浏览器上处理拖动事件。当仅添加宽度属性时,Internet Explorer 11 中的行为非常不同。一旦为元素指定了宽度属性,dragLe
请在 - http://jsfiddle.net/fSB32/2/ 查看演示 我的意图是在 document 上触发拖动事件时出现叠加层。因此,允许用户将图像拖放到文档的任何位置。当他这样做时,会出现
我正在尝试跟踪整个屏幕的 dragenter/leave,到目前为止,这在 Chrome/Safari 中运行良好,由来自 https://stackoverflow.com/a/10310815/6
我遇到的问题是当悬停该元素的子元素时会触发该元素的 dragleave 事件。另外,dragenter 在再次悬停父元素时不会触发。 我做了一个简化的 fiddle :http://jsfiddle.
我在 Canvas 上有一个拖放操作,当一个对象被拖入和拖出它时,它应该做一些事情。我的问题是 DragEnter/DragLeave 事件在鼠标将对象移动到它上面时不断触发,而不仅仅是在进入/退出时
从父控件拖动到子控件时,我收到 DragLeave 事件。我只希望在超出控件范围时获得此事件。我该如何实现? 请引用这个简单的示例应用程序。 Hilight and Dra
我之所以注意到这一点,是因为我错误地尝试将 DragEventHandler 附加到 DragLeave 事件。我惊讶地发现 DragLeave Event 就像一个通用的 EventHandler。
自定义 UserControl ChartControlShelf 包含一个 TableLayoutPanel 和 3 个子控件,所有类型都是 Panel。 children 没有 EventHand
在拖放中,dragLeave 事件有时会在 drop 事件之前触发。 这会导致问题,因为目标是在 dragEnter 中使用 dragLeave 获取监听器并删除监听器。如果 dragLeave 在
HTML 拖放 API 定义了两个非常相似的事件,dragleave 和 dragexit,它们与 dragenter 一起用于帮助跟踪当前下降目标。 快速搜索没有找到关于这两个事件的任何当前和清晰的
我正在尝试创建一个元素,用户可以在拖动元素时将鼠标悬停在其上以缓慢向下滚动页面。这是支持我的拖放编辑器所必需的。 我正在检测用户是否将鼠标悬停在 anchor 上并进行拖动,如果是,我会启动一个 $i
我注册了 HTML5 DnD 事件,以便从桌面获取拖放文件。我看到的问题是我总是在 drop 事件之前得到 dragleave 事件。在规范中没有提到这样的事情 - 如果您使用 dragleave 作
我在我的 Angular 应用程序中使用原生 HTML 拖放,我发现了这个事件闪烁的问题 This答案并不能解决我的问题,因为他们正在手动移动元素。我将其保留在 native 实现中。 我的简化代码:
当拖入时当涉及到 时,边框和文本的颜色从灰色完美变为黑色它变回灰色。 CSS: .upload-cont{ cursor:pointer; margin-left:130px;
指针事件:无;已经实现了,在调试中, bool 值在“拖动”和“拖动OL”的true和false之间快速切换 HTML 结构
我正在通过引用此 link 对 HTML5 拖放概念进行研究工作.目前,我遇到了 dragenter 事件的问题,该事件在 dragleave 之前第二次触发(针对子元素)。因此,在某些情况下,当 d
我在单页应用程序中使用 html5 dragevents。 目前,我正在监听 dragleave 和 dragenter 事件以在元素上设置适当的类。 但是,当两个有效的目标元素(A 和 B)彼此相邻
我是一名优秀的程序员,十分优秀!