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

 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

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>