js_拖拽

普通拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id='d1'></div>
		<script>
			var obj = document.getElementById('d1')
			obj.onmousedown=function(event){
				event=window.event || event;
				//固定鼠标在div里的位置
				var ol=event.clientX-obj.offsetLeft
				var ot=event.clientY-obj.offsetTop
				
				//鼠标移动
				document.onmousemove=function(event){
					event=window.event || event;
					obj.style.left=event.clientX-ol+'px';
					obj.style.top=event.clientY-ot+'px';
				}
				//鼠标松开
				document.onmouseup=function(){
					document.onmousemove=null;
					document.onmouseup=null;
				}
				//阻止事件的默认行为
				event.preventDefault()
			}
		</script>
	</body>
</html>

拖拽到指定的位置

注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。

提示： 链接和图片默认是可拖动的，不需要 draggable 属性。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#droptarget {
    float: left; 
    width: 200px; 
    height: 35px;
    margin: 55px;
    margin-top: 155px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
	<p ondragstart="dragStart(event)" ondrag='drag(event)' onmouseout="mouseout()" 
draggable="true" id="dragtarget">把我拖动到矩形框中！</p>
	<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

	<script>
		var flag=false;
		function dragStart(event) {
            //设置数据类型和拖动的数据
		    event.dataTransfer.setData("Text", event.target.id);
		    console.log(" p 开始被拖动");
		}
		
		function drag(event){
			console.log(" p 正在被拖动");
		}
		
		function allowDrop(event) {
		    event.preventDefault();
		    console.log(" p 元素在放置目标上");
		    event.target.style.border = "4px dotted green";
		}
		
		function drop(event) {
		    event.preventDefault();
		    var data = event.dataTransfer.getData("Text");
		    event.target.appendChild(document.getElementById(data));
		    flag=true
		    console.log(" p 元素完成了拖动");
		}
		
		function mouseout(){
			if(flag){
				console.log("验证成功")
			}else{
				console.log("验证失败")
			}
		}
	</script>

</body>
</html>

普通拖拽

拖拽到指定的位置

猜你喜欢