您的位置：首页 > Web前端 > HTML5

HTML5 元素拖动 - 实现元素左右拖动，或更改自身排序

2016-09-21 15:14 447 查看

1、拖放（Drag 和 drop）是 HTML5 标准的组成部分。

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

浏览器支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放（注：在 Safari 5.1.2 中不支持拖放。）。

2、相关属性及方法

设置元素为可拖放，把 draggable 属性设置为 true

<labeldraggable="true"">index1</label>

设置元素被拖动时触发的事件 ondragstart

<label draggable="true" ondragstart="drag(event)">...</label>

放到何处 - ondragover ，以div 为例：

<div id="right" ondragover="dragover(event)">...</div>

进行放置 - ondrop，以div 为例：

<div id="right" ondragover="dragover(event)" ondrop="drop(event)">...</div>

3、实现一个简单的 从左向右 或 从右向左 拖动元素，且可以移动元素之前的排列位置。

效果图：

图1.初次加载

<!DOCTYPE html>
<html>

<head lang="en">
<meta charset="UTF-8">
<title>拖动</title>
<style>
h2 {
font-size: 20px;
color: #0d88c1;
}

div#left,
div#right {
width: 120px;
float: left;
margin: 10px 100px 10px 0px;
height: 240px;
background-color: #dddddd;
border: 1px solid #000;
overflow-y: auto;
}

div label {
font-size: 22px;
font-weight: bold;
width: 100%;
display: inline-block;
padding: 4px 0;
text-align: center;
margin: 0px 0 2px 0;
color: #fff;
background-color: #0d88c1;
}
</style>
</head>

<body>
<h2>拖放（Drag 和 drop）</h2>
<!-- 左边元素框 -->
<div id="left">
<label draggable="true">index1</label>
<label draggable="true">index2</label>
<label draggable="true">index3</label>
<label draggable="true">index4</label>
<label draggable="true">index5</label>
<label draggable="true">index6</label>
<label draggable="true">index7</label>
</div>
<!-- 右边元素框 -->
<div id="right"></div>
<script>
var moveItem = document.getElementsByTagName('label');

for (let i = 0; i < moveItem.length; i++) {
//动态设置label元素id
moveItem[i].setAttribute('id', 'label' + i);
moveItem[i].ondragstart = function (ev) {
//dataTransfer.setData() 方法设置被拖数据的数据类型和值
ev.dataTransfer.setData("Text", this.id);
};
}

//左－〉右
document.getElementById('right').ondragover = function (ev) {
ev.preventDefault(); //阻止向上冒泡
}
document.getElementById('right').ondrop = function (ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData('Text');
var elem = document.getElementById(id); //当前拖动的元素
var toElem = ev.toElement.id; //放置位置
if (toElem == 'right') {
//如果为container,元素放置在末尾
this.appendChild(elem);
} else {
//如果为container里的元素，则插入该元素之前
this.insertBefore(elem, document.getElementById(toElem));
}
}

//右－〉左
document.getElementById('left').ondragover = function (ev) {
ev.preventDefault(); //阻止向上冒泡
}
document.getElementById('left').ondrop = function (ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData('Text');
var elem = document.getElementById(id);
var toElem = ev.toElement.id;
if (toElem == 'left') {
//如果为container,元素放置在末尾
this.appendChild(elem);
} else {
//如果为container里的元素，则插入该元素之前
this.insertBefore(elem, document.getElementById(toElem));
}
}
</script>
</body>

</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

HTML5 元素拖动 - 实现元素左右拖动， 或更改自身排序

HTML5 元素拖动 - 实现元素左右拖动，或更改自身排序