HTML5 拖动实例

最新推荐文章于 2021-05-30 23:59:38 发布

云端Sky

最新推荐文章于 2021-05-30 23:59:38 发布

阅读量391

点赞数

分类专栏： HTML 文章标签： js拖动

本文链接：https://blog.csdn.net/fb408487792/article/details/42241115

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>drag</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
.items {
	width: 100%;
	clear: both;
}
.inner {
	height: 100px;
	border: 10px white solid;
	background-color: pink;
	box-sizing: border-box;
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* Safari */
	float: left;
}
.width4 {
	width: 25%
}
.width3 {
	width: 33.333%;
}
.width2 {
	width: 50%;
}
.width1 {
	width: 100%
}
.width12 {
	width: 33.333%;
	height: 200px;
}
</style>
</head>
<body>
<div class="items" id="container">
<div class="inner width2" id="drag1" draggable="true">2</div>
<div class="inner width2" id="drag2" draggable="true">2</div>
<div class="inner width3" id="drag3" draggable="true">3</div>
<div class="inner width3" id="drag4" draggable="true">3</div>
<div class="inner width3" id="drag5" draggable="true">3</div>

<div class="inner width12" id="drag10" draggable="true">12</div>
<div class="inner width3" id="drag11" draggable="true">3</div>
<div class="inner width3" id="drag12" draggable="true">3</div>
<div class="inner width3" id="drag13" draggable="true">3</div>
<div class="inner width3" id="drag14" draggable="true">3</div>
<div class="inner width1" id="drag15" draggable="true">1</div>
</div>
<script type="text/javascript" >
	
var sourceObj = '';
var containers = document.getElementById('container');
//注册拖动对象
function makeDrag(obj) {

	obj.ondragstart = function (event) {
	    // event.preventDefault();
	    sourceObj = this;//源
	}

	obj.ondragend = function (event) {
	    // event.preventDefault();
	}

	obj.ondragover = function (event) {
	    event.preventDefault();//取消默认事件
	}

	obj.ondrop = function (event) {
	    event.preventDefault();
	    containers.insertBefore(sourceObj, this);//this 目标
	}
	
}
//注册drag事件
var itemx = document.getElementsByClassName("inner")
for(var i = 0; l = itemx.length, i < l; i++) {
	makeDrag(itemx[i]);
}


</script>
</body>
</html>