javascript - 获取可拖动 div 下的文本(jquery)

Question

我有一个可拖动的 div，它在 .outerDiv 上方拖动文本内容。我怎样才能从 .outerDiv 获取进入可拖动 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>

编辑:我想要从 .outerDiv 中获取部分文本的代码，在 .isStore 下，并将其放入 .isStore 拖动后。

Answer 1

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>

我使用了检测两个 div 是否发生碰撞的代码: http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery