如何将图像保留在div之外？

Question

I am creating a maze, and I want the image following the mouse not able to go through the divs to get to the maze. For now, I have set up only one div, so I can get the idea of what I need to do. How can I achieve this?

  var startMove; $(document).mousemove(function(e) { var DIFF_SNAP = 10; var DIFF_UNSNAP = 100; var difLeft = $('#image').offset().left - e.pageX; var difTop = $('#image').offset().top - e.pageY; if (!startMove && Math.abs(difLeft) < DIFF_SNAP && Math.abs(difTop) < DIFF_SNAP) { startMove = true; $('html').removeClass('showCursor'); } else if (startMove && !(Math.abs(difLeft) < DIFF_UNSNAP && Math.abs(difTop) < DIFF_UNSNAP)) { startMove = false; } if (startMove) { $("#image").css({ left: e.pageX, top: e.pageY }); } else { $('html').addClass('showCursor'); } }); $(document).mouseleave(function() { startMove = false; }) $("#drop").mouseenter(function(){ if(startMove) alert("Success"); }); 

  html {cursor: none;} html.showCursor{cursor: default;} #image{ position:absolute; width:25px; z-index: 100; height:auto; } #drop{ width:100px; height:100px; background:aqua; position: absolute; left:200px; top: 300px; z-index:99 } .maze { width: 150px; margin-left: 500px; height:150px; background: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <img id="image" src="http://static.micheljansen.org/uploads/mac-osx-arrow-cursor.png"/> <div id="drop"> </div> <div class="maze"> </div> 

Jsfiddle: https://jsfiddle.net/3x7cgLdr/27/

Answer 1

I made a fiddle . The collision works. Now it's missing to count the collision sides to avoid the cursor pass the maze.

var isMoving = false;

var cursor = {
        lx: 0,
        ly: 0,
        x: 0,
        y: 0,
        width: document.getElementById("image").width,
        height: document.getElementById("image").height,
        hitting: false,
        sides: []
    },
    cursorElement;

var divs,
    divs_L,
    div_i,
    divBd;

var cur_bottom,
    div_bottom,
    cur_right,
    div_right;

var b_collision,
    t_collision,
    l_collision,
    r_collision;

function onCursorMove(e) {
    cursor.lx = cursor.x;
    cursor.ly = cursor.y;
    cursor.x = e.clientX;
    cursor.y = e.clientY;
    divs = document.getElementsByClassName("hitme");
    divs_L = divs.length;
    for (div_i = 0; div_i < divs_L; div_i++) {
        divBd = divs[div_i].getBoundingClientRect();
        if (cursor.x < divBd.left + divBd.width && cursor.x + cursor.width > divBd.left && cursor.y < divBd.top + divBd.height && cursor.y + cursor.height > divBd.top) {
            hitting = true;
            cur_bottom = cursor.y + cursor.height;
            div_bottom = divBd.top + divBd.height;
            cur_right = cursor.x + cursor.width;
            div_right = divBd.left + divBd.width;

            b_collision = div_bottom - cursor.y;
            t_collision = cur_bottom - divBd.y;
            l_collision = cur_right - divBd.x;
            r_collision = div_right - cursor.x;

            if (t_collision < b_collision && t_collision < l_collision && t_collision < r_collision) {
                //Top collision
                cursor.y = divBd.top - cursor.height;
            } else if (b_collision < t_collision && b_collision < l_collision && b_collision < r_collision) {
                cursor.y = divBd.bottom;
                //bottom collision
            }
            if (l_collision < r_collision && l_collision < t_collision && l_collision < b_collision) {
                //Left collision
                cursor.x = divBd.left - cursor.width;
            } else if (r_collision < l_collision && r_collision < t_collision && r_collision < b_collision) {
                //Right collision
                cursor.x = divBd.right;
            }
            break
        }
    }

    cursorElement = document.getElementById("image");
    cursorElement.style.left = cursor.x + "px";
    cursorElement.style.top = cursor.y + "px";
}

window.onmousemove = onCursorMove;