Skip to content Skip to sidebar Skip to footer
Home / Html / Html Lists / Javascript / Jquery / Tree

Create A Tree With Dynamic Level Feature For It's Nodes (movable Nodes) By Jquery

Post a Comment
I want create a Tree with UL and Li tags and using jQuery. I wand able to change the level of each node by arrow keys and mouse to the Left or Right??? I need movable nodes! Somet

Solution 1:

I created this idea with the following codes Here. anyone can use or extend it free... ;)

I know it can be improved and make a better version of it but now you can use it and enjoy....

It's features:

»» Support keyboard arrow keys to move the nodes (Left & Right)

»» Support dragging the nodes by Mouse to Right & Left

»» Save level data of each node in DOM and show it on each node

Thanks from @FabrícioMatté for his answer here. i used some part of his codes to create my jQuery Class.

Result of my codes:

enter image description here

JS & jQuery

/*Code by Ram >> http://stackoverflow.com/users/1474613/ram */

(function ($) {
    $.Noder = function (oneOfNodes) {
        this.element = '';
        oneOfNodes=(oneOfNodes instanceof $) ? oneOfNodes : $(oneOfNodes)
        this.baseX=oneOfNodes.position().left;
        this.currentX=0;
    };

    $.Noder.prototype = {
        InitEvents: function () {
            //`this` references the created instance object inside an instace's method,//however `this` is set to reference a DOM element inside jQuery event handler functions' scope.//So we take advantage of JS's lexical scope and assign the `this` reference to//another variable that we can access inside the jQuery handlersvar that = this;
            //I'm using `document` instead of `this` so it will catch arrow keys//on the whole document and not just when the element is focused.//Also, Firefox doesn't fire the keypress event for non-printable characters//so we use a keydown handler
            $(document).keydown(function (e) {
                var key = e.which;
                if (key == 39) {
                    that.moveRight();
                } elseif (key == 37) {
                    that.moveLeft();
                }
            });},
        setElement: function(element){
            this.element = (element instanceof $) ? element : $(element);
            console.log(this.element);
            this.currentX=this.element.position().left;
            console.log('currentX: '+this.currentX);
            this.element.addClass('active');
        },
        moveRight: function () {
            console.log('bseX: '+this.baseX);
            console.log('currentX: '+this.currentX);
            var max=(25*2)+this.baseX;
            console.log('max: '+max);
            if(this.currentX<max)
            {
                this.element.css("left", '+=' + 25);
                this.currentX=this.element.position().left;
                setElementLevel(this.element,this.currentX,this.baseX);
                console.log('currentX: '+this.currentX);
            }
        },
        moveLeft: function () {
            if(this.currentX>this.baseX)
            {
                this.element.css("left", '-=' + 25);
                this.currentX=this.element.position().left;
                setElementLevel(this.element,this.currentX,this.baseX);
                console.log('currentX: '+this.currentX);
            }
        }

    };
    $.Noder.defaultOptions = {
        currentX: 0
    };

}(jQuery));

functionsetElementLevel(element,currentX,baseX){
    var level=0;
    if (currentX==baseX+25)
        level=1;
    elseif(currentX==baseX+25+25)
        level=2;
    element.data('level', level);
    setLevelOnElement(element);
}

functiongetElementLevel(element){
    console.log(element.data('level'));
    return element.data('level');
}

functionsetLevelOnElement(element){  
    var level = 0;
    if(typeofgetElementLevel(element) !=='undefined')
        level = getElementLevel(element);
    console.log('my level: '+level);
    var $levelElement=element.find( ".node-level" );
    if ($levelElement && $levelElement.length>0)
    {
        $levelElement=$($levelElement[0]); 
        console.log($levelElement);
        $levelElement.html(level);
    }
}

var noder = new $.Noder($("#myTree>.node")[0]);

$("#myTree>.node").on('click',function(){
    $("#myTree>.node").each(function(){
        $(this).removeClass('active')
    });    
    console.log($(this)[0].id +' clicked')

    noder.setElement($(this)[0]);

})
noder.InitEvents();


$(document).ready(function() {
    var $dragging = null;
    var $myTree=$('ul#myTree');
    var $oneOfNodes=null;
    var baseX=0;
    if($myTree.length>0)
    {
        console.log($myTree);
        $oneOfNodes=$($myTree.children()[0]);
        console.log($oneOfNodes);
        baseX=$oneOfNodes.position().left;
        console.log('baseX >> '+baseX);
        console.log($myTree);
        var x=0;
        $('ul#myTree').find('li').each(function(){
            x++;
            console.log(x);
            setLevelOnElement($(this));
        });
    }

    $(document.body).on("mousemove", function(e) {
        if ($dragging) {
            var currentX=$dragging.position().left;
            if(e.pageX>(baseX+25) && e.pageX<(baseX+(2*25)))
            {
                $dragging.offset({left: (baseX+25)});
                setElementLevel($dragging,currentX,baseX);
            }
            elseif((e.pageX)>(baseX+(2*25)) )
            {
                $dragging.offset({left: (baseX+(2*25))});
                setElementLevel($dragging,currentX,baseX);
            }
            elseif(e.pageX<(baseX+25) )
            {
                $dragging.offset({left: (baseX)});
                setElementLevel($dragging,currentX,baseX);
            }
        }
    });

    $(document.body).on("mousedown",  function (e) {
        var $myTree=$('ul#myTree');
        if($(e.target) && $myTree && $myTree.length>0)
        {
            var $li=$(e.target).parent();
            var $ul=$(e.target).parent().parent();
            if ( $ul.is($myTree) && $(e.target).hasClass("node-level") )
            {
                $ul.find('li').each(function(){
                    $(this).removeClass('active');
                });
                $li.addClass('active');
                $dragging = $($li);
            }
        }
    });

    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
});

HTML

<ulid="myTree"><liclass="node"id="node1"><spanclass="node-level"></span><spanclass="node-content">Node 1</span></li><liclass="node"id="node2"><spanclass="node-level"></span><spanclass="node-content">Node 2</span></li><liclass="node"id="node3"><spanclass="node-level"></span><spanclass="node-content">Node 3</span></li><liclass="node"id="node4"><spanclass="node-level"></span><spanclass="node-content">Node 4</span></li><liclass="node"id="node5"><spanclass="node-level"></span><spanclass="node-content">Node 5</span></li><liclass="node"id="node6"><spanclass="node-level"></span><spanclass="node-content">Node 6</span></li><liclass="node"id="node7"><spanclass="node-level"></span><spanclass="node-content">Node 7</span></li></ul>

CSS

#myTree{
    margin:20px;
    padding:0;
    list-style-type:none;
    font-size:11px;
}
#myTree>li>.node-level{
    padding:6px10px;
    color:#ddd;
    background:gray;
    position:relative;
    cursor:move;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#myTree>li>.node-content{
    padding:5px; 15px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#myTree>.node:hover {
    background:#acd;
    color:#004;
}
#myTree>.node.active {
    border:1px#a66 solid;
    background:#fd8;
    color:#004;
}
#myTree>li.node {
    width:151px;
    background:#ddd;
    margin-top:2px;
    padding:5px0px5px0;
    color:#555;
    cursor:pointer;
    position:relative;
    border:1px solid #ccc;
}
html, body {
    height:100%;
}
div { width:151px;
    background:#ddd;
    margin-top:2px;
    padding:5px15px;
    color:#555;
    cursor:pointer;
    position:relative;
    border:1px solid #ccc; }

Solution 2:

I have faced the same problem. You can get the Level of Node by

$("#treeDiv").tree("getSelectedNode").getLevel();

You can operate using the level.

Post a Comment for "Create A Tree With Dynamic Level Feature For It's Nodes (movable Nodes) By Jquery"