移动html元素

最新推荐文章于 2024-01-16 21:39:28 发布

zhanglinlove

最新推荐文章于 2024-01-16 21:39:28 发布

阅读量629

点赞数

分类专栏：计算机基础文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/zhanglinlove/article/details/121040114

版权

计算机基础专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>移动元素</title> <style> 	body { 		font-size: 14px; 	} 	#left,
#right { 		width:50px; 		height:300px; 		border: 1px solid #ccc; 		white-space: pre-line; 	} 	span { 		display: inline-block; 	}  </style> </style> </head> <body>

	<div id="left" > 		<span class="tag1" draggable="true">index1</span> 		<span class="tag1" draggable="true">index2</span> 		<span class="tag1" draggable="true">index3</span> 		<span class="tag1" draggable="true">index4</span> 		<span class="tag1" draggable="true">index5</span> 		<span class="tag1" draggable="true">index6</span> 		<span class="tag1" draggable="true">index7</span> 	</div> 	<div id="right" >
		 	</div> 	<script src="jquery-1.7.2.min.js"></script> 	<script type="text/javascript"> 	jQuery.fn.cleanWhitespace = function() {

    this.contents().filter(

        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })

        .remove();

    return this;

} 		$(function(){ 			var moveItem = document.getElementsByTagName('span'); 			for (let i = 0; i < moveItem.length; i++) {
				moveItem[i].setAttribute('id', 'label' + i);
				moveItem[i].ondragstart = function (ev) {
					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') {
					this.appendChild(elem);
				} else {
					this.insertBefore(elem, document.getElementById(toElem));
				}
				$('#right').cleanWhitespace(); 			} 			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') {
					this.appendChild(elem);
				} else {
					this.insertBefore(elem, document.getElementById(toElem));
				}
				$('#left').cleanWhitespace(); 			} 		})
		
		 	</script> </body> </html>