动态添加diV,实现了拖拽功能

最新推荐文章于 2023-09-18 17:55:05 发布

转载最新推荐文章于 2023-09-18 17:55:05 发布 · 2.2k 阅读

标签

#div #function #html #button #up

#input

收录于

本文介绍了一段HTML和JavaScript代码，演示如何使用DOM操作创建可交互的div元素，并通过事件监听实现基本的拖拽功能。代码包括元素创建、样式设置以及鼠标事件响应，展示了前端开发中动态交互的实现。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
   function creatediv()
   {
        var obj = document.createElement("div");
  classA.call(obj);  
  bd.appendChild(obj);
   }
 
 function classA(){
   
  this.style.width="100";
  this.style.height="100";
  this.style.background="blue";
  this.style.border="solid 10 red ";
  //this.style.display="inline";
  this.style.position="absolute";   //relative
  //   this.style.left=50;
  //   this.style.top=50;
  this.onmousedown=function()
                   {down(this)};
  this.onmousemove=function()
                   {move(this)};
  this.onmouseup=function()
                    {up(this)};

  
 }
 
 var flag=0;
 function down(aa){
  flag=1;
 }
 function move(aa)
 {
     if(flag==1)
  {
         aa.style.left=event.x-50;
   aa.style.top=event.y-50;
   }
 }
 function up(aa){
  flag=0;
 }
</script>
</HEAD>

<BODY id="bd" >
<input type ="button"  onclick="creatediv();"  value="创建" /> 
</BODY>
</HTML>

down() ,move() ,up() 这3个函数是实现拖拽功能的！其实你可以不要它。

call方法是一个回调方法，每点击一下call就回调classA()这个函数一次。