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.

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

How can I display just the time portion of a date in AngularJS?

Tips for resolving import errors encountered after running npm start

Apologies, but Discord.js is unable to access the property "user" of a null object

Attempting to showcase extensive content based on the selection made in a drop-down menu

Utilize Vue.js 3 and InertiaJs to Retrieve Session Information in Laravel 9

Preserving color output while executing commands in NodeJS

How can you style text with a circular border using CSS?

Troubleshoot your Vue.js application using Visual Studio Code. Encounter an unidentified breakpoint error

Alexa Skills Issue: Problem with Playing AudioPlayer HLS Stream URL

Encountered a discrepancy with npm dependencies during the update or installation process on a legacy project

Adding a class to a clicked button in Vue.js

Utilizing Bootstrap modal to insert data into phpMyAdmin database - a comprehensive guide

Retrieve the genuine HTML code for a control directly on the client side

Utilizing Ionic for local data retention

What is the best method to assign each key in an Object to the corresponding value in another Object?

"What is the best way to add content to the end of the last child element using Angular's

designing a presentation with customizable durations for each slide

Can someone help me figure out how to make my Dropdown stay open when I highlight input, drag, and release

Send data from the URL to PHP and then to Javascript in order to showcase the value within an input field

Can pagination numbers in Jquery DataTable be configured based on the total records returned by the server and the number of records chosen by the user?