"Dragging and dropping may not always perfectly align with the position of the droppable div that is

When attempting to drag and drop three images into a droppable div, I encountered an issue where the images were not perfectly positioned within the div. This problem seemed to be related to the positioning of the droppable div itself. Specifically, when setting the position property to relative for the droppable div, the images did not drop as expected. Is there a way to achieve the desired functionality with the position set to relative?

#droppable {
  position: relative;
  overflow: hidden;
  margin-left: 10%;
  margin-top: 10%;
  width: 800px;
  height: 450px;
  border: 1px solid black;
  background: #EBECED;
  }

You can view my code in Jsfiddle

jqueryhtmlcsscss-positiondrag

Answer №1

Check out this solution:

I updated the CSS by adding a z-index to the draggable/droppable div:

#droppable {
      border: 1px solid black;
      height: 250px;
      margin-left: 30%;
      margin-top: -35%;
      overflow: hidden;
      position: relative;
      width: 490px;
      background: #EBECED;
      z-index:1;
  }

I also changed img.drag to span.drag because the class is now assigned to span elements.

span.drag {
      width: 40px;
      height: 40px;
      position: relative;
      z-index:2;
  }

Answer №2

When the cloned image is appended to a droppable div with position relative, the cloned image is placed at a position that includes both its own position and the offset value of its parent droppable div. To correct this behavior, we must exclude the parent's offset values.

The following code snippet successfully addresses this issue:

ClonedImage.appendTo('#droppable');
        
var parentPosition = $('#droppable');
        
var leftAdjustment = ClonedImage.position().left - parentPosition.offset().left;
var topAdjustment = ClonedImage.position().top - parentPosition.offset().top;
ClonedImage.css({left: leftAdjustment, top: topAdjustment});

This functionality has been tested and verified in this Jsfiddle link..!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animating the height with jQuery can result in the background color being overlooked

For those curious about the issue, check out the JSFiddle. There seems to be an anomaly where the background of the <ul> element disappears after the animation on the second click. Oddly enough, even though Firebug shows that the CSS style is being a ...

jqueryhtmlcssjquery-animate

How to eliminate background after Ajax call is done using jQuery?

After successfully creating my own tooltips with jQuery and Ajax to pull content from an external file, I encountered a problem. I have a loading.gif animation in the background of the container that I want to remove once the ajax content loads. Can anyone ...

jqueryajax

The response from an AJAX request is consistently negative

Currently, I am working on a basic PHP form that involves some AJAX functionality. Despite my efforts to troubleshoot the issue on my own, I have been unable to identify the missing component. The problem persists as all results return false, and no recor ...

phpjqueryajax

Ensure that the tab's content fills up the entire space provided and prevent the need for a vertical scrollbar to appear

Is there a way to make the tab content take up 100% of the available space without causing a vertical scroll due to the height of the tab itself? I am currently using ng-bootstrap and need assistance with this specific issue. You can review my code in the ...

css

Display Partial Sliding Content using jQuery

One of the requirements I have is to display a portion of an element by default (let's say 100px), and then reveal the rest of it upon clicking a link. After searching for a solution, I came across a helpful resource on this website. The code provided ...

jquerysliderslidetoggle

Durable Container for input and select fields

I need a solution for creating persistent placeholders in input and select boxes. For instance, <input type="text" placeholder="Enter First Name:" /> When the user focuses on the input box and enters their name, let's say "John", I want the pl ...

javascriptjqueryhtmldomplaceholder

Refreshing data within HTML table through PHP and AJAX calls

I am struggling to find a way to dynamically update the table content on my web page using PHP and MySQL without having to refresh the whole page. I believe combining Ajax with PHP is the best approach for this, but I'm unsure of how to proceed. Desp ...

phpjquerymysqlajax

The bookdown feature of tufte_html_book, when combined with the csl style, struggles to properly position citations

bookdown::tufte_html_book does not place citations in the margin with csl notes. Here is an example: bookdown::render_book(input = "index.rmd", output_format = "bookdown::tufte_html_book") The csl used comes from: https://raw.githu ...

htmlbookdowncsltufte

What measures can be taken to safeguard this hyperlink?

Is there a way to conceal HTML code from the source code? For instance: jwplayer("mediaplayer").setup({ file: "http://example.com/Media.m3u8", autostart: 'true', controlbar: 'bottom', file: "http://exa ...

javascriptphphtmljwplayer

Showing a JSON file in an HTML page

I've been attempting to showcase a local JSON file on an HTML page. I stumbled upon some information online, but it's causing me quite a bit of confusion. Here is the JSON file I have: { "activities": [ { "name": "C:&bs ...

javascripthtmljson

Display modal popup only once the dropdown has been validated, with the validation focusing on criteria other than the dropdown itself

Looking for a way to validate dropdown values. Popup should only show if the dropdown values are selected; otherwise, the popup should remain hidden. Below is the code snippet: <div class="main-search-input-item location"> ...

javascriptjquery

The display is not appearing

In my JavaScript code, I invoked an ActionResult like this: function checkSessionNewContribute(){ if (@MountainBooks.Common.ProjectSession.UserID != 0) { window.location.href = "../Book/ContributeNewBook" } else{ $.ajax({ ...

jqueryajaxasp.net-mvc

Is there a way to include a button at the top of the Notiflix.Loading() overlay for closing or stopping it?

I've integrated the "notiflix" library into my project, and I'm currently using notiflix.loading.pulse() for a lengthy process. While this works perfectly fine, I would like to add a button (for closing/stopping the process) on top of the loading ...

javascripthtmlcssnpm

Enhance the responsiveness of a ReactJS landing page

We have developed a large React application without relying on any existing UI framework. All of our UI components have been custom-built. Now, we are looking to make the landing page section responsive within the application, which will require the imple ...

htmlcssreactjstailwind-css

Avoid displaying the HTML formatting whitespace on the webpage

I'm working with cakephp's helper to generate spans using the code below: <div id="numberRow"> <?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', & ...

phphtmlcakephp

Finding the correlation between SVG element IDs and JSON keysUnderstanding how to pair up

Currently, I have an SVG file that can be viewed here. My goal is to present specific data when elements within the SVG are clicked. The data is in JSON format and I am looking to match each ID of an SVG element with a key in the JSON data. If both the key ...

javascriptjqueryjsond3.jssvg

The getElementById function can only select one option at a time and cannot select multiple options

I'm having an issue with a JavaScript function that is supposed to allow me to select multiple options, but it's only selecting the first one. Here is the JavaScript code: function index(){ var a="${staffindex}".replace("[",""); ...

javascripthtmlselectgetelementbyid

Mastering the Art of Modifying HTML with Node.js

Is it possible to manipulate HTML using Node.js? 1. First, I need to retrieve data from a database. 2. Then, I need to modify or add HTML code within Node. In essence, the goal is to fetch data and integrate it into an HTML file. The JavaScript snippet ...

javascripthtmlnode.js

Using jQuery to send a GET request to the current page with specified parameters

Within my application, hosted on a PHP page, I am aiming to trigger a GET request upon selecting an option from a dropdown menu. The URL of the page is: www.mydomain.it/admin/gest-prenotazioni-piazzola.php I intend to utilize jQuery to execute this GET r ...

javascriptphpjqueryget

The jQuery.slide() function is causing dynamic changes in the table columns

I have a unique situation with a table where some data is initially hidden and can be expanded by clicking a button. I am implementing the technique outlined here. Here is the HTML markup I am using: <button class="toggleBtn">Hide/Show</ ...

jqueryhtmlhtml-tablejquery-slider