vue+html5+原生dom+原生JavaScript实现跨区域拖放

Posted web半晨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+html5+原生dom+原生JavaScript实现跨区域拖放相关的知识,希望对你有一定的参考价值。


1、关键代码

// 放
function drop(ev) {
	let data = ev.dataTransfer.getData("Text"),
		i = ev.path[1].getAttribute("i"),
		text = document.getElementById(data).cloneNode(true).innerText.trim();

	if (i == null) return alert('请放置在文件名上');
	if (app.fileS[i].divs.includes(text)) return alert('不能放重复数据');
	app.fileS[i].divs.push(text);
	for (let is = 0; is < app.fileS.length; is++) {
		if (i == is) {
			app.fileS[is].isShow = true;
		} else {
			app.fileS[is].isShow = false;
		}
	}
};

2、完整代码

gitee(码云) - mj01分支 - copyDragAndDrop 文件

以上是关于vue+html5+原生dom+原生JavaScript实现跨区域拖放的主要内容,如果未能解决你的问题,请参考以下文章

Vue 操作原生Dom refs

为原生 Shadow DOM 元素设置样式

petite-vue:源码解析回归原生,无虚拟DOM的极简体验

vue怎么触发元素的原生事件

VUE

原生JavaScript常用的DOM操作