HTML5拖放实现逻辑及代码讲解
导读：收集整理的这篇文章主要介绍了html5教程-HTML5拖放实现逻辑及代码讲解，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 1.拖放实现逻辑 开始...
收集整理的这篇文章主要介绍了html5教程-HTML5拖放实现逻辑及代码讲解，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 1.拖放实现逻辑
开始拖动 ===> 拖动中 ===> 拖动结束(放手)
onDragstart ===> ondragover ===> ondrop
ondragstart 绑定在需要被拖动的dom上
ondragover和ondrop绑定在接受被拖动dom进入的dom上
2.实例
单个dom的拖动
!DOCTYPE htML>
html>
head>
tITle>
drag/title>
style type="text/css">
.wrapper{
width: 400px;
height: 200px;
padding: 10px;
border: 1px solid red;
}
.wrapper img{
width: 100%;
height: 100%;
}
/style>
/head>
body>
p class="wrapper" ondragover="dragOver(event)" ondrop="dragDrop(event)">
img id="dragImg" src="./login.jpg" draggable="true" ondragstart="dragStart(event)">
/p>
p class="wrapper" ondragover="dragOver(event)" ondrop="dragDrop(event)">
/p>
/body>
script type="text/javascript">
function dragStart (event) {
event.datatransfer.setData('Text', event.target.id);
}
function dragOver(event) {
event.preventDefault();
}
function dragDrop(event) {
event.PReventDefault();
VAR data = event.dataTransfer.getData('Text');
event.target.appendChild(document.querySelector('#'+data));
}
/script>
/html>
多个dom的拖动
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
dragList/title>
style type="text/css">
#left{
float: left;
border: 1px solid red;
}
#right{
float: right;
border: 1px solid blue;
}
#left,#right{
width: 300px;
min-height: 400px;
}
.images img{
max-width: 260px;
max-height: 300px;
}
/style>
/head>
body>
ul id="left">
li id="img1" class="images" draggable="true">
img src="LOGin.jpg">
/li>
li id="img2" class="images" draggable="true">
img src="loginu.png">
/li>
li id="img3" class="images" draggable="true">
img src="反馈.png">
/li>
/ul>
ul id="right">
li id="img4" class="images" draggable="true">
img src="日落.png">
/li>
li id="img5" class="images" draggable="true">
img src="等待.png">
/li>
li id="img6" class="images" draggable="true">
img src="规则.png">
/li>
/ul>
/body>
script type="text/javascript">
window.onload = function () {
function myPreventDefault(event) {
if(event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
}
function myDragOver (event) {
myPreventDefault(event);
}
function myDragDrop (event) {
myPreventDefault(event);
var data = event.dataTransfer.getData('Text');
console.log(data);
event.target.appendChild(document.getElementById(data));
}
function myDragStart(event) {
event.dataTransfer.setData('Text', event.target.id);
}
var nodelist = document.querySelectorAll('.images');
for (var i = 0;
i nodeList.length;
i++) {
nodeList[i].addEventListener('dragstart',myDragStart);
}
document.getElementById('right').addEventListener('dragover', myDragOver);
document.getElementById('right').addEventListener('drop', myDragDrop);
document.getElementById('left').addEventListener('dragover', myDragOver);
document.getElementById('left').addEventListener('drop', myDragDrop);
}
/script>
/html>
1.拖放实现逻辑
开始拖动 ===> 拖动中 ===> 拖动结束(放手)
ondragstart ===> ondragover ===> ondrop
ondragstart 绑定在需要被拖动的dom上
ondragover和ondrop绑定在接受被拖动dom进入的dom上
2.实例
单个dom的拖动
!DOCTYPE html>
html>
head>
title>
drag/title>
style type="text/css">
.wrapper{
width: 400px;
height: 200px;
padding: 10px;
border: 1px solid red;
}
.wrapper img{
width: 100%;
height: 100%;
}
/style>
/head>
body>
p class="wrapper" ondragover="dragOver(event)" ondrop="dragDrop(event)">
img id="dragImg" src="./login.jpg" draggable="true" ondragstart="dragStart(event)">
/p>
p class="wrapper" ondragover="dragOver(event)" ondrop="dragDrop(event)">
/p>
/body>
script type="text/javascript">
function dragStart (event) {
event.dataTransfer.setData('Text', event.target.id);
}
function dragOver(event) {
event.preventDefault();
}
function dragDrop(event) {
event.preventDefault();
var data = event.dataTransfer.getData('Text');
event.target.appendChild(document.querySelector('#'+data));
}
/script>
/html>
多个dom的拖动
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
dragList/title>
style type="text/css">
#left{
float: left;
border: 1px solid red;
}
#right{
float: right;
border: 1px solid blue;
}
#left,#right{
width: 300px;
min-height: 400px;
}
.images img{
max-width: 260px;
max-height: 300px;
}
/style>
/head>
body>
ul id="left">
li id="img1" class="images" draggable="true">
img src="login.jpg">
/li>
li id="img2" class="images" draggable="true">
img src="loginu.png">
/li>
li id="img3" class="images" draggable="true">
img src="反馈.png">
/li>
/ul>
ul id="right">
li id="img4" class="images" draggable="true">
img src="日落.png">
/li>
li id="img5" class="images" draggable="true">
img src="等待.png">
/li>
li id="img6" class="images" draggable="true">
img src="规则.png">
/li>
/ul>
/body>
script type="text/javascript">
window.onload = function () {
function myPreventDefault(event) {
if(event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
}
function myDragOver (event) {
myPreventDefault(event);
}
function myDragDrop (event) {
myPreventDefault(event);
var data = event.dataTransfer.getData('Text');
console.log(data);
event.target.appendChild(document.getElementById(data));
}
function myDragStart(event) {
event.dataTransfer.setData('Text', event.target.id);
}
var nodeList = document.querySelectorAll('.images');
for (var i = 0;
i nodeList.length;
i++) {
nodeList[i].addEventListener('dragstart',myDragStart);
}
document.getElementById('right').addEventListener('dragover', myDragOver);
document.getElementById('right').addEventListener('drop', myDragDrop);
document.getElementById('left').addEventListener('dragover', myDragOver);
document.getElementById('left').addEventListener('drop', myDragDrop);
}
/script>
/html>
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5拖放实现逻辑及代码讲解
本文地址： https://pptw.com/jishu/587126.html