Get text under draggable div (jquery)

Question

I have draggable div which dragging above .outerDiv with text content. How can I get text from .outerDiv which got into the borders of draggable div ?

$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });

.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  }
.outerDiv
{
  width: 160px;
  height: 160px;
  background-color: #ccc;
  }
.ui-resizable {
position: absolute !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'></div> sdfsdfsd
<br>
first
<br>
second
<br>
third
</div>

Edit: I want code that takes part of the text, under .isStore, from .outerDiv and puts it in .isStore after dragging.

score 2 · Accepted Answer · edited Aug 11 '18 at 12:42

var is_colliding = function( $div1, $div2 ) {
 // Div 1 data
 var d1_offset             = $div1.offset();
 var d1_height             = $div1.outerHeight( true );
 var d1_width              = $div1.outerWidth( true );
 var d1_distance_from_top  = d1_offset.top + d1_height;
 var d1_distance_from_left = d1_offset.left + d1_width;

 // Div 2 data
 var d2_offset             = $div2.offset();
 var d2_height             = $div2.outerHeight( true );
 var d2_width              = $div2.outerWidth( true );
 var d2_distance_from_top  = d2_offset.top + d2_height;
 var d2_distance_from_left = d2_offset.left + d2_width;

 var not_colliding = ( d1_distance_from_top < d2_offset.top || d1_offset.top > d2_distance_from_top || d1_distance_from_left < d2_offset.left || d1_offset.left > d2_distance_from_left );

 // Return whether it IS colliding
 return ! not_colliding;
};

$(function(){

   $(".outerDiv .isStore")
      .draggable(
         {
        containment: ".outerDiv",
    drag: function() {
       $('.targetElem').each(function(){
          $isStore = $('.isStore');
          if (is_colliding($isStore , $(this))) {
        var elemName = $(this).text();
   if ($isStore.text().indexOf(elemName) == -1) {
      $isStore.append(elemName+'<br>');
   }
     }
  });
         }
         }
     )
     .resizable({ containment: ".outerDiv" });
});

.targetElem {background:yellow;}
.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  }
.outerDiv
{
  width: 160px;
  height: 160px;
  background-color: #ccc;
  }
.ui-resizable {
position: absolute !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'></div>
<br>
<br>
<br>
<span class="targetElem">first</span><br>
<br>
<span class="targetElem">second</span><br>
<br>
<span class="targetElem">third</span>
</div>

I used code that detects if two divs are colliding: http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery

You save my day! Thanks! – Ivan Ivanov Aug 11 '18 at 07:46 — Ivan Ivanov, Aug 11 '18 at 07:46

score 0 · Answer 2 · answered Aug 11 '18 at 06:31

Here is a silly example; I just created a draggable div which contain both the text and the isStore box:

$(".outerDiv .content").draggable({ containment: ".outerDiv" });
$(".outerDiv .isStore").resizable({ containment: ".outerDiv" });

.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  }
.outerDiv
{
  width: 160px;
  height: 160px;
  background-color: #ccc;
  }
.ui-resizable {
position: absolute !important;
}
.content {
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class="content"><div class='isStore'></div> sdfsdfsd
<br>
first
<br>
second
<br>
third
</div></div>

score 0 · Answer 3 · answered Aug 11 '18 at 06:32

Is this what you mean? (putting the text inside the red draggable/resizable div) Or do you want code that dynamically takes the code from outerDiv and puts it in isStore? Note I used "overflow:hidden" in the style for isStore so that it doesn't show outside of the div.

$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });

.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  overflow: hidden;
  }
.outerDiv
{
  width: 160px;
  height: 160px;
  background-color: #ccc;
  }
.ui-resizable {
position: absolute !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'>sdfsdfsd
<br>
first
<br>
second
<br>
third</div> 
</div>

I want code that dynamically takes part of the text under .isStore from .outerDiv and puts it in .isStore. — Ivan Ivanov, Aug 11 '18 at 06:37

Get text under draggable div (jquery)

3 Answers3