首页导航博客电子书算法众创代码随贴关于我们

js拖动拖放交换位置,用来做可以拖动的导航网站

代码正文双击正文可选择全部

1[代码][html]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
#div1 ,#div2,#div3{width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
	ev.preventDefault();
}

function drag(ev)
{
	ev.dataTransfer.setData("Text",$('#'+ev.target.id).parent().attr('id'));
}

function drop(ev)
{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text"),div;
	if(ev.target.id.substr(0,4)=='drag'){//有交换
		div=$('#'+ev.target.id).parent();
		var my=div.html();
		div.html($('#'+data).html());
		$('#'+data).html(my);
	}else{
		ev.target.appendChild(document.getElementById($('#'+data+'>img').attr('id')));
	}
	
}
</script>
</head>
<body>

<p>拖动 RUNOOB.COM 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)"  ondragover="allowDrop(event)"><img id="drag1" src="https://www.runoob.com/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"></div>
<div id="div2" ondrop="drop(event)"  ondragover="allowDrop(event)"><img id="drag2" src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super" draggable="true" ondragstart="drag(event)" width="336" height="69"></div>
<div id="div3" ondrop="drop(event)"  ondragover="allowDrop(event)"></div>

</body>
</html>

CopyRight 2002～2023 精通2100网联系邮箱:qqtxt@163.com
版权所有:精通2100网湘ICP备2023018646号-1
MYSQl共执行 3 个查询，用时 0.001765251159668 秒，PHP脚本用时 0.004007 秒，占用内存 0.502 MB，Gzip 已启用