在可拖动的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>

编辑：我希望代码包含.isStore中.outerDiv下部分文本，并在拖动后将其放入.isStore中。

Answer 1

<activity
android:name=""
--------------
android:theme="@android:style/Theme.Black.NoTitleBar">
</activity>

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

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

Answer 2

这是一个愚蠢的例子； 我刚刚创建了一个可拖动的div，其中同时包含文本和isStore框：

$(".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>

Answer 3

这是您的意思吗？ （将文本放在红色的可拖动/可调整大小的div内）还是您想要让代码动态地从externalDiv中获取代码并将其放入isStore的代码？ 请注意，我在isStore的样式中使用了“ overflow：hidden”，这样它就不会显示在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>