Erkennen, wenn ein Bild in ein Div eingeht?

Question

Ich erstelle ein Labyrinth-Spiel, und ich möchte erkennen, wenn das Bild nach dem Cursor ein bestimmtes div, den Endpunkt erreicht. Ich habe das Bild, das der Maus folgt, und ich habe den Behälter, in dem das Bild sein wird. Wenn das Bild das div erreicht, möchte ich, dass etwas ausgelöst wird, sagen wir eine Warnung. Wie kann ich das erreichen?

 

 
    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; 
 
}) 
 

 

 
 
     html {cursor: none;} 
 
    html.showCursor{cursor: default;} 
 
    #image{ 
 
    position:absolute; 
 
    width:25px; 
 
    height:auto; 
 
    } 
 
div{ 
 
margin-left: 500px; 
 
width: 200px; 
 
height: 50px; 
 
background-color: green; 
 
}

<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></div>

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

Answer 1

Sie haben bereits eine Fahne genannt startmove, die aktiv ist, wenn der Cursor gezogen wird, verwenden Sie das Mouseenter-Ereignis auf dem div Ziel wie folgt:

var startMove; 

$(document).mousemove(function(e){ 
    var difLeft = $('#image').offset().left - e.pageX; 
    var difTop = $('#image').offset().top - e.pageY; 
    if(difLeft < 10 && difLeft > -10 && difTop < 10 && difTop > -10){ 
     startMove = true; 
     $('html').removeClass('showCursor'); 
    } 
    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"); 
}); 

.

<img id="image" src="http://static.micheljansen.org/uploads/mac-osx-arrow-cursor.png"/> 

<div id="drop"> 
</div> 

.

html {cursor: none;} 
html.showCursor{cursor: default;} 
#image{ 
position:absolute; 
width:25px; 
z-index: 100; 
height:auto; 
} 

#drop{ 
    width:100px; 
    height:100px; 
    background:green; 
    position: absolute; 
    left:200px; 
    top: 300px; 
    z-index:99 
} 

sehen eine Demo: https://jsfiddle.net/hycd913y/

Answer 2

 if ($('#TargetDiv').is(':hover')) { 
    // alert('hello'); 
    $("#image").addClass("red"); 
    }else{ 
    $("#image").removeClass("red"); 
    } 

Mit dieser .ist() Funktion mit: Hover-Wähler in der Sektion

if(startMove){ 

    } 

einfach macht, dass jede Hektik, ohne das ist() function Prüft die aktuelle übereinstimmende Menge von Elementen für ein Selektor-, Element- oder jQuery-Objekt und gibt true zurück, wenn mindestens eines dieser Elemente mit den angegebenen Argumenten übereinstimmt.

.is() function documentation

var startMove; 
 

 
$(document).mousemove(function(e) { 
 
    var difLeft = $('#image').offset().left - e.pageX; 
 
    var difTop = $('#image').offset().top - e.pageY; 
 
    if (difLeft < 10 && difLeft > -10 && difTop < 10 && difTop > -10) { 
 
    startMove = true; 
 
    $('html').removeClass('showCursor'); 
 
    } 
 
    if (startMove) { 
 
    $("#image").css({ 
 
     left: e.pageX, 
 
     top: e.pageY 
 
    }); 
 
    if ($('#TargetDiv').is(':hover')) { 
 
     // alert('hello'); 
 
     $("#image").addClass("red"); 
 
    } else { 
 
     $("#image").removeClass("red"); 
 
    } 
 
    } else { 
 
    $('html').addClass('showCursor'); 
 
    } 
 
}); 
 

 
$(document).mouseleave(function() { 
 
    startMove = false; 
 
})

html { 
 
    cursor: none; 
 
} 
 
html.showCursor { 
 
    cursor: default; 
 
} 
 
#image { 
 
    position: absolute; 
 
    width: 25px; 
 
    height: auto; 
 
} 
 
#TargetDiv { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: green; 
 
    margin: 100px auto; 
 
} 
 
.red { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<img id="image" src="http://static.micheljansen.org/uploads/mac-osx-arrow-cursor.png" /> 
 

 

 
<div id="TargetDiv"> 
 

 
</div>

Ich habe eine Klasse hinzugefügt Grenze rot auf die div zu setzen, wenn es mit der Maus und Cursor-Bild auf dem div schwebt überlagert das ist startmove = „true“. Und entfernt, wenn es nicht schwebt. Ich habe das Benachrichtigungsfeld kommentiert; Sie können es einschalten, wenn Sie möchten