移动html元素

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值