浅谈html5中拖曳
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
60 囱^工科技 2019年•第11期
console.log(2); })； box.addEventListener('dragstart',function(){ this.style.backgroundColor='blue'; console.log(3); })； box.addEventListener('dragend',fiuiction(){ this.style.backgroundColor="; })； contamer.addEventListener('dragenter',fiinction(ev){ this.style.backgroundColor='pink'; console.log("进入")； })； contamer.addEventListener('dragover',function(ev){ this.style.backgroundColoi^'yellow'; ev.preventDefault(); })； contamer.addEventListener('drop*,function(ev){ this.style.backgroundColor='black'; ev.preventDefault(); })； </script> </body> </html> 实例2：拼图游戏 案例分析：要进行拼图游戏，首先进行图片的切片，然后 在每次点击开始按钮的时候随机排列9张小图片，然后在根据图 片的id进行图片的拖曳，直到拼图成功。 参考代码：
.....} 2基本实例 实例1：拖动翩象到目标对象，各种事件。 案例分析：拖动源对象到目标对象。案例开始时，设置源
对象背景颜色为红色，目标对象背景颜色为绿色，为图1所示效 果。拖曳开始，源对象背景颜色变为绿色，当源对象拖动到目 标对象上方悬停时，目标对象背景颜色变为黄色，为图2所示效 果。当源对象拖动到目标对象上方释放后，目标对象背景颜色 变为黑色，耐象RMS：色, 为图3所示效果。
} .contamer{ width:300px; height:300px; background-color: green; position:absolute; top:100px; left:50%; margin-left:-]50px;
} body{ padding:O; margin:0; background-color:#f7f7f7; position:relative;
到另一个位置。其中图片、链接默认是开启的。拖曳是标准的
一部分，任何元素都能够拖曳。拖曳英文单词Drag,释放英文
单词Drop,拖曳指的是鼠标点击源对象后一直移动对象不松
手，T旦松手即释放了
1.2源对象和目标对象 源对象：指的是我们鼠标点击的一个事物，这里可以是一
张图片，fDIV, —段文本等。
目标对象：指的是我们拖动源对象后移动到一块区域，源
券代码：
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <titlex/title> <style> .box{ width: 150px; height: 150px; background-color: red; position:absolute; top:100px; left:5Opx;
for(vari=0; ;i<tp.length;i++){
index=Math.floor(Math.randomO*tp.length);
while(shuju.indexOf(index) !=-l){
index=Math.floor(Math.randomO*tp-length);
}
shuju.push(index);
技术创 59
浅谈HTML5中拖曳
◊四川职业技术学院朱倩
拖曳操作在计算机的操作中无处不在，在HTML5中， 我们可以通过为元素设置draggable属性确定来此元素是 否可以进行拖曳操作，通过拖曳操作能够极大的丰富程序 的可操作性。
1基本概念
1.1拖曳 在HTML5中，拖曳是一种常见的特性，即抓取对象以后拖
dragleave （避免一悬停就离开）。ondragover有一个默认行为,
那就是当ondragover触发时，ondrop^失效。这个可能是浏览器
的版本问题，需要以后浏览器不断更新可能才会解决。
ondragover= fiinction（e）{
停在目标对象上时
e.preventDefault（）; 〃阻止默认行为，使得drop可以触发
拖动源对象可以进入到上方的目标对象可以触发的事件：
①ondragenter:目标对象被源对象拖动着进入;②ondragover:
目标对象被®M象拖动着悬停方；③ondragleave：
象拖
动着离开了目标对象；©ondrop：源对象拖动着在目标对象上方
释放脛手。注意：必须阻止dragover默认行为，自动触发
对象可以进入这个区域，可以在这个区域上方悬停（未松
手），可以释松手释放将源对象放置此处（已松手）,也可以
躺后离开该区域。
1.3相关事件 被拖动的源对象可以触发的事件：①ondragstart：源对象开
始被拖动；②ondrag：源对象被拖动过程中（鼠标可能在移动也
可能动）;③ondragend： 象动结束。
图3源对象在目标对象上释放
} </style> </head> <body> <div class="box,' draggable="true"></div> <div class='*container"></div> <script> varbox=document.querySelector('.box'); varcontamer=document.querySelector('.contamer'); box.addEventListener('drag',fimctionO { console.log(l); })； box.addEventListenerCdragleave*,ftinctionO{