H5C3--拖拽接口的使用和实例
2024-09-06 13:16:18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
margin-left:20px;
float: left;
}
.div2{
width: 200px;
height: 200px;
border: 1px solid blue;
position: relative;
margin-left:20px;
float: left;
}
p{
background-color: orange;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<p id="pe" draggable="true">试着把我拖过去</p>
<p id="pe2" draggable="true">试着把我也拖过去吧！！！</p>
</div>
<div class="div2" id="div2"></div>
<script>
/*拖拽事件
* 1.针对于“被拖拽元素”的事件
* ondragstart:开始拖拽时触发，一次拖拽只会触发一次 touchstart
* ondrag:拖拽过程中(没有松开鼠标)持续触发 touchmove
* ondragleave:拖拽元素离开原始的范围，它的参照是当前鼠标拖拽点，一次拖拽只会触发一次
* ondragend:结束拖拽时触发。一次拖拽只会触发一次 touchend
*
* 2.针对于目标元素的事件
* ondragenter:当被拖拽元素进入到目标元素时触发
* ondragover:当被拖拽元素在目标元素上方时持续触发
* ondragleave:当被拖拽元素离开目标元素时触发
* ondrop:当被拖拽元素在目标元素上方时松开鼠标时触发*/ /*隆重介绍拖拽事件的核心：事件源参数*/ var pe = document.querySelector('#pe');
var div2 = document.querySelector('#div2'); pe.ondragstart = function (e) {
// console.log('开始拖拽');
/*e.target:当前真正响应事件的对象*/
e.target.parentNode.style.borderWidth = '10px';
}
pe.ondrag = function (e) {
// console.log('拖拽过程中');
}
pe.ondragleave = function (e) {
// console.log('拖拽元素中鼠标离开被拖拽的区域');
}
pe.ondragend = function (e) {
// console.log('拖拽结束');
e.target.parentNode.style.borderWidth = '1px';
} div2.ondragenter = function (e) {
console.log('拖拽进入div2区域');
}
div2.ondragover = function (e) {
/*默认情况下，一个元素并不允许将其它的元素挺拖入到这个元素内部，它会阻止你这样的操作，如果想实现拖拽操作，就必须在over事件中阻止它的默认行为*/
e.preventDefault();
console.log('拖拽进入div2上方');
}
div2.ondragleave = function (e) {
console.log('拖拽离开div2区域');
}
div2.ondrop = function (e) {
div2.appendChild(pe);
console.log('拖拽进入div2上方并松开鼠标');
} </script>
</body>
</html>
针对所有元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
margin-left:20px;
float: left;
}
.div2{
width: 200px;
height: 200px;
border: 1px solid blue;
position: relative;
margin-left:20px;
float: left;
}
p{
background-color: orange;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<p id="pe" draggable="true">试着把我拖过去</p>
<p id="pe2" draggable="true">试着把我也拖过去吧！！！</p>
</div>
<div class="div2" id="div2"></div>
<script>
/*拖拽事件
* 1.针对于“被拖拽元素”的事件
* ondragstart:开始拖拽时触发，一次拖拽只会触发一次 touchstart
* ondrag:拖拽过程中(没有松开鼠标)持续触发 touchmove
* ondragleave:拖拽元素离开原始的范围，它的参照是当前鼠标拖拽点，一次拖拽只会触发一次
* ondragend:结束拖拽时触发。一次拖拽只会触发一次 touchend
*
* 2.针对于目标元素的事件
* ondragenter:当被拖拽元素进入到目标元素时触发
* ondragover:当被拖拽元素在目标元素上方时持续触发
* ondragleave:当被拖拽元素离开目标元素时触发
* ondrop:当被拖拽元素在目标元素上方时松开鼠标时触发*/ /*隆重介绍拖拽事件的核心：事件源参数*/ var obj = null;
document.ondragstart = function (e) {
// console.log('开始拖拽');
/*e.target:当前真正响应事件的对象*/
// e.target.parentNode.style.borderWidth = '10px';
obj = e.target; //通过dataTransfer来传递数据
/*你可以简单的理解为键值对,值必须是字符串
* format:text/html | text/plain | Text*/
//e.dataTransfer.setData("text/html", e.target.id);
/*if(navigator.userAgent.indexOf("MSIE")){ }*/ }
document.ondrag = function (e) {
// console.log('拖拽过程中');
}
document.ondragleave = function (e) {
// console.log('拖拽元素中鼠标离开被拖拽的区域');
}
document.ondragend = function (e) {
// console.log('拖拽结束');
e.target.parentNode.style.borderWidth = '1px';
} document.ondragenter = function (e) {
console.log('拖拽进入div2区域');
}
document.ondragover = function (e) {
/*默认情况下，一个元素并不允许将其它的元素挺拖入到这个元素内部，它会阻止你这样的操作，如果想实现拖拽操作，就必须在over事件中阻止它的默认行为*/
e.preventDefault();
console.log('拖拽进入div2上方');
}
document.ondragleave = function (e) {
console.log('拖拽离开div2区域');
}
document.ondrop = function (e) {
e.target.appendChild(obj);
//var id = e.dataTransfer.getData("text/html");
//e.target.appendChild(document.getElementById(id));
console.log('拖拽进入div2上方并松开鼠标');
} </script>
</body>
</html>
最新文章
- HTML5 —— 自学第一课
- Java中的Comparable接口和Comparator接口
- 设置PATH变量
- C# 和 Unix 时间戳转换
- Eclipse中R文件不能自动生成
- Java [leetcode 3] Longest Substring Without Repeating Characters
- MongoDB学习笔记01
- ApiGen4.1 windows安装教程
- PHP中使用Ajax
- jquery 展开关闭效果
- mongodb中limit与skip方法
- 菜鸟学习计划浅谈之Linux系统
- leecode第二百三十题（二叉搜索树中第K小的元素）
- 怎么取cxgrid某一列的合计值
- promise-笔记
- Linux磁盘空间满了的排查与解决思路
- ATL CAxWindow类创建问题一则
- VMWare虚拟机安装创建虚拟机的使用教程
- Linux磁盘分区、挂在
- atitit.资源释放机制--attilax总结