Retrieving text from a draggable div using jQuery

Question

Retrieving text from a draggable div using jQuery

I have a draggable div that I can move over another element with the class .outerDiv which contains text content. Is there a way for me to retrieve the text from .outerDiv that overlaps with the 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 am looking for a solution that extracts the text located beneath .isStore within the .outerDiv, and transfers it into the .isStore after dragging.

https://i.sstatic.net/mWqer.jpg

javascript jquery html css

Answer 1

Answer №1

function checkCollision( $element1, $element2 ) {
// Position and dimensions of first element
var e1_offset             = $element1.offset();
var e1_height             = $element1.outerHeight( true );
var e1_width              = $element1.outerWidth( true );
var e1_distance_from_top  = e1_offset.top + e1_height;
var e1_distance_from_left = e1_offset.left + e1_width;

// Position and dimensions of second element
var e2_offset             = $element2.offset();
var e2_height             = $element2.outerHeight( true );
var e2_width              = $element2.outerWidth( true );
var e2_distance_from_top  = e2_offset.top + e2_height;
var e2_distance_from_left = e2_offset.left + e2_width;

var not_colliding = ( e1_distance_from_top < e2_offset.top || e1_offset.top > :e2_distance_from_top || e1_distance_from_left < e2_offset.left || e1_offset.left > e2_distance_from_left );

// Return true if colliding
return ! not_colliding;
};

$(function(){

   $(".outerDiv .isStore")
      .draggable({
         containment: ".outerDiv",
   drag: function() {
      $('.targetElem').each(function(){
         $isStore = $('.isStore');
         if (checkCollision($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 implemented code that checks for collisions between two divs:

Answer 2

function checkCollision( $element1, $element2 ) {
// Position and dimensions of first element
var e1_offset             = $element1.offset();
var e1_height             = $element1.outerHeight( true );
var e1_width              = $element1.outerWidth( true );
var e1_distance_from_top  = e1_offset.top + e1_height;
var e1_distance_from_left = e1_offset.left + e1_width;

// Position and dimensions of second element
var e2_offset             = $element2.offset();
var e2_height             = $element2.outerHeight( true );
var e2_width              = $element2.outerWidth( true );
var e2_distance_from_top  = e2_offset.top + e2_height;
var e2_distance_from_left = e2_offset.left + e2_width;

var not_colliding = ( e1_distance_from_top < e2_offset.top || e1_offset.top > :e2_distance_from_top || e1_distance_from_left < e2_offset.left || e1_offset.left > e2_distance_from_left );

// Return true if colliding
return ! not_colliding;
};

$(function(){

   $(".outerDiv .isStore")
      .draggable({
         containment: ".outerDiv",
   drag: function() {
      $('.targetElem').each(function(){
         $isStore = $('.isStore');
         if (checkCollision($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 implemented code that checks for collisions between two divs:

Answer 3

Answer №2

Let's have some fun with a playful demonstration; Check out this draggable div that includes text and an 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>

Answer 4

Let's have some fun with a playful demonstration; Check out this draggable div that includes text and an 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>

Answer 5

Answer №3

Do you mean to say that you want the text to be placed inside a draggable and resizable red div? Or are you looking for code that dynamically takes content from outerDiv and places it in isStore? Please note that I have added "overflow:hidden" to the style of isStore to prevent any overflow 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>

Answer 6

Do you mean to say that you want the text to be placed inside a draggable and resizable red div? Or are you looking for code that dynamically takes content from outerDiv and places it in isStore? Please note that I have added "overflow:hidden" to the style of isStore to prevent any overflow 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>

Retrieving text from a draggable div using jQuery

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing this ajax function to fail?

What is the right way to send a success response from Express JS to Backbone when logging out a user?

Is there a way to create a mobile-exclusive slideshow using JavaScript?

Cursor or caret bleeding through overlay on Internet Explorer

Change Dropdown menu orientation to vertical

Setting Up AdminLTE Using Bower

Count of jSon objects

POST request in Ajax with NodeJs/MongoDB/Mongoose causing an Uncaught TypeError: Illegal invocation

Understanding TypeScript typing when passing arguments to the Object.defineProperty function

Make sure that the parent element is only visible once all of its child elements have

utilize ng-include in angularjs to include a page

Exploring depths of data with AngularJS: multiple levels of drilling

I am facing difficulty in retrieving a unique dynamic div id using the useRef ReactJS hook, as it keeps returning the same id repeatedly

Unlocking JSON data in Grails 2.0: A step-by-step guide

Google Maps API is successfully loading from an HTML file, however, it is not functioning properly when accessed

What advantages does including @charset "ISO-8859-15"; at the top of a CSS file provide?

ReactJS encountered an error: _this3.onDismissID is not defined as a function

What is the best way to search for documents that have all conditions met within a sub-array entry?

Guide to setting up 2-factor authentication on GitHub using an AJAX request

How to retrieve plain text data from a jQuery ajax call to a PHP server