拖拽事件
draggable 规定盒子是否能拖拽 true 可以 false 不行
ondragstart 开始拖拽时触发
ondrag 拖拽过程触发的
ondragend 拖拽结束触发
<body>
<div id="box" draggable = 'true'></div>
<!-- draggable 规定是否能拖拽 true 可以 false 不行 -->
<script>
/*
拖拽事件
ondragstart 开始拖拽时触发
ondrag 拖拽过程触发的
ondragend 拖拽结束触发
*/
let oBox = document.getElementById( 'box' ),
num = 0;
oBox.ondragstart = function ( e ){
this.innerHTML = '开始拖拽'
}
oBox.ondrag = function ( e ){
this.innerHTML = '拖拽过程'
}
oBox.ondragend = function (e){
this.innerHTML = '拖拽结束';
}
</script>
</body>
小案例
<body>
<div id="box" draggable = 'true'></div>
<script>
let oBox = document.getElementById( 'box' ),
sX,
sY;
oBox.ondragstart = function (e){
sX = e.pageX - this.offsetLeft;
sY = e.pageY - this.offsetTop;
console.log( sX,sY )
}
oBox.ondragend = function (e){
this.style.top = e.pageY - sY + 'px';
this.style.left = e.pageX - sX + 'px';
}
</script>
</body>
ondragenter 拖拽的元素进入（鼠标进入时触发）哪个元素的时候
ondragleave 拖拽元素离开时
ondragover 在进入的区域里触发的
ondrop 在区域里放下的时候
<body>
<div id="box" draggable = 'true'></div>
<div id="box2"></div>
<script>
// ondragenter 拖拽的元素进入（鼠标进入时触发）哪个元素的时候
// ondragleave 拖拽元素离开时
// ondragover 在进入的区域里触发的
// ondrop 在区域里放下的时候
let oBox1 = document.getElementById('box'),
oBox2 = document.getElementById('box2'),
num = 0;
oBox2.ondragenter = function (){
let that = this;
this.innerHTML = '进入了';
this.style.border = '3px dashed yellow';
}
oBox2.ondragleave = function (){
this.innerHTML = '离开了';
}
oBox2.ondragover = function ( e ){ // 注意如果要用放下事件 要在这里阻止默认行为
this.innerHTML = num ++;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
oBox2.ondrop = function (){
this.innerHTML = '放下了';
oBox1.style.left = this.offsetLeft+ 50 + 'px';
oBox1.style.top = this.offsetTop + 50 + 'px';
}
</script>
</body>
兼容 火狐：
dataTransfer 事件对象下面 用来传输数据，以便在拖曳操作结束的时候对数据进行其他的操作
- setData() 设置数据
- getData() 获取数据
- clearData() 清除数据
<body>
<div id="box" draggable = 'true' aLi='eeee'></div>
<div id="box2"></div>
<script>
/*
兼容 火狐：
dataTransfer 事件对象下面 用来传输数据，以便在拖曳操作结束的时候对数据进行其他的操作
setData() 设置数据
getData() 获取数据
clearData() 清除数据
*/
let oBox = document.getElementById('box'),
oBox2 = document.getElementById('box2');
oBox.ondragstart = function ( e ){
e = e || window.event;
this.innerHTML = '开始拖动了';
e.dataTransfer.setData( 'aa','飞飞' ) // 这里设置数据名的时候不能text 不然会搜索 值（飞飞）
}
oBox.ondrag = function ( e ){
}
oBox.ondragend = function ( e ){
e.preventDefault ? e.preventDefault() : e.returnValue=false;
}
oBox2.ondragenter = function (){
this.innerHTML = '进入了'
}
oBox2.ondragover = function ( e ){
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
oBox2.ondrop = function (){
oBox.style.left = this.offsetLeft + 50 + 'px';
oBox.style.top = this.offsetTop + 50 + 'px';
this.style.border = '2px dashed red'
}
</script>
</body>
dataTransfer 事件对象下面 用来传输数据，以便在拖曳操作结束的时候对数据进行其他的操作
files :可以读取到拖拽的文件
<body>
<div id="box"></div>
<script>
/*
dataTransfer 事件对象下面 用来传输数据，以便在拖曳操作结束的时候对数据进行其他的操作
files // 可以读取到拖拽的文件
*/
let oBox = document.getElementById('box');
oBox.ondragover = function ( e ){
e = e || window.event;
this.style.border= '2px dashed green';
e.preventDefault ? e.preventDefault() : returnValue=false;
}
oBox.ondragenter = function ( e ){
e = e || window.event;
e.dataTransfer.setData('aa','')
e.preventDefault ? e.preventDefault() : returnValue=false;
}
oBox.ondrop = function ( e ){
e = e || window.event;
let file = e.dataTransfer.files; // 可以读取到拖拽的文件
console.log( file[0].type )
for (var i = 0; i < file.length; i++) {
console.log(file[i].type.includes( 'image' ))
if( file[i].type.includes( 'image' ) ){
let readyFile = new FileReader(); // 创建读取文件对象
readyFile.readAsDataURL( file[i] ); // 读取文件url
readyFile.onload = function (){ // 读取完成
let oImg = new Image();
oImg.src = this.result; // 完成后结果
oImg.width = 150;
oImg.height = 250;
oBox.appendChild( oImg )
}
}
}
e.preventDefault ? e.preventDefault() : returnValue=false;
}
</script>
</body>
<body>
<div class="box"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let oBox = document.getElementsByClassName('box')[0],
oUl = document.getElementsByTagName('ul')[0],
aLi = document.querySelectorAll('li'),
length = aLi.length,
num = 0
oBox.ondragover = function(e) {
e.stopPropagation();
e.preventDefault();
}
for (let i = 0; i < length; i++) {
aLi[i].setAttribute('draggable', true)
aLi[i].ondragstart = function (e){
// console.log(e.dataTransfer)
console.log(i)
e.dataTransfer.setData('key', i)
}
// aLi[i].ondragend = function (e){
// this.parentNode.removeChild(this)
// console.log(e.dataTransfer.getData('key'))
// let oP = document.createElement('p')
// oP.innerHTML = i+1
// oBox.appendChild(oP)
// }
}
oBox.ondrop = function(e){
oUl.removeChild(aLi[e.dataTransfer.getData('key')])
let oP = document.createElement('p')
oP.innerHTML = e.dataTransfer.getData('key')*1+1
this.appendChild(oP)
}
</script>
</body>
Animation.gif
页面中的选中拖拽
<body>
<img src="./1.jpg" alt="" width="200" height="200">
<p>明天您好地好地地</p>
<div class="box"></div>
<script>
let oBox = document.getElementsByClassName('box')[0]
oBox.ondragover = function(e){
e.stopPropagation();
e.preventDefault();
}
oBox.ondrop = function(e){
e.stopPropagation();
e.preventDefault();
let dataTransfer = e.dataTransfer
// 获取文本 在做兼容
let text = dataTransfer.getData('Text') || dataTransfer.getData('text/plain')
this.innerHTML += text
// 获取路径
let url = dataTransfer.getData('url') || dataTransfer.getData('url/url-list')
this.innerHTML += `<img width="80" src = "${url}">`
console.log(url)
console.log(text)
}
</script>
</body>
获取文本内容
<body>
<div class="box"></div>
<script>
let oBox = document.getElementsByClassName('box')[0]
oBox.ondragover = function(e){
e.stopPropagation();
e.preventDefault();
}
oBox.ondrop = function(e){
e.stopPropagation();
e.preventDefault();
let dataTransfer = e.dataTransfer
let filt = dataTransfer.files[0]
let textData = new FileReader()
textData.readAsText(filt) // 获取文本文件内容
console.log(d)
textData.onload = function (){
console.log(this.result)
}
}
</script>
</body>
URL对象
<body>
<div class="box"></div>
<script>
let oBox = document.getElementsByClassName('box')[0]
oBox.ondragover = function (e){
e.stopPropagation(); // 要阻止冒泡下面drop才能起作用
e.preventDefault(); // 要阻止默认事件下面drop才能起作用
console.log('666')
}
oBox.ondrop = function (e){
e.preventDefault()
e.stopPropagation()
let dataTransfer = e.dataTransfer
let filt = dataTransfer.files[0]
// 些url直接指向 存在内存中的文件 一般都用这个种方法 用base 64 耗性能
let url = window.URL.createObjectURL(filt) || window.webkitURL.createObjectURL(filt) || null
this.innerHTML = `<img width="80" src="${url}"/>`
}
</script>
</body>
url对象拖拽
网友评论