js+Ztree实现左侧树节点拖动到右侧面板上

这个示例展示了如何利用JavaScript和Ztree库来实现在左侧树形结构中拖动节点到右侧的面板上。通过添加事件监听和拖放功能，可以动态地将树节点添加到页面的指定位置，从而实现灵活的界面交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.innerRowClass{
width: 100%;
height: 100px;
border-bottom: 1px solid green;
position: relative;
/* background-color: #aaaf5d;*/
}
/*每行每列的输入框*/
.inputClass{
width:180px;
height: 30px;
text-align: center;
}
/*每行每列的标题*/
.labelClass{
margin-left: 7%;
font-size: 16px;
}
/*每行中每列的样式*/
.cellDivContain{
float: left;
margin:0 auto;
background: #EEEEEE;
width:200px;
height:60px;
border:2px solid #AAAAAA;
border-radius:30px;
text-align: center;
position: relative;
}
/*删除每行的维度的按钮样式*/
.cellDiv_closed{
/* still bad on picking color */
color: #666666;
/* make a round button */
border-radius: 12px;
/* center text */
line-height: 20px;
text-align: center;
height: 20px;
width: 20px;
font-size: 18px;
padding: 0px;
top: -2px;
right: 20px;
position: absolute;
}
/*每行中的删除按钮*/
.rowDiv_closed{
/* still bad on picking color */
color: #666666;
/* make a round button */
border-radius: 12px;
/* center text */
line-height: 20px;
text-align: center;
height: 20px;
width: 20px;
font-size: 18px;
padding: 0px;
right: 15 px;
position: absolute;
}
.cellDiv_closed::before{
content: "\2716";
}
.rowDiv_closed::before{
content: "\2716";
}
# 测试
body {
background-color: white;
margin: 0;
padding: 0;
text-align: center;
}

div, p, table, th, td {
list-style: none;
margin: 0;
padding: 0;
color: #333;
font-size: 12px;
font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
}
#testIframe {
margin-left: 10px;
}
</style>
<body>
<div style="width: 200px;">
&nb