动态创建div层及控制层随意拖动或移动

JS拖动效果与动态DIV创建

最新推荐文章于 2020-05-30 12:54:32 发布

最新推荐文章于 2020-05-30 12:54:32 发布 · 361 阅读

文章标签：

#JavaScript #XHTML #HTML #ViewUI

本文介绍了一种简单的JavaScript实现元素拖动的方法，并展示了如何通过JavaScript动态创建多个DIV层，适用于网页交互设计。

 最常用的js 拖动代码

//控制层拖动
function drag_div(){
	
        checkMoving = false;
        document.onmousedown=startMove;
        document.onmousemove=moveObj;
        document.onmouseup=new Function("checkMoving = false");
}
function startMove(){
               //imgObj  代表样式
	if(event.srcElement.className!="imgObj") 
		return;
	checkMoving=true;
	Xdiff=event.clientX-event.srcElement.style.pixelLeft;
	Ydiff=event.clientY-event.srcElement.style.pixelTop;
  }

  function moveObj(){
	if(!checkMoving) 
		return true;
	event.srcElement.style.pixelLeft=event.clientX-Xdiff;
	event.srcElement.style.pixelTop=event.clientY-Ydiff;
	return false;
  }
==========页面引用==========
<body onload="drag_div();">
         <div class="imgObj">hello word!</div>
</body>

代码比较简单，没有写太多注释。

动态创建div层多个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
    <script type="text/javascript">
    var a=0;
    function add(){
        var o=document.getElementById("PhotoLabel");
        var div=document.createElement("div");
        div.innerHTML=o.innerHTML.replace(/\{0\}/ig,a);
        document.getElementById("addPhotoLabel").appendChild(div);
        a++;
    }
    //window.onload =  function(){add();}
    </script>
<body>
<div id="PhotoLabel" >
     <a>hello word!</a>
</div>
<div id="addPhotoLabel" style="border:1px solid red;width:100px;"></div>
<input type="button" value="添加层" onclick="add();"/>
</body>
</html>