MindMap Concepts

by mifeng

HTML

<body>
    <div id="node-container" style="width:4000px;height:4000px">
        <div class="node root" style="top:2020px;left:1460px">
            <p>Hello World</p>
        </div>
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    //overflow: hidden;
    background: #f0f0f0;
    position:relative
}

#wrapper {
    overflow: scroll;
    width: 400px;
    height: 400px;
}

#node-container {
    cursor: move;   
    border: 5px solid green;
    margin: 0;
    padding: 0;
}

.node {
    /* width: 100%;*/
    position: absolute;
    background: orange;
    color: #fff;
    padding: 10px;
    
    /* no text select */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

$(function() {
    // Panning effects in mouse (not necessary in mobile seems)
    var $container = $('#node-container'),
        $document = $(document),
        $window = $(window),
        $root = $('.root');
    
    // create some dummy elements
    ///*
    var i = 301, left = 50, top = 20;

    while (i--) {
        var dddiv = $("<div>").css({
            "top": ((i % 30 === 0) ? (top += 300) : top),
            "left": ((i % 10 === 0) ? (left = 200) : (left += 300))
        }).html("<p>" + i + "</p>").addClass("node");
        
        dddiv.appendTo($container);
    }
    //*/
    
    // test document and window different
    console.log("Window: w" + $window.width() + ", h" + $window.height());
    console.log("Document: w" + $document.width() + ", h" + $document.height());
    console.log("Root: t" + $root.offset().top + ", l" + $root.offset().left);
    
    // the window that contains the root in center
    var rootWindow = {
        top: ($root.offset().top - ($window.height() / 2) | 0),
        left: ($root.offset().left - ($window.width() / 2) | 0)
    }
    
    $document.scrollTop(rootWindow.top);
    $document.scrollLeft(rootWindow.left);
    
    // mouse drag and move in container        
    var mousePos = { X: 0, Y: 0},
        viewPos = { X: $document.scrollLeft(), Y: $document.scrollTop() };
    
    $container.mouseup(function() {
        $document.off("mousemove");
        $container.off("mousemove"); 
    });
    
    /*
    $container.mouseout(function() {
        //$document.off("mousemove");
        $container.off("mousemove"); 
    }); */
    
    // mouse down start tracking
    $container.mousedown(function(e) {
        mousePos.X = e.clientX;
        mousePos.Y = e.clientY;
        
        console.log(e);
        
        //console.log("MOUSE: " + JSON.stringify(mousePos));
        //console.log("VIEW: " + JSON.stringify(viewPos));
        
        $container.mousemove(function(e) {
            var movedX = e.clientX -...