可拖动菜单 【总结】

createDOMtree:function(DataDOM){

//----------------------分析数据结构，生成节点树-------------------------//
function fn(v,ele){

if( !ele ){
var aUl = document.createElement(‘ul‘);
aUl.setAttribute(‘id‘,‘zdx_v0‘);
}

//---------------------------数组走这里------------------------//
if( Array.isArray(v) ){
//如果是数组
for(var i=0,len=v.length; i<len; i++){

//如果是数组
if( Array.isArray(v[i]) ){
fn(v[i]); //递归

//如果是对象
}else if( typeof v[i] === ‘object‘ ){

var aLi = document.createElement(‘li‘);
aLi.setAttribute(‘onoff‘,‘true‘);

//---------给父级li加个标识------------//
aLi.setAttribute(‘attr‘,‘liWrap‘);
//---------给父级li加个标识------end---//

//---------给最外层的li加个标识--------//
if( v[i].v1 ){
aLi.setAttribute(‘v‘,‘v1‘);
}
//---------给最外层的li加个标识----end--//

ele ? ele.appendChild(aLi) : aUl.appendChild(aLi);

var oUl = document.createElement(‘ul‘);
aLi.appendChild(oUl);

fn(v[i],oUl); //递归

//如果是字符串
}else{
var oLi = document.createElement(‘li‘),
oB = document.createElement(‘b‘),
txt = document.createTextNode(v[i]),
oI = document.createElement(‘i‘);

//-------阻止父级事件触发的开关-------------//
oLi.setAttribute(‘onoff‘,‘true‘);
//-------阻止父级事件触发的开关-------------//

//---------给普通li加个标识------------//
oLi.setAttribute(‘attr‘,‘li‘);
//---------给普通li加个标识------end---//

//--------小圆点-----------//
oI.setAttribute(‘class‘,‘iconP‘);
//--------小圆点-----------//

oLi.appendChild(oI);
oB.appendChild(txt);
oLi.appendChild(oB);

(ele) && ( ele.appendChild(oLi) );
(aUl) && ( aUl.appendChild(oLi) );
}
}
//---------------------------数组走这里-------------end-----------//

//---------------------------对象走这里---------------------------//
}else if( typeof v === ‘object‘ ){

//枚举对象每一项
for(var attr in v){

//如果是数组
if( Array.isArray(v[attr]) ){
fn(v[attr],ele); //递归

//如果算是对象
}else if( typeof v[attr] === ‘object‘ ){
fn(v[attr]); //递归

//如果是字符串
}else{

var oSpan = document.createElement(‘span‘),
oB = document.createElement(‘b‘),
txt = document.createTextNode(v[attr]),
oI = document.createElement(‘i‘);

//--------小圆点-----------//
oI.setAttribute(‘class‘,‘iconP‘);
oSpan.appendChild(oI);
//--------小圆点-----------//

oB.appendChild(txt);
oSpan.appendChild(oB);
ele.setAttribute(‘class‘,attr);
ele.appendChild(oSpan);
}
}
//---------------------------对象走这里-----------end-------------//

//---------------------字符串----------------//
}else{
//do someing
}
//---------------------字符串-------end-------//

return aUl;

}

//----------------------分析数据结构，生成节点树------------end-----------//

//-----生成按钮-----//
var oDiv = document.createElement(‘div‘);
oDiv.setAttribute(‘id‘,‘zdx_menu‘);

var btnWrap = document.createElement(‘div‘);
btnWrap.setAttribute(‘id‘,‘zdx_btnWrap‘)

var idNames = [‘zdx_cancel‘,‘zdx_submit‘,‘zdx_modify‘];
var btnNames = [‘取消‘,‘确定‘,‘修改‘];
var oA = null;

for(var i=0,iLen=idNames.length; i<iLen; i++){
oA = document.createElement(‘a‘);
oA.setAttribute(‘id‘,idNames[i]);
oA.appendChild(document.createTextNode(btnNames[i]));
btnWrap.appendChild(oA);
}
//-----生成按钮-----//

//-----包装节点树----//
oDiv.appendChild(btnWrap);
oDiv.appendChild(fn(DataDOM));
//-----包装节点树----//

//返回节点树
return oDiv;

},

/*
//试验数据
var arr = [

    {
        ‘v1‘:‘第一章‘,
        ‘data‘:[‘一章第1节‘,‘一章第2节‘,‘一章第3节‘,‘一章第4节‘,‘一章第5节‘]
    },

    {
        ‘v1‘:‘第二章‘,
        ‘data‘:[{

            ‘v2‘:‘二章第1节‘,
            ‘data‘:[‘第1节-1‘,‘第1节-2‘,‘第1节-3‘,‘第1节-4‘,‘第1节-5‘,‘第1节-6‘]

        },‘二章第2节‘,{

            ‘v2‘:‘二章第3节‘,
            ‘data‘:[‘第3节-1‘,‘第3节-2‘,{

                ‘v3‘:‘第3节-3‘,
                ‘data‘:[‘第3节-3-1‘,‘第3节-3-2‘,‘第3节-3-3‘,‘第3节-3-4‘,‘第3节-3-5‘]

            },{

                ‘v3‘:‘第3节-4‘,
                ‘data‘:[‘第4节-3-1‘,‘第4节-3-2‘,‘第4节-3-3‘,‘第4节-3-4‘,{

                    ‘v4‘:‘第4节-3-5‘,
                    ‘data‘:[‘第4节-3-5-1‘,‘第4节-3-5-2‘,‘第4节-3-5-3‘,‘第4节-3-5-4‘,‘第4节-3-5-5‘,‘第4节-3-5-6‘]

                }]

            },‘第3节-5‘]

        },‘二章第4节‘,‘二章第5节‘]
    },

    {
        ‘v1‘:‘第三章‘,
        ‘data‘:[‘三章第1节‘,‘三章第2节‘,‘三章第3节‘,‘三章第4节‘,‘三章第5节‘]
    },

    {
        ‘v1‘:‘第四章‘,
        ‘data‘:[‘四章第1节‘,‘四章第2节‘,‘四章第3节‘,‘四章第4节‘,‘四章第5节‘]
    },

    {
        ‘v1‘:‘第五章‘,
        ‘data‘:[‘五章第1节‘,‘五章第2节‘,‘五章第3节‘,‘五章第4节‘,{
            ‘v2‘:‘五-壹‘,
            ‘data‘:[‘五-壹-1‘,‘五-壹-2‘,‘五-壹-3‘,‘五-壹-4‘,‘五-壹-5‘,{
                ‘v3‘:‘五-壹-壹‘,
                ‘data‘:[‘五-壹-壹-1‘,‘五-壹-壹-2‘,‘五-壹-壹-3‘,‘五-壹-壹-4‘]
            }]
        },‘五章第5节‘,‘五章第6节‘,‘五章第7节‘,‘五章第8节asdfasdfasdfasdfasdfadsfasdf‘]
    },



];
*/









//实施继承功能的函数
function extendByObj( child , parent , propertys ){

    var F = function(){};
    F.prototype = parent.prototype;

    child.prototype = new F();

    for(var attr in propertys){
        child.prototype[attr] = propertys[attr];
    }

    child.prototype.constructor = child;

}




//MenuData:操作数据，第一层继承，继承Object
function MenuData(data){}
MenuData.prototype = {




    //---------------------------------插入新的数据------------------------------------------------//
    insertNewData:function(li,t){

        var targetArr = this.traceDataByDOM(this.data,t);
        var tLiData = null;
        var tV = null;
        var correctV = null;

        if( li.getAttribute(‘attr‘) === ‘li‘ ){
            tLiData = li.getElementsByTagName(‘b‘)[0].innerHTML;
        }else if( li.getAttribute(‘attr‘) === ‘liWrap‘ ){

            for( var attr in targetArr[2] ){
                ( typeof targetArr[2][attr] === ‘string‘ ) && ( tV = attr );
            }

            // v的值应该比包含它的数组+1
            correctV = tV[0] + ( parseInt(tV[1]) + 1 );

            tLiData = {
                [correctV] : (li.getElementsByTagName(‘span‘)[0].getElementsByTagName(‘b‘)[0].innerHTML),
                data:[]
            };

        }else{
            tLiData = ‘未能识别数据‘;
        }


        targetArr[0].push( tLiData );


    },
    //---------------------------------插入新的数据------------------------------------------------//









    //-------------------------------修改数据-----------------------------------------------//
    modifyData:function(newValue,li){

        var targetArr = this.traceDataByDOM( this.data , li );

        targetArr[0][targetArr[1]] = newValue;

        console.log( this.data );

    },
    //-------------------------------修改数据-----------------------------------------------//








    //------------------------------删除数据--------------------------------------------------//
    deleteData:function(li){

        var targetArr = this.traceDataByDOM(this.data,li);

        targetArr[0].splice( targetArr[1] , 1 );

        console.log( this.data );

    },
    //------------------------------删除数据--------------------------------------------------//











    //------------------------根据DOM修改其在数据中对应的位置-------------------------------//
    changeOfPositionForData:function( target , t , insertOnOff ){
        //target是选中项，t是target在DOM上的新位置

        console.log(t);
        var tarInfo = this.traceDataByDOM( this.data , target );
        var tInfo = this.traceDataByDOM( this.data , t );

        // 值调整
        ( insertOnOff === ‘after‘ ) && ( tInfo[1] = tInfo[1]+1 );
        ( tarInfo[1] > tInfo[1] && tarInfo[1] == tInfo[1] ) && ( tarInfo[1] = tarInfo[1]+1 );


        var tarV = null;
        var tV = null;
        var correctV = null;


        if( typeof tarInfo[2] === ‘object‘ ){
            
            // tarInfo[0][tarInfo[1]]指向的是选中的对象
            // tarInfo[2]指向的是包含这个对象的数组
            // tInfo[2]指向的是包含目标项数组

            // 通过for in找到v值
            for( var attr in tarInfo[0][tarInfo[1]] ){
                ( typeof tarInfo[0][tarInfo[1]][attr] === ‘string‘ ) && ( tarV = attr );
            }

            // 通过for in找到v值
            for( var attr in tInfo[2] ){
                ( typeof tInfo[2][attr] === ‘string‘ ) && ( tV = attr );
            }

            // v的值应该比包含它的数组+1
            correctV = tV[0] + ( parseInt(tV[1]) + 1 );

            // 利用JSON.stringify将要改动的json变换成字符串，利用replace替换v的值，再反向回json
            tarInfo[0][tarInfo[1]] = 
                JSON.parse(
                    JSON.stringify( tarInfo[0][tarInfo[1]] ).replace(tarV,correctV)
                );


        }


        tInfo[0].splice( tInfo[1] , 0 , tarInfo[0][tarInfo[1]] );
        tarInfo[0].splice( [tarInfo[1]] , 1 );


        console.log(this.data)


    },
    //------------------------根据DOM修改其在数据中对应的位置-------------------------------//









    //------用于找到tNode在数组中的位置的父级，以及具体位置---------//
    traceDataByDOM:function(arr,tNode){

        var tNodePos = this.generatePosChain(tNode);
        var targetParent = arr[ tNodePos[0] ];
        var targetPos = tNodePos[tNodePos.length-1];

        for(var i=1,iLen=tNodePos.length-1; i<iLen; i++){

            targetParent = targetParent.data[ tNodePos[i] ];

        }

        return [ targetParent.data , targetPos , targetParent ];


    },
    //------用于找到tNode在数组中的位置的父级，以及具体位置---------//





    //----tNode的在数组中的具体位置----//
    generatePosChain(tNode){

        var chain = [];
        var prePos = tNode;
        var cnt = 0;
        var tPreSibling = null;


        while( prePos ){

            tPreSibling = prePos.previousSibling;

            while( tPreSibling ){
                if( tPreSibling.getAttribute(‘attr‘) === ‘li‘ || tPreSibling.getAttribute(‘attr‘) === ‘liWrap‘ ){
                    cnt++;
                }
                tPreSibling = tPreSibling.previousSibling;

            }
            chain.push( cnt );
            cnt = 0;
            prePos = prePos.parentNode.parentNode;

            if( prePos.nodeName === ‘DIV‘ ){
                break;
            }
        }
        return chain.reverse();
    }
    //----tNode的在数组中的具体位置----//







};
MenuData.prototype.constructor = MenuData;






//DataToDOM:根据数据渲染DOM，根据DOM更新数据
function DataToDOM(){}
extendByObj( DataToDOM , MenuData , {

    /*
    创建DOM节点树方法
    插入DOM节点树到页面的方法
    移动节点的方法
    删除节点的方法
    */
    createDOMtree:function(DataDOM){


        //----------------------分析数据结构，生成节点树-------------------------//
        function fn(v,ele){

            if( !ele ){
                var aUl = document.createElement(‘ul‘);
                aUl.setAttribute(‘id‘,‘zdx_v0‘);
            }


            //---------------------------数组走这里------------------------//
            if( Array.isArray(v) ){
                //如果是数组
                for(var i=0,len=v.length; i<len; i++){

                    //如果是数组
                    if( Array.isArray(v[i]) ){
                        fn(v[i]);    //递归




                    //如果是对象
                    }else if( typeof v[i] === ‘object‘ ){

                        var aLi = document.createElement(‘li‘);
                        aLi.setAttribute(‘onoff‘,‘true‘);

                        //---------给父级li加个标识------------//
                        aLi.setAttribute(‘attr‘,‘liWrap‘);
                        //---------给父级li加个标识------end---//




                        //---------给最外层的li加个标识--------//
                        if( v[i].v1 ){
                            aLi.setAttribute(‘v‘,‘v1‘);
                        }
                        //---------给最外层的li加个标识----end--//



                        ele ? ele.appendChild(aLi) : aUl.appendChild(aLi);

                        var oUl = document.createElement(‘ul‘);
                        aLi.appendChild(oUl);

                        fn(v[i],oUl);    //递归


                    //如果是字符串
                    }else{
                        var oLi = document.createElement(‘li‘),
                            oB = document.createElement(‘b‘),
                            txt = document.createTextNode(v[i]),
                            oI = document.createElement(‘i‘);


                        //-------阻止父级事件触发的开关-------------//    
                        oLi.setAttribute(‘onoff‘,‘true‘);
                        //-------阻止父级事件触发的开关-------------//


                        //---------给普通li加个标识------------//
                        oLi.setAttribute(‘attr‘,‘li‘);
                        //---------给普通li加个标识------end---//



                        //--------小圆点-----------//
                        oI.setAttribute(‘class‘,‘iconP‘);
                        //--------小圆点-----------//



                        oLi.appendChild(oI);
                        oB.appendChild(txt);
                        oLi.appendChild(oB);


                        (ele) && ( ele.appendChild(oLi) );
                        (aUl) && ( aUl.appendChild(oLi) );
                    }
                }
            //---------------------------数组走这里-------------end-----------//


            //---------------------------对象走这里---------------------------//
            }else if( typeof v === ‘object‘ ){

                //枚举对象每一项
                for(var attr in v){


                    //如果是数组
                    if( Array.isArray(v[attr]) ){
                        fn(v[attr],ele);        //递归



                    //如果算是对象
                    }else if( typeof v[attr] === ‘object‘ ){
                        fn(v[attr]);        //递归


                    //如果是字符串
                    }else{


                        var oSpan = document.createElement(‘span‘),
                            oB = document.createElement(‘b‘),
                            txt = document.createTextNode(v[attr]),
                            oI = document.createElement(‘i‘);

                        //--------小圆点-----------//
                        oI.setAttribute(‘class‘,‘iconP‘);
                        oSpan.appendChild(oI);
                        //--------小圆点-----------//


                        oB.appendChild(txt);
                        oSpan.appendChild(oB);
                        ele.setAttribute(‘class‘,attr);
                        ele.appendChild(oSpan);
                    }
                }
            //---------------------------对象走这里-----------end-------------//



            //---------------------字符串----------------//
            }else{
                //do someing
            }
            //---------------------字符串-------end-------//



            return aUl;

        }







        //----------------------分析数据结构，生成节点树------------end-----------//


        //-----生成按钮-----//
        var oDiv = document.createElement(‘div‘);
        oDiv.setAttribute(‘id‘,‘zdx_menu‘);


        var btnWrap = document.createElement(‘div‘);
        btnWrap.setAttribute(‘id‘,‘zdx_btnWrap‘)


        var idNames = [‘zdx_cancel‘,‘zdx_submit‘,‘zdx_modify‘];
        var btnNames = [‘取消‘,‘确定‘,‘修改‘];
        var oA = null;


        for(var i=0,iLen=idNames.length; i<iLen; i++){
            oA = document.createElement(‘a‘);
            oA.setAttribute(‘id‘,idNames[i]);
            oA.appendChild(document.createTextNode(btnNames[i]));
            btnWrap.appendChild(oA);
        }
        //-----生成按钮-----//



        //-----包装节点树----//
        oDiv.appendChild(btnWrap);
        oDiv.appendChild(fn(DataDOM));
        //-----包装节点树----//


        //返回节点树
        return oDiv;

    },


    //插入节点树到界面里
    insertDOMtreeTo:function(parent,DOMtree){

        parent.appendChild(DOMtree);

    },


    //删除节点
    delNode:function(tNode){
        tNode.parentNode.removeChild(tNode);
    },


    //根据DOM更新数据
    renewAttr:function(tNodeParent,nowNodeParent){
        var oriLi = tNodeParent.getElementsByTagName(‘li‘),
            nowLi = nowNodeParent.getElementsByTagName(‘li‘);


        var len = oriLi.length > nowLi.length ? oriLi.length : nowLi.length,
            o = null,
            n = null;

        for(var i=0; i<len; i++){
            o = oriLi[i];
            n = nowLi[i];

            if( o ){
                o.setAttribute(‘cid‘,i);
            }
            if( n ){
                n.setAttribute(‘cid‘,i);
            }
        }
    },



    value:function(){
        return this.data;
    }



});





//Interaction:交互，实现拖拽
function Interaction(parent,data){

    this.data = data;

    this.DOMBackup = null;

    this.DataBackup = null;

    this.DOMtree = this.createDOMtree(data,this.colors);

    this.insertDOMtreeTo(parent,this.DOMtree);

    this.btn();

    this.redact();

    this.roll(‘init‘);

    this.value

}







































extendByObj( Interaction , DataToDOM , {



    //编辑、删除、确认编辑、取消编辑、确认删除、取消删除按钮
    redact:function(){

        var zdx_v0 = $(‘zdx_v0‘);
        var oI = null;
        var oITxtNode = null;


        var cssNames = [‘fa fa-pencil-square-o‘,‘fa fa-trash-o‘,‘fa fa-check‘,‘fa fa-times‘,‘‘,‘‘];
        var idNames = [‘modifyIcon‘,‘deleteIcon‘,‘checkIcon‘,‘repealIcon‘,‘tDeleteCheck‘,‘tDeleteRepeal‘];
        var btnTitles = [‘编辑‘,‘删除‘,‘确认编辑‘,‘取消编辑‘,‘确认删除‘,‘取消删除‘];
        var oITxt = [‘‘,‘‘,‘‘,‘‘,‘确认删除‘,‘取消‘];



        for(var i=0,iLen=idNames.length; i<iLen; i++){

            oI = document.createElement(‘i‘);

            cssNames[i]        &&        oI.setAttribute(‘class‘,cssNames[i]);
            btnTitles[i]     &&        oI.setAttribute(‘title‘,btnTitles[i]);
            true            &&        oI.setAttribute(‘attr‘,‘icon‘);
            idNames[i]        &&        oI.setAttribute(‘id‘,idNames[i]);
            oITxt[i]        &&        ( oITxtNode = document.createTextNode(oITxt[i]) );
            oITxtNode        &&        oI.appendChild( oITxtNode );
            oITxtNode        &&        (oITxtNode = null);
            zdx_v0            &&        zdx_v0.appendChild(oI);

        }

    },




    //修改，取消，确认按钮
    btn:function(){


        var cancel = $(‘zdx_cancel‘);
        var submit = $(‘zdx_submit‘);
        var modify = $(‘zdx_modify‘);
        var zdx_v0 = null;
        var liWraps = null;
        var zdx_menu = $(‘zdx_menu‘);
        var _this = this;
        var addBtn = getAttrEle( ‘li‘ , zdx_v0 , ‘attr‘ , ‘btnChild‘ );


        //--------------------------------------修改事件-------------------------------------------//
        modify.onclick = function(){



            //编辑前备份当前节点的状态
            _this.DOMBackup = $(‘zdx_v0‘).cloneNode(true);
            _this.DataBackup = copyData( _this.data );



            //----隐藏当前按钮和删除按钮----//
            this.style.display = ‘none‘;
            cancel.style.display = ‘block‘;
            submit.style.display = ‘block‘;
            //----隐藏当前按钮和删除按钮----//


            //--即时获列表，因为点击取消再次点击修改获得的列表是上一次的，所以...---//
            zdx_v0 = $(‘zdx_v0‘);
            //--即时获列表---//


            //调用drag方法，使所以按li有相关功能
            _this.drag(true);



            //-----------点击的时候新增供添加的按钮---------//
            liWraps = getAttrEle( ‘li‘ , zdx_v0 , ‘attr‘ , ‘liWrap‘ );
            for(var q=0,qLen=liWraps.length; q<qLen; q++){
                _this.btnForCreat( liWraps[q] );
            }
            //-----------点击的时候新增供添加的按钮---------//


            //---重头初始化卷起收起方法----//
            _this.roll(‘init‘);
            //---重头初始化卷起收起方法----//



        }
        //--------------------------------------修改事件-------------------------------------------//


        //--------------------------------------取消事件-------------------------------------------//
        cancel.onclick = function(){


            submit.style.display = ‘none‘;
            cancel.style.display = ‘none‘;
            modify.style.display = ‘block‘;

            //暴力取消——删除掉原来的，用备份的
            zdx_menu.removeChild(zdx_v0);
            zdx_menu.appendChild( _this.DOMBackup );
            _this.data = _this.DataBackup;



            //---找到所以的新增按钮并删除---//
            zdx_v0 = $(‘zdx_v0‘);
            addBtn = getAttrEle( ‘li‘ , zdx_v0 , ‘class‘ , ‘addNewNode‘ );

            for(var i=0,iLen=addBtn.length; i<iLen; i++){
                addBtn[i].parentNode.removeChild(addBtn[i]);
            }
            //---找到所以的新增按钮并删除---//


            //---重头初始化卷起收起方法----//
            _this.roll(‘init‘);
            //---重头初始化卷起收起方法----//



        }
        //--------------------------------------取消事件-------------------------------------------//


        //--------------------------------------确认事件-------------------------------------------//
        submit.onclick = function(){


            submit.style.display = ‘none‘;
            cancel.style.display = ‘none‘;
            modify.style.display = ‘block‘;




            //调用drag并传入false，使所有的功能失效
            _this.drag(false);


            //---找到所以的新增按钮并删除---//
            zdx_v0 = $(‘zdx_v0‘);
            addBtn = getAttrEle( ‘li‘ , zdx_v0 , ‘class‘ , ‘addNewNode‘ );

            for(var i=0,iLen=addBtn.length; i<iLen; i++){
                addBtn[i].parentNode.removeChild(addBtn[i]);
            }
            //---找到所以的新增按钮并删除---//

        }
        //--------------------------------------确认事件-------------------------------------------//

    },




    //添加新的父节点，添加新的子节点按钮
    //--------------------用于添加两个按钮，接收一个liWrap的li，并添加到其最后一个li后面-----------------//
    btnForCreat:function(liWrap){


        var oLi = null;
        var oI = null;
        var oB = null;
        var oBTxt = null;
        var oInput = null;
        var target = null;
        var oIcon = null;
        var txt = [‘添加新的父节点‘,‘添加新的子节点‘];
        var ids = [‘btn-parent‘,‘btn-child‘];
        var attrs = [‘btnParent‘,‘btnChild‘];


        //找到最后一个li
        target = liWrap.getElementsByTagName(‘ul‘)[0].lastElementChild;

        for(var j=0; j<2; j++){


            oLi = document.createElement(‘li‘);
            oB = document.createElement(‘b‘);
            oBTxt = document.createTextNode(txt[j]);
            oInput = document.createElement(‘input‘);
            oIcon = document.createElement(‘i‘);

            oLi.setAttribute(‘class‘,‘addNewNode‘);
            oLi.setAttribute(‘attr‘,attrs[j]);
            oLi.setAttribute(‘onoff‘,‘true‘);
            oIcon.setAttribute(‘class‘,‘fa fa-plus oIcon‘);
            oInput.setAttribute(‘class‘,‘oInput‘);
            oInput.style.display = ‘none‘;


            oLi.appendChild(oIcon);
            oB.appendChild(oBTxt);
            oLi.appendChild(oB);
            oLi.appendChild(oInput);

            //添加到最后一个li后面
            insertAfter(oLi,target);


        }


        //调用按钮事件绑定方法
        this.bindCreateNodeEvent();

        //调用drag方法，主要是在drag里面有一些判定，判定这两个按钮不能被拖动，没有mouseover事件
        this.drag(true);
        return;

    },
    //--------------------用于添加两个按钮----------------------------------------------------------//






    //给添加按钮绑定事件
    bindCreateNodeEvent:function(){

        var _this = this;
        var zdx_v0 = $(‘zdx_v0‘);


        //-----每次调用都找出页面上所有的添加按钮------//
        var btnChilds = getAttrEle( ‘li‘ , zdx_v0 , ‘attr‘ , ‘btnChild‘ );
        var btnParents = getAttrEle( ‘li‘ , zdx_v0 , ‘attr‘ , ‘btnParent‘ );
        //-----每次调用都找出页面上所有的添加按钮------//



        var oLi = null;
        var oUl = null;
        var oSpan = null;
        var oSpanTxt = null;
        var oI = null;
        var oB = null;
        var oBTxt = null;
        var tGrade = 0;


        //---把按钮需要绑定的事件封装成函数-----------------------------------------------------//
        function fn(type,target){


            oLi = document.createElement(‘li‘);
            oI = document.createElement(‘i‘);
            oB = document.createElement(‘b‘);
            oI.setAttribute(‘class‘,‘iconP‘);
            oLi.appendChild(oI);


            //如果是“小”按钮，只添加一个新的li在其前面
            if(type == ‘btnChilds‘){

                oBTxt = document.createTextNode(‘未命名子节点‘);
                oLi.setAttribute(‘onoff‘,‘true‘);
                oLi.setAttribute(‘attr‘,‘li‘);



                oB.appendChild(oBTxt);
                oLi.appendChild(oB);
                // target是按钮本身，此刻的target是“添加新的节点”的按钮，新建的单个li插入到这个按钮前面
                insertBefore(oLi,target);
                _this.insertNewData( oLi , target.previousSibling );


            //如果是“大”按钮，则需要，新增一个liWrap的li，里面也需要两个用来添加节点的按钮
            }else if( type == ‘btnParents‘ ){


                oUl = document.createElement(‘ul‘);
                oSpan = document.createElement(‘span‘);
                oBTxt = document.createTextNode(‘未命名父节点‘);


                //需要给新的liWrap的li下的ul设一个等级
                tGrade = ‘v‘ + ( 
                    parseInt(
                        getParent(target,‘UL‘).getAttribute(‘class‘)[1] ) + 1 
                    );

                oLi.setAttribute(‘attr‘,‘liWrap‘);
                oLi.setAttribute(‘onoff‘,‘true‘);
                oUl.setAttribute(‘class‘,tGrade);


                oB.appendChild(oBTxt);
                oSpan.appendChild(oI);
                oSpan.appendChild(oB);
                oUl.appendChild(oSpan);
                oLi.appendChild(oUl);

                //给新建的liWrap插入两个用于添加节点的按钮
                _this.btnForCreat(oLi);

                //将他新建的liWrap插入到正确位置
                insertBefore(oLi,target.previousSibling);
                _this.insertNewData( oLi , target.previousSibling.previousSibling );


            }

            // 需要将新的节点“纳入”到整体中，调用drag，主要是它会遍历所有的节点
            _this.drag(true);

        }
        //---把按钮需要绑定的事件封装成函数-----------------------------------------------------//




        for(var i=0,iLen=btnChilds.length; i<iLen; i++){

            btnChilds[i].onclick = function(){
                fn(‘btnChilds‘,this);
            }



            btnParents[i].onclick = function(){
                fn(‘btnParents‘,this);
                //需要给新增的liWrap里的添加节点的按钮绑定事件，调用一遍当前方法，传入这个新建的liWrap
                _this.bindCreateNodeEvent();
            }

        }

    },











    //实现，拖动，编辑，删除功能
    drag:function(onOff){
        //onoff为true：开启编辑功能
        //onoff为false：关闭编辑功能


        //全局this
        var _this = this;

        //基本
        var zdx_v0 = $(‘zdx_v0‘);
        var allEle = zdx_v0.getElementsByTagName(‘li‘);
        var allSpan = zdx_v0.getElementsByTagName(‘span‘);

        //鼠标hover
        var t = null;
        var markList = [];
        var tParent = null;
        var oriH = null;
        var target = null;

        //提示线
        var aimLine = $(‘aimLine‘);
        var aimLinePop = null;
        var aimLinePopTxt = null;
        var top = null;
        var aimT = 0;

        //编辑，删除节点获得
        // iconNodes[0] = $(‘modifyIcon‘),
        // tDelete = $(‘deleteIcon‘),
        // tCheck = $(‘checkIcon‘),
        // tRepeal = $(‘repealIcon‘),
        // tDeleteCheck = $(‘tDeleteCheck‘),
        // tDeleteRepeal = $(‘tDeleteRepeal‘)
        var iconNodes = [
            $(‘modifyIcon‘),
            $(‘deleteIcon‘),
            $(‘checkIcon‘),
            $(‘repealIcon‘),
            $(‘tDeleteCheck‘),
            $(‘tDeleteRepeal‘)
        ];

        //编辑，删除节点位置
        var redactPos = null;

        //编辑输入框
        var oInput = null;
        var oriInput = null;

        //辅助变量
        var insertOnOff = null;
        var eB = null;
        var modifyOnOff = false;
        var moveAble = true;
        iconNodes[0].onOff = true;
        iconNodes[1].onOff = true;


        //把上一次留下的提示线删了
        if(aimLine){
            aimLine.parentNode.removeChild(aimLine);
        }






        for(var i=0,iLen=allEle.length; i<iLen; i++){

            allEle[i].onmouseover = function(e){
                //是否开启此功能,通过再次给每个li绑定事件的机会，让它们绑定一个空
                if(onOff === false){
                    return;
                }



                //-----------------阻止父li的mouseover事件的触发----------后期用监听改进------------------//
                tParent = getParent(this,‘LI‘);

                if( this.getAttribute(‘onoff‘) === ‘true‘ ){
                    //将取得的正确的this保存下来
                    t = this;
                    if( tParent ){
                        tParent.setAttribute(‘onoff‘,‘false‘);
                        markList.push( tParent );
                    }

                }else{

                    if( tParent ){
                        tParent.setAttribute(‘onoff‘,‘false‘);
                        markList.push( tParent );
                    }else{
                        //若tParent为空，说明再往上没有li了，for循环将修改过的li属性再恢复
                        for( var i=0,iLen=markList.length; i<iLen; i++ ){
                            markList[i].setAttribute(‘onoff‘,‘true‘);
                        }

                    }
                    return;
                }
                //-----------------阻止父li的mouseover事件的触发----------end------------------//

                //b节点，存放字符串的节点
                eB = t.getElementsByTagName(‘b‘)[0];





                //---------------------设置“编辑”、“删除”两个按钮的位置-------------------------//
                redactPos = offsetToBODY(t) - offsetToBODY(zdx_v0) + 5;


                // modifyOnOff:编辑，或删除状态开启，隐藏这两个按钮，否则显示
                if( !modifyOnOff ){

                    if( t.getAttribute(‘class‘) === ‘addNewNode‘ ){
                        iconNodes[0].style.display = ‘none‘;
                        iconNodes[1].style.display = ‘none‘;
                    }else{
                        iconNodes[0].style.display = ‘block‘;
                        iconNodes[1].style.display = ‘block‘;
                    }
                }


                if(moveAble){


                    for(var q=0,qLen=iconNodes.length; q<qLen; q++){
                        iconNodes[q].style.top = redactPos + ‘px‘;

                        if( t.getAttribute(‘attr‘) === ‘liWrap‘ && t.getAttribute(‘v‘) === ‘v1‘ ){
                            iconNodes[q].style.top = redactPos + 9 + ‘px‘;
                        }

                    }

                }                
                //---------------------设置“编辑”、“删除”、“添加”两个按钮的位置-------------------------//





                iconNodes[1].onclick = function(){

                    //------点击禁止按钮移动---------//
                    moveAble = false;
                    //------点击禁止按钮移动---------//


                    modifyOnOff = true;
                    iconNodes[1].style.display = ‘none‘;
                    iconNodes[0].style.display = ‘none‘;

                    iconNodes[4].style.display = ‘block‘;
                    iconNodes[5].style.display = ‘block‘;


                    if(eB.parentNode.nodeName === ‘SPAN‘){
                        eB.style.color = ‘#ffc3ce‘;
                    }

                    if(eB.parentNode.nodeName === ‘LI‘){
                        eB.style.color = ‘#dcdcdc‘;
                    }
                    



                }




                iconNodes[0].onclick = function(){

                    //------点击禁止按钮移动---------//
                    moveAble = false;
                    //------点击禁止按钮移动---------//


                    //------隐藏按钮----------//
                    iconNodes[0].style.display = ‘none‘;
                    iconNodes[1].style.display = ‘none‘;
                    //------隐藏按钮----------//



                    //-------显示另一组按钮---------//
                    iconNodes[2].style.display = ‘block‘;
                    iconNodes[3].style.display = ‘block‘;
                    //-------显示另一组按钮---------//

                    //编辑状态开启
                    modifyOnOff = true;

                    //原文本获取
                    eB.style.opacity = 0;
                    oriInput = eB.innerHTML;

                    //插入输入框
                    oInput = document.createElement(‘input‘);
                    oInput.setAttribute(‘class‘,‘oInput‘);
                    oInput.value = ‘点击此处输入内容‘;

                    insertAfter( oInput , eB );
                }





                iconNodes[0].onmousedown = function(){
                    iconNodes[0].onOff = false;
                }



                iconNodes[1].onmousedown = function(){
                    iconNodes[1].onOff = false;
                }




                //-----------输入框获取焦点、失去焦点事件-------------//
                if(oInput){
                    oInput.onfocus = function(){
                        if(oInput.value === ‘点击此处输入内容‘){
                            oInput.value = ‘‘;
                        }
                    }


                    oInput.onblur = function(){
                        if(oInput.value === ‘‘){
                            oInput.value = ‘点击此处输入内容‘;
                        }
                    }
                }
                //-----------输入框获取焦点、失去焦点事件-------------//





                //------------确定输入内容-------------------//
                iconNodes[2].onclick = function(){

                    iconNodes[2].style.display = ‘none‘;
                    iconNodes[3].style.display = ‘none‘;


                    iconNodes[0].style.display = ‘block‘;
                    iconNodes[1].style.display = ‘block‘;


                    if( oInput.value != oriInput && oInput.value != ‘‘ && oInput.value != ‘点击此处输入内容‘ ){
                        eB.innerHTML = oInput.value;
                        // 调用修改数据方法
                        _this.modifyData( oInput.value , oInput.parentNode );
                    }
                    
                    oInput.parentNode.removeChild(oInput);
                    eB.style.opacity = 1;

                    modifyOnOff = false;
                    moveAble = true;
                }


                //------------确定输入内容-------------------//





                //------------取消输入内容-------------------//
                iconNodes[3].onclick = function(){

                    iconNodes[2].style.display = ‘none‘;
                    iconNodes[3].style.display = ‘none‘;


                    iconNodes[0].style.display = ‘block‘;
                    iconNodes[1].style.display = ‘block‘;

                    oInput.parentNode.removeChild(oInput);

                    eB.innerHTML = oriInput;
                    eB.style.opacity = 1;
                    oriInput = null;

                    modifyOnOff = false;
                    moveAble = true;
                }
                //------------取消输入内容-------------------//







                //------------确定删除内容-------------------//
                iconNodes[4].onclick = function(){
                    iconNodes[4].style.display = ‘none‘;
                    iconNodes[5].style.display = ‘none‘;


                    iconNodes[0].style.display = ‘block‘;
                    iconNodes[1].style.display = ‘block‘;



                    modifyOnOff = false;
                    moveAble = true;


                    _this.deleteData(t);
                    t.parentNode.removeChild(t);

                }
                //------------确定删除内容-------------------//




                //------------取消删除内容-------------------//
                iconNodes[5].onclick = function(){
                    iconNodes[4].style.display = ‘none‘;
                    iconNodes[5].style.display = ‘none‘;


                    iconNodes[0].style.display = ‘block‘;
                    iconNodes[1].style.display = ‘block‘;


                    if(eB.parentNode.nodeName === ‘SPAN‘){
                        eB.style.color = ‘‘;
                    }

                    if(eB.parentNode.nodeName === ‘LI‘){
                        eB.style.color = ‘‘;
                    }


                    modifyOnOff = false;
                    moveAble = true;


                }
                //------------取消删除内容-------------------//

            }    //allEle[i].onmouseover结束







            allEle[i].onmouseout = function(){


                if(!moveAble){
                    return;
                }


                if( onOff === false ){
                    return;
                }


                //-----------防止闪烁-----------------------//
                iconNodes[0].onmouseover = function(){
                    iconNodes[0].style.display = ‘block‘;
                    iconNodes[1].style.display = ‘block‘;
                }

                iconNodes[1].onmouseover = function(){
                    iconNodes[0].style.display = ‘block‘;
                    iconNodes[1].style.display = ‘block‘;
                }
                //-----------防止闪烁----------end----------//

            }    //allEle[i].onmouseout结束







            allEle[i].onmousedown = function(e){


                //---------zdx_modify控制的开关---------------//
                if(onOff === false){
                    return;
                }
                //---------由zdx_modify控制的开关---------------//




                //---------由编辑、删除、确定编辑、取消编辑、确定删除、取消删除控制的开关--------//
                if(!moveAble){
                    return;
                }
                //---------由编辑、删除、确定编辑、取消编辑、确定删除、取消删除控制的开关--------//




                //------注意事项-----//
                /*
                由于界面上所有的li都有绑上事件，
                且这些有事件的li还有嵌套关系，
                在chrome里点击的时候是被点击的li
                先执行事件再执行父级li，所以，我
                写了一个阻止父级li执行事件的判断，
                就是利用自定义属性定义的开关，然后
                在不允许执行事件的父级li里提前return掉。
                这里可能有个隐藏的坑，就是我所有的
                变量都定义在最外层，在阻止父级判断里
                用到的变量最终的值取决于判断的执行和
                最后一个父级li执行完毕后赋予的值，所以
                要小心，不要在【阻止父级li的判断】里随意
                保存重要的值！！！
                */



                //-----------------阻止父li的mouseover事件的触发----------后期用监听改进------------------//
                tParent = getParent(this,‘LI‘);

                if( this.getAttribute(‘onoff‘) === ‘true‘ ){
                    //将取得的正确的this保存下来
                    target = this;

                    if(tParent){
                        tParent.setAttribute(‘onoff‘,‘false‘);
                        markList.push( tParent );
                    }


                }else{

                    if( tParent ){
                        tParent.setAttribute(‘onoff‘,‘false‘);
                        markList.push( tParent );
                    }else{
                        //若tParent为空，说明再往上没有li了，for循环将修改过的li属性再恢复
                        for( var i=0,iLen=markList.length; i<iLen; i++ ){
                            markList[i].setAttribute(‘onoff‘,‘true‘);
                        }

                    }
                    return;
                }
                //-----------------阻止父li的mouseover事件的触发----------end------------------//







                //----------------编辑按钮、或删除按钮被点中不允许移动节点，创建提示线-----------//
                if( !iconNodes[0].onOff || !iconNodes[1].onOff ){
                    iconNodes[0].onOff = true;
                    iconNodes[1].onOff = true;
                    return;
                }
                //----------------编辑按钮、或删除按钮被点中不允许移动节点，创建提示线-----------//





                //------判断是不是添加节点的按钮--------//


                if(t.getAttribute(‘class‘) === ‘addNewNode‘){
                    return;
                }

                //------判断是不是添加节点的按钮--------//








                //-----------------创建一条提示线，作为到className为zdx_v0的最后一个子节点------------//
                if( !$(‘aimLine‘) ){
                    aimLine = document.createElement(‘div‘);
                    aimLine.setAttribute(‘id‘,‘aimLine‘);

                    aimLinePop = document.createElement(‘p‘);
                    aimLinePop.setAttribute(‘id‘,‘aimLinePop‘);


                    aimLine.appendChild(aimLinePop);
                    zdx_v0.appendChild(aimLine);


                    aimLine = $(‘aimLine‘);
                    aimLinePop = $(‘aimLinePop‘);

                }
                aimLine.style.display = ‘block‘;
                //-----------------创建一条提示线，作为到className为zdx_v0的最后一个子节点-----end----//





                //----------------高亮选中项---------------//
                target.style.background = ‘#ffd4dc‘;
                //----------------高亮选中项-------end-----//


                zdx_v0.onmousemove = function(e){


                    //----------加工一下t，就mouseover获得的t而言，我们只需要单个的li或span-----------------//
                    if( t.getElementsByTagName(‘li‘).length > 0 ){
                        t = t.getElementsByTagName(‘span‘)[0];
                    }

                    tH = getStyle(t,‘height‘,true);
                    //----------加工一下t，就mouseover获得的t而言，我们只需要单个的li或span------end--------//






                    //----------top始终相对于li计算-----------------//
                    top = e.clientY - offsetToBODY(t) + (document.documentElement.scrollTop);
                    //----------top始终相对于li计算-----------------//






                    

                    //-----------------------小于元素高度1/2判断----------------------------------//
                    if( top < tH/2 && t.getAttribute(‘class‘) !== ‘addNewNode‘ ){

                        aimLinePop.innerHTML = ‘插入到【‘+eB.innerHTML+‘】前面‘;

                        aimT = offsetToBODY(t) - offsetToBODY(zdx_v0);

                        aimLine.style.top = aimT + ‘px‘;

                        if( t.nodeName === ‘SPAN‘ ){
                            t = getParent(t,‘LI‘);
                        }

                        insertOnOff = ‘before‘;


                    }
                    //-----------------------小于元素高度1/2判断---------------end-----------------//


                    //-----------------------大于元素高度1/2判断------------------------------------//
                    if( top > tH/2 && t.getAttribute(‘class‘) !== ‘addNewNode‘  ){


                        aimLinePop.innerHTML = ‘插入到【‘+eB.innerHTML+‘】后面‘;


                        if( t.nodeName === ‘SPAN‘ ){
                            console.log( t.onOff );
                            if( t.onOff ){
                                aimLinePop.innerHTML = ‘插入到【‘+eB.innerHTML+‘】里面‘;
                            }else{
                                t = t.parentNode.parentNode;
                            }
                        }


                        

                        aimT = offsetToBODY(t) - offsetToBODY(zdx_v0) + tH;


                        aimLine.style.top = aimT + ‘px‘;

                        insertOnOff = ‘afert‘;

                    }
                    //-----------------------大于元素高度1/2判断-----------------end-----------------//
                    
                }    //zdx_v0.onmousemove结束

            }    //zdx_v0.onmousedown结束


            zdx_v0.onmouseup = function(){

                if(onOff == false){
                    return;
                }

                //-----------只有目标节点的等级比选中节点等级高才能插入成功---------//
                t.grade = parseInt( getParent(t,‘UL‘).className[1] );
                target.grade = parseInt( getParent(target,‘UL‘).className[1] );



                //-------判断插入到t上面还是下面---------//
                if(  insertOnOff === ‘before‘ && !contains(t,target) ){


                    //----------边界判断，如果目标t的ul是v1，应该应该作为v1的最后一项非添加按钮的li-------//
                    if( t.previousSibling.getAttribute(‘v‘) === ‘v1‘ ){

                        t.preUlLast = t.previousSibling.getElementsByTagName(‘ul‘)[0].lastElementChild;
                        t = t.preUlLast.previousSibling.previousSibling;


                        if( target != t ){
                            _this.changeOfPositionForData( target , t , ‘after‘ );
                            insertAfter( target , t );
                        }


                    }else{

                        if( target != t ){
                            _this.changeOfPositionForData( target , t ,‘before‘ );
                            insertBefore( target , t );
                        }
                        

                    }
                    //----------边界判断，如果目标t的ul是v1，应该应该作为v1的最后一项非添加按钮的li-------//

                    
                }else if( insertOnOff === ‘afert‘ && !contains(t,target)  ){

                    if( target != t ){
                        _this.changeOfPositionForData( target , t , ‘after‘ );
                        insertAfter( target , t );
                    }

                }else{
                    
                    /*do something*/

                }
                //-------判断插入到t上面还是下面----------//



                //-----------只有目标节点的等级比选中节点等级高才能插入成功---------//





                //------隐藏提示线，恢复原状------//
                if( aimLine ){
                    aimLine.style.display = ‘none‘;
                    aimLine.style.top = ‘‘;
                    target.style.background = ‘‘;
                }


                zdx_v0.onmousemove = null;
                //------隐藏提示线，恢复原状------//
                

            }    //zdx_v0.onmouseup结束


        }    //for结束

    },




    //计算ul的高度
    calculateUl:function(liWrap){

        var cnt = 0;

        cnt = getStyle(liWrap,‘height‘,true);

        return cnt;

    },





    //ul收起，降下方法
    roll:function(v){

        var zdx_v0 = $(‘zdx_v0‘);
        var liWraps = getAttrEle( ‘li‘ , zdx_v0 , ‘attr‘ , ‘liWrap‘ );
        var t = null;
        var markList = [];
        var tV1 = null;
        var tParent = null;
        var eUl = null;

        if( v === ‘init‘ ){

            for(var i=0,iLen=liWraps.length; i<iLen; i++){





                //----默认只显示一级菜单-----//
                if( liWraps[i].getAttribute(‘v‘) !== ‘v1‘ ){

                    liWraps[i].style.height = getStyle(

                        liWraps[i].getElementsByTagName(‘span‘)[0],
                        ‘height‘

                    );

                    // liWraps[i].style = ‘transition: height .5s; ‘+ liWraps[i].style.height +‘;‘

                    //开关为开
                    liWraps[i].getElementsByTagName(‘span‘)[0].onOff = false;

                }else{

                    //开关为关
                    liWraps[i].getElementsByTagName(‘span‘)[0].onOff = true;

                }
                //----默认只显示一级菜单-----//



                liWraps[i].getElementsByTagName(‘span‘)[0].onclick = function(){

                    console.log( this );
                    t = this;


                    if( !this.open ){

                        this.open = 
                        getStyle(
                            this,
                            ‘height‘,
                            true
                        )
                        +
                        getStyle(
                            this.nextSibling,
                            ‘height‘,
                            true
                        ) * (this.parentNode.getElementsByTagName(‘li‘).length-1);

                    }


                    if(!this.close){
                        this.close = getStyle( 
                            this,
                            ‘height‘,
                            true
                        );
                    }


                    if(this.onOff){
                        this.parentNode.parentNode.style.height = this.close + ‘px‘;
                        this.onOff = !this.onOff;
                    }else{

                        this.parentNode.parentNode.style.height = ‘‘;
                        this.onOff = !this.onOff;

                    }

                }
            }

        }




    },


});    // Interaction结束



var generateMenu = Interaction;