普通拖拽
<!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>