html5,拖拽元素

        本文主要是记录一下自己学习html中的进度,未来可以回来复习一下。

        本文参考了@冯小东的文章——html5,拖拽api    

        链接:点击打开链接

        html5中新增了拖拽事件,其中分为拖拽元素的事件,和目标元素的事件。

        使用时需要给拖拽元素添加dragable="true"

        拖拽元素的事件有:ondragstart事件 开始拖拽时触发

                                      ondragleave事件 鼠标离开拖拽元素触发

                                      ondragend事件 结束拖拽触发

        目标元素的事件有:ondragenter事件 拖拽元素进入时触发

                                       ondragover事件 停止在目标元素时触发

                                       ondrop事件 当在目标元素上松开鼠标时调用。此方法默认被阻止,

                                        如需使用请阻止ondragover事件的默认行为(给ondragover事件添加 事件名.preventDefault())

         以下是我第一次使用此方法是所做的内容,将一个div中的内容移动到另一个中

        

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body>div{
				float: left;
				width: 300px;
				height: 400px;
				background-color: cornflowerblue;
				margin-left: 10px;
			}
			#div3{
				width: 200px;
				height: 30px;
				line-height: 30px;
				background-color: red;
				color: white;
				text-align: center;
				margin-top: 10px;
				cursor: pointer;
				position: absolute;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div3" draggable="true">
				被拖拽的内容
			</div>
		</div>
		<div id="div2"></div>
	</body>
	<script>
		var obj;
		document.ondragstart=function(e){
			obj=e.target;
		}
		document.ondragover=function(e){
			e.preventDefault();
		}
		document.ondrop=function(e){
			e.target.appendChild(obj);
		}
	</script>
</html>

           使用了一个中间参数obj来传递中间小盒子的内容,但是移动时,如果将内容向外拖动也会将盒子拖到整个body中

后面在阅读了开头提到的文章之后,对script做了一下更改

<script>
		var obj;
		document.ondragstart=function(e){
			offsetX= e.offsetX;  
        	offsetY= e.offsetY; 
		}
		document.ondragover=function(e){
			e.preventDefault();
		}
		document.ondrop=function(e){
       		var x= e.pageX;  
        	var y= e.pageY;
       		if(x==0 && y==0){  
            return; //不处理拖动最后一刻X和Y都为0的情形  
        	}  
       	 	x-=offsetX;  
        	y-=offsetY;

        	document.getElementById("div3").style.left=x+'px';  
        	document.getElementById("div3").style.top=y+'px';
		}
	</script>


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

html5,拖拽元素

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭