整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML5之实现本地拖放

HTML5之实现本地拖放



html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地拖放</title>
<style>
#imgContainer{
background-color: #cccccc;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="imgContainer"></div>
<script src="js/app1.js"></script>
</body>
</html>


pp1.js 源码：

介拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。先点击一个小例子：在用户开始拖动 <p> 元素时执行 JavaScript<p draggable="true" ondragstart="myfunction(event)">拖动我</p>提示： 链接和图片默认是可拖动的，不需要 draggable 属性。定义和用法在拖放的过程中会触发以下事件：在拖动目标上触发事件 (源元素):


1、ondragstart - 用户开始拖动元素时触发2、ondrag - 元素正在拖动时触发3、ondragend - 用户完成元素拖动后触发释放目标时触发的事件：1、ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件2、ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
3、ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件4、ondrop - 在一个拖动过程中，释放鼠标键时触发此事件浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。注意:Safari 5.1.2不支持拖动；在拖动元素时，每隔 350 毫秒会触发 ondragover 事件。实例


先贴代码，再逐一解释：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#d1{
width: 110px;
height: 310px;
border: 1px dashed greenyellow;
border-radius: 10px;
float: left;
margin-right: 200px;
}
#d1_a,#d1_b,#d1_c{
width: 100px;
height: 100px;
line-height: 100px;
}
#d1_a{background-color: orangered;}
#d1_b{background-color: yellow;}
#d1_c{background-color: red;}
#d2,#d3,#d4{
width: 150px;
height: 150px;
border-radius: 10px;
border: 1px dashed greenyellow;
float: left;
}
</style>
</head>
<body>
<p draggable="true" ondragstart="myfunction(event)"></p>
<div id="d1">
<div id="d1_a" draggable="true">橘红</div>
<div id="d1_b" draggable="true">黄色</div>
<div id="d1_c" draggable="true">红色</div>
</div>
<div id="d2">橘红</div>
<div id="d3">黄色</div>
<div id="d4">红色</div>
<script>
/* 拖拽元素支持的事件


ondrag 应用于拖拽元素，整个拖拽过程都会调用


ondragstart 应用于拖拽元素，当拖拽开始时调用


ondragleave 应用于拖拽元素，当鼠标离开拖拽元素是调用


ondragend 应用于拖拽元素，当拖拽结束时调用


目标元素支持的事件


ondragenter 应用于目标元素，当拖拽元素进入时调用


ondragover 应用于目标元素，当停留在目标元素上时调用


ondrop 应用于目标元素，当在目标元素上松开鼠标时调用


ondragleave 应用于目标元素，当鼠标离开目标元素时调用


*///拖拽开始document.ondragstart=function (e) {
/*通过dataTransfer来实现数据的存储与获取


setData(format, data)format: 数据的类型： text/html text/uri-listData: 数据： 一般来说是字符串值


*/// e.dataTransfer.setData("Text", e.target.id);e.target.style.opacity=0.5//设置透明度e.dataTransfer.setData("text",e.target.id);
}
//拖拽结束时document.ondragend=function (e) {
e.target.style.opacity=1;
}
//浏览器默认会阻止ondrop事件：我们必须在ondrapover中阻止默认行为document.ondragover=function (e) {
e.preventDefault();
}
//放置document.ondrop=function (e) {
var data=e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>


下面分别来解析下上面代码的意思。设置元素可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<div id="d1_a" draggable="true">橘红</div>
<div id="d1_b" draggable="true">黄色</div>
<div id="d1_c" draggable="true">红色</div>

拖动什么 - ondragstart 和 setData()然后，规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：
document.ondragstart=function (e) {
e.dataTransfer.setData("text",e.target.id);
}

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("d1_1")。放到何处 - ondragoverondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：

document.ondragover=function (e) {
e.preventDefault();
}

例: 限制范围的拖拽

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 400px;
margin: 50px auto;
border: 1px solid #f00;
/*让拖拽元素根据它进行定位*/
position: relative;
}
.move{
width: 200px;
height: 120px;
cursor: move;
background-color: orange;
/*定位属性*/
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="move"></div>
</div>

<script type="text/javascript">
    //获取box盒子
    var box=document.querySelector(".box");
    //获取拖拽的盒子
    var move=document.querySelector(".move");
    //求得box盒子距离body的净位置
    var boxLeft=box.getBoundingClientRect().left;
    var boxTop=box.getBoundingClientRect().top;
    //拖拽三大事件
    move.onmousedown=function(e){
    var ev=e || window.event;//事件对象兼容
    //存储鼠标按下时到事件源的位置
    var startX=ev.offsetX;
    var startY=ev.offsetY;


    document.onmousemove=function(e){
    var ev=e || window.event;//事件对象兼容
    //真实的拖拽元素的left和top值
    var left=ev.clientX -boxLeft - startX;
    var top=ev.clientY - boxTop - startY;
    //多拖拽盒子的left和top值进行约束
    if(left<0){
    left=0;//left最小是0
    }else if(left>(box.offsetWidth-move.offsetWidth)){
    left=box.offsetWidth-move.offsetWidth;//left最大是大盒子宽度-小盒子宽度
    }
    if(top<0){
    top=0;//top最小是0
    }else if(top>(box.offsetHeight-move.offsetHeight)){
    top=box.offsetHeight-move.offsetHeight;//top最大是大盒子高度-小盒子高度
    }


    //设置拖拽元素的left和top属性值
    move.style.left=left + "px"
    move.style.top=top + "px"
    }
    document.onmouseup=function(){
    document.onmousemove=null;
    document.onmouseup=null;
    }
    }
</script>
</body>
</html>

实例: 进一步优化(带吸附拖拽)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 400px;
margin: 50px auto;
border: 1px solid #f00;
/*让拖拽元素根据它进行定位*/
position: relative;
}
.move{
width: 200px;
height: 120px;
cursor: move;
background-color: orange;
/*定位属性*/
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="move"></div>
</div>

<script type="text/javascript">
    //获取box盒子
    var box=document.querySelector(".box");
    //获取拖拽的盒子
    var move=document.querySelector(".move");
    //求得box盒子距离body的净位置
    var boxLeft=box.getBoundingClientRect().left;
    var boxTop=box.getBoundingClientRect().top;
    //拖拽三大事件
    move.onmousedown=function(e){
    var ev=e || window.event;//事件对象兼容
    //存储鼠标按下时到事件源的位置
    var startX=ev.offsetX;
    var startY=ev.offsetY;


    document.onmousemove=function(e){
    var ev=e || window.event;//事件对象兼容
    //真实的拖拽元素的left和top值
    var left=ev.clientX -boxLeft - startX;
    var top=ev.clientY - boxTop - startY;
    //弹性吸附 就是让他还差**px时我就让他到边边上
    if(left<20){
    left=0;//left最小是0
    }else if(left>(box.offsetWidth-move.offsetWidth-20)){
    left=box.offsetWidth-move.offsetWidth;//left最大是大盒子宽度-小盒子宽度
    }
    if(top<20){
    top=0;//top最小是0
    }else if(top>(box.offsetHeight-move.offsetHeight-20)){
    top=box.offsetHeight-move.offsetHeight;//top最大是大盒子高度-小盒子高度
    }


    //设置拖拽元素的left和top属性值
    move.style.left=left + "px"
    move.style.top=top + "px"
    }
    document.onmouseup=function(){
    document.onmousemove=null;
    document.onmouseup=null;
    }
    }
</script>
</body>
</html>

实例: 进一步优化(带影子拖拽)


在线咨询
上一篇：Nvidia控制面板打不开，怎么办？
下一篇：2022年上半年湖北省高等教育自学考试转考2月21日

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 天山区 宜宾 汕头 呼兰区 桑植县 新城子区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服