动态让每个DIV都允许拖拽思想

最新推荐文章于 2023-04-27 18:04:03 发布

魏言

最新推荐文章于 2023-04-27 18:04:03 发布

阅读量707

点赞数

分类专栏： Js、xml、div+css 文章标签： div button input xhtml html function

本文链接：https://blog.csdn.net/lhypang2006/article/details/4870671

版权

Js、xml、div+css 专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!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>
    <title>无标题页</title>
   <script src="ext-base.js"></script>
   <script src="ext-all.js"></script>
   <script src="ext-lang-zh_CN.js"></script>
   <script>
   function show()
   {
    var t1=document.getElementById("Text1").value;
    var t2=document.getElementById("Text2").value;
    document.getElementById("a").innerHTML+="<div id='"+t2+"'style='width:180px;cursor:pointer' οndblclick=/"this.parentNode.removeChild(this)/" οnmοusemοve='this.style.backgroundColor=/"fdf4cb/"' οnmοuseοut='this.style.backgroundColor=document.getElementById(/"a/").style.backgroundColor' >"+t1+"</div>";

    var obj=document.getElementById("a").getElementsByTagName("div");   //获得所有div节点
    //给每个DIV重新注册拖拽
    for(i=0;i<obj.length;i++)
    {
       new Ext.dd.DDProxy(obj[i].id);
    }


   }
   </script>
</head>
<body>

</div>
    标签名称：<input id="Text1" type="text" /><br />
    标签编号：<input id="Text2" type="text" /><br />
    <input id="Button1" type="button" οnclick="show()" value="添加" /> 
    <input id="Button2" type="button" οnclick="alert( document.getElementById('a').innerHTML)" value="模板" />

</body>
</html>

//说明:

首先拖拽我使用的EXT的JS...

采用注册拖拽机制..向指定ID的元素注册拖拽功能..

某个DIV下所有都可以拖拽核心:

    var obj=document.getElementById("a").getElementsByTagName("div");   //获得所有div节点
    //给每个DIV重新注册拖拽
    for(i=0;i<obj.length;i++)
    {
       new Ext.dd.DDProxy(obj[i].id);
    }