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

.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;">
<div class="headDiv">
<input type="button" id="addCosmbine" value='添加维度'>
<input type="text" name="kkk1">
</div>
</div>

<div class="out">
<div style="border: 1px solid blue;width: 12%;height: 100%;float:left;border-right: #999999 1px dashed">
<TABLE border=0 height=600px align=left>
<TR>
<TD width=260px align=left valign=top>
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</TD>
</TR>
</TABLE>
</div>
<div class='main' id='main' name='mainsName'>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.selectNode(zTree.getNodeByParam("id", 101));
var lineHeight = 50;
//添加维度并且控制每行的高度
function addCombine(id){
//获取当前页面的高度
var currentPageHeight = $(window).height();
var currentPageWidth = $(window).width();
//获取当前已经添加的行数
var elementCount = $('#main').childs();
//计算总体的高度
var allLinesHeight = parseInt(lineHeight) * parseInt(elementCount);
//设置每行的高度,重置main的新的高度
if(allLinesHeight > currentPageHeight){
addScoller();
}
createRow(id);
}
});
var zTree;
var demoIframe;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
edit: {
drag: {
autoExpandTrigger: true
},
enable: true,
showRemoveBtn: false,
showRenameBtn: false,
isCopy:true
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: zTreeBeforeClick,
beforeDrag: zTreeBeforeDrag
}
};
//点击之前的事件
function zTreeBeforeClick(treeId, treeNode){
var zTree = $.fn.zTree.getZTreeObj(treeNode);
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
return true;
}
}
//树的拖动事件
function zTreeBeforeDrag(event,treeNodes) {
$("div").on('mouseover','div',function(){
if (this.getAttribute('name') != 'rowElement') {
return;
}
var currentRoot = $(this);
var cellDivContain,lable,addNode,nodeId;
//将拖拽的信息添加到当前的div中
//根据当前的节点类型显示不同的标签
var node = treeNodes[0];
if (node === null || typeof(node) == "undefined" || node.length == 0) {
return false;
}
//获取拖拽的类型
var dragType = node.type;
if (null === dragType || "" === dragType) {
return false;
}
//获取当前的元素标签添加到div中的id
var cellId = getCellId(node.id);
if (null == cellId) {
//TODO 抛出异常
return ;
}
//判断当前id的元素是否存在如果存在提示不能添加同类别的标签： id相同
var isContain = checkCellId(currentRoot,cellId);
if (isContain) {
alert("当前维度的节点已经存在，请删除后在操作");
return;
}
//创建个容器div
cellDivContain = createDivContain(cellId);
//根据当前的类型显示那种控件1: select 标签； 2：输入框；3：单选框；4：其他
if(1 === dragType){
addNode = createSelect(cellId,node.data);
}else if (2 == dragType) {
addNode = createInput(cellId);
}else if (4 == dragType) {

}
//创建显示的id
lable = createLable(addNode.id,node.name);
cellDivContain.appendChild(lable);
cellDivContain.appendChild(addNode);
$(this)[0].appendChild(cellDivContain);
//销毁事件中的元素，防止多次默认添加
treeNodes = [];
addNode = null;
});
return false;
};
//计算当前节点最大的节点避免重复出现 CellId 的计算方式为 C+ 维度的id
function checkCellId(currentRoot,cellId){
var elements = currentRoot.children();
if (elements.length === 0) {
return;
}
//默认是false 当前div中不包含添加的维度
var isContains = false;
var cells = [],item;
for (var i = elements.length - 1; i >= 0; i--) {
item = elements[i];
//判断标签的类型当前只有 select 和 input 标签
if (item.tagName.toLocaleLowerCase() === "select") {
if (item.id === cellId) {
isContains = true;
break;
}
}
if (item.tagName.toLocaleLowerCase() === "input" && item.name === "cellElement") {
if (item.id === cellId) {
isContains = true;
break;
}
}
}
return isContains;
}
//创建输入框
function createInput(cellId){
var input = document.createElement('input');
input.setAttribute('class','inputClass');
input.setAttribute('id',cellId);
input.setAttribute('name','cellElement');
return input;
}
//创建名称此时不可以移动
function createLable(id,name){
var label = document.createElement('label');
label.setAttribute('id',id);
label.setAttribute('class','labelClass');
label.text="  ";
label.innerHTML = name+ '<br/>';
return label;
}

//创建下拉框
function createSelect(cellId,datas){
var select = document.createElement('select');
select.setAttribute('id',cellId);
select.setAttribute('name',"cellElement");
select.setAttribute('class','inputClass');
return analysisSelectData(select,datas);
}
//创建div 容器保存每个单元即维度
function createDivContain(id){
var cellDiv = document.createElement('div');
cellDiv.setAttribute('id',id);
cellDiv.setAttribute('class','cellDivContain');
return addClosed(cellDiv,id,'cellDiv_closed','deleteCell(this)');
}
//添加删除按钮
function addClosed(cellDiv,id,clss,clickName){
var closedSpan = document.createElement('span');
closedSpan.setAttribute('id',id);
closedSpan.setAttribute('class',clss);
closedSpan.setAttribute('onclick',clickName)
cellDiv.appendChild(closedSpan);
return cellDiv;
}
//删除每行的每列
function deleteCell(element){
element.parentElement.remove();
alert("删除维度成功");
}
//删除每行
function deleteRow(element){
element.parentElement.remove();
alert("删除当前行成功");
}
//解析select 下拉框的数据解析成
//A{
// key : id,
// value : value
//}
function analysisSelectData(select,datas){
if (datas.length === 0) {
select.add(new Option("请选择",''));
return select;
}
for (var i = datas.length - 1; i >= 0; i--) {
select.add(new Option(datas[i].value,datas[i].key));
}
return select;
}

//创建其他的暂时没有
function createOther(){

}
//添加鼠标移动的监听
$("div").on('mouseover','div',function(){
var element = $(this).get(0);
if (element.getAttribute('name') != 'rowElement') {
return;
}
$("#"+this.id).css("border-bottom","2px solid #555555");
});

//添加鼠标移动的监听
$("div").on('mouseout','div',function(){
var element = $(this).get(0);
if (element.getAttribute('name') != 'rowElement') {
return;
}
$("#"+this.id).css("border-top","2px bashed #CCCCCC");
$("#"+this.id).css("border-bottom","");
});
//添加事件
$("#addCosmbine").on('click',function(){
createRow('main');
})
//创建行的属性和元素
function createRow(mainDivId){
var rowId = getRowsId('rowElement');
//创建一个div
var div = document.createElement('div');
//设置div的属性
div.setAttribute('class','outRowClass');
div.setAttribute('id',rowId);
div.setAttribute('name','rowElement');
addClosed(div,rowId,'rowDiv_closed','deleteRow(this)');
var bo = document.getElementById('main');//获取body对象.
//动态插入到body中
bo.appendChild(div);

}
//获取最后一行的行id，并且重新生成新的行id
//生成原则：R + rowIndex R01 第一行
function getRowsId(name){
var resultId = '';
//设置默认的div的id 为R01
var defaultId = 'R01';
var defaultPrix = 'R';
//获取已经添加的当前元素的集合
var elements = $("div[name ='"+name+"']");
if (elements.length > 25) {
alert("请勿在进行添加列表,已达到上限");
return;
}
//按照列的顺序进行配置 div的id
if(elements.length == 0){
resultId = defaultId;
}else{
var size = elements.length + 1;
if (size > 9) {
resultId = defaultPrix + '0' + size;
}else{
resultId = defaultPrix + size;
}
}
return resultId;
}
//获取列的id,即每个div中的标签元素
function getCellId(nodeId){
var resultId = '';
//设置默认的div的id 为R01
var defaultId = 'C01';
var defaultPrix = 'C';
resultId = defaultPrix + nodeId;
return resultId;
}
//测试节点数据
var zNodes = [
{id: 1, pId: 0, name: "测试", open: true},
{id: 104, pId: 1, name: "测试四", type: 1,data:[{key:'A',value:'测试1'},{key:'B',value:'测试2'}],file: "core/standardData"},
{id: 107, pId: 1, name: "测试七", type: 2,data:[],file: "core/standardData"},
];
function dropPrev(treeId, nodes, targetNode) {
return true;
}
</script>
</html>

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

猜你喜欢