Detect IMG touching DIV

Question

I need help to detect if an IMG touches a DIV element when dragging?
You can check out a live version of my page here or image.
The dragon is an IMG, and there is the red DIV's. How to detect if the dragon is touching the red divs?

This is my code for now...

$(document).ready( function() {
  var $draggables = $('.draggable').draggabilly({
    containment:'#holdon'
  });
});

// --------------------------- TERNING --------------------------- //
$(document).ready( function() {
  var $draggable = $('#dice').draggabilly({
    grid: [ 32, 8 ]
  });
});

$(document).on("dblclick", "#dice", function(){
   $('#dice').parent().append($('#dice'));
});


// --------------------------- KAFFEMASKINE --------------------------- //
$(document).ready( function() {
  var $draggable = $('#coffee').draggabilly({
    grid: [ 32, 8 ]
  });
});

$(document).on("dblclick", "#coffee", function(){
   $('#coffee').parent().append($('#coffee'));
});


// --------------------------- ANANAS PALME --------------------------- //
$(document).ready( function() {
  var $draggable = $('#palm').draggabilly({
    grid: [ 32, 8 ]
  });
});

$(document).on("dblclick", "#palm", function(){
   $('#palm').parent().append($('#palm'));
});


// --------------------------- GULD DRAGE --------------------------- //
$(document).ready( function() {
  var $draggable = $('#dragon').draggabilly({
    grid: [ 32, 8 ]
  });
});

$(document).on("dblclick", "#dragon", function(){
   $('#dragon').parent().append($('#dragon'));
});

body {
    background: #1a82f7;
}

#holdon {
  position: absolute;
  top: 0px;
  left: 0px;
  width:688px;
  height:460px;
  border: 1px solid white;
}

#floor {
  top:116px;
  left:393px;
  position:absolute;
  margin-bottom: 10px;
  height: 40px;
  width: 65px;
  background-image: url("look/floor.png")
}

#floor img {
    position: absolute;
    bottom: 12;
    left:2;
}

#floor:hover {
    background-image: url("look/floorm.png")
}

.ting:hover {
-webkit-filter: drop-shadow(1px 1px 0 white)
  drop-shadow(-1px 1px 0 white)
  drop-shadow(1px -1px 0 white)
        drop-shadow(-1px -1px 0 white);
}

#div3 {
  top:0px;
  right:0px;
  position:absolute;
  border: 1px solid #CCC;
  margin-bottom: 10px;
  height: 100%;
  width: 275px;
}

#div1 {
    position:relative;
    border: 1px solid #CCC;
    width:275px;
    height:100%;
}

#walls {
  position:absolute;
  top:0px;
  left:0px;
  width:688px;
  height:338px;
  border: 0px;
}

#overlay {
    position: absolute;
    bottom: 5;
    left:-78px;
    z-index: 10;
    width: 200px;
    height: 130px;
    background: red;
    transform: skew(-116.5deg);;
}

#overlay2 {
    position: absolute;
    bottom: 5;
    left:476px;
    z-index: 10;
    width: 200px;
    height: 200px;
    background: red;
    transform: skew(116.5deg);;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/draggabilly@2.1/dist/draggabilly.pkgd.min.js"></script>
<script src="https://npmcdn.com/draggabilly@2.1/dist/draggabilly.pkgd.js"></script>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="js.js"></script>
</head>

<body>
    
    <div id="holdon">
        
        <div id="overlay"></div>
        
            <div id="overlay2"></div>

<img id="walls" src="look/walls.png">

<!-- Row Floor 1 -->

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:122px;left:392px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:138px;left:360px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:154px;left:328px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:296px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:264px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:232px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:200px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:168px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:136px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:104px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:72px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:40px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:8px;"></div>

<!-- Row Floor 2 -->

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:138px;left:424px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:154px;left:392px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:360px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:328px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:296px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:264px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:232px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:200px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:168px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:136px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:104px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:72px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:40px;"></div>

<!-- Row Floor 3 -->

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:154px;left:456px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:424px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:392px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:360px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:328px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:296px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:264px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:232px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:200px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:168px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:136px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:104px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:72px;"></div>

<!-- Row Floor 4 -->

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:488px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:456px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:424px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:392px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:360px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:328px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:296px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:264px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:232px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:200px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:168px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:136px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:104px;"></div>

<!-- Row Floor 5 -->

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:520px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:488px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:456px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:424px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:392px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:360px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:328px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:296px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:264px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:232px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:200px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:168px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:136px;"></div>

<!-- Row Floor 6 -->

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:552px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:520px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:488px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:456px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:424px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:392px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:360px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:328px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:296px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:264px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:232px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:200px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:394px;left:168px;"></div>

<!-- Row Floor 7 -->

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:584px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:552px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:520px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:488px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:456px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:424px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:392px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:360px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:328px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:296px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:264px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:394px;left:232px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:410px;left:200px;"></div>

<!-- Row Floor 8 -->

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:616px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:584px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:552px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:520px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:488px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:456px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:424px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:392px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:360px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:328px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:394px;left:296px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:410px;left:264px;"></div>

<div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:426px;left:232px;"></div>

<img src="look/dice.png" draggable="true" ondragstart="drag(event)" class="ting draggable" id="dice" width="56" height="79" style="position:absolute;left:394px;top:72px;">

<img src="look/gdrage.gif" draggable="true" ondragstart="drag(event)" class="ting draggable" id="dragon" width="62" height="78" style="position:absolute;left:394px;top:76px;">

</div>


<div id="div3">
    
    <div id="div4">
        
        
    </div>
    
    

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  
  <img src="look/coffee.png" draggable="true" ondragstart="drag(event)" class="ting" id="coffee" width="66" height="137" style="position:absolute;left:-275px;top:155px;">
  
  <img src="look/club_small.gif" draggable="true" ondragstart="drag(event)" class="ting" id="clubsofa" width="36" height="36" >
  
  <img src="look/tapetsmall.png" draggable="true" ondragstart="drag(event)" id="tapetsmall" width="32" height="32" >
  
  <img src="look/palm.gif" draggable="true" ondragstart="drag(event)" class="ting" id="palm" width="58" height="95" style="position:absolute;left:-275px;top:155px;">
  
  </div>
  
</div>

</body>

Are you looking for [this](https://sourceforge.net/projects/jquerycollision/)? — Huelfe, May 08 '17 at 11:09
Check this http://stackoverflow.com/questions/4903530/how-to-get-the-position-of-a-draggable-object — shubham agrawal, May 08 '17 at 11:30
It looks like, but I still don't know how to import it into my own code... :/ — Disko, May 08 '17 at 11:37

Detect IMG touching DIV

0 Answers0