"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

Passing a date string from the Controller to JavaScript using the AJAX method

Below is the controller I have written: [HttpPost] public JsonResult GetTrackList(POS_model item) { //item.item_code //item.track_type if (item.track_type != "Regular") { POS pos = new POS(); ...

javascriptjqueryajaxasp.net-mvc-4

I need to find a way to transfer user input data from the frontend to ExpressJS in order to make an API call using an endpoint

Within my perspective, there is a text box where users can input values. Leveraging jquery, I retrieved the user's value and now aim to transfer it from my jquery file to the express module in app.js. Any ideas on how to best approach this? ...

jquerynode.jsexpress

What is the best way to rearrange the order of navbar items when working with two nav bars and a single toggle in bootstrap 4?

I am looking to implement a design with two navigation bars that share a single toggle. The first navbar should include the logo, email icon, and a search box, while the second navbar is reserved for additional links. On smaller screens, when the toggle ...

htmlcssbootstrap-4

A method for positioning each pair of <li> elements side by side

My goal is to arrange every pair of li elements next to each other (e.g. 0-9, A-B, C-D, ...). Currently, they are aligned one by one. <ul> <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li ...

htmlcss

Additional <li> elements are created in Internet Explorer versions 8 and 9

Currently in the process of setting up a new website/landing page. Upon heading to the right column at the bottom (where the pictures are located), you will notice <li> elements containing pictures within containers. The only issue that arises is whe ...

htmlcsshtml-lists

I have noticed that the Javascript code is being loaded prior to the completion of my HTML/CSS page for some unknown

I am completely new to the world of web development. I'm encountering an issue where my JavaScript code (specifically alerts) is loading before my HTML/CSS page has fully loaded. I've been using sample alerts to test this out, and ideally, they s ...

javascripthtmlcssfrontend

Embed a PHP function within an HTML tag using the echo statement

I have a unique function in my controller that retrieves the User's name here: public function fetchUser(){ $user_id = $this->session->userdata('ID'); return $this->users_model->get_user_name($user_id); } My goal is ...

phphtmlcodeigniter

Is there a way to prevent mouse wheel scrolling on a React "number" input field?

Currently, I am encountering an issue with MUI type="number" textfields. When I focus on the field and then scroll the mousewheel, the input value changes unexpectedly. I have looked into adding a blur function after scrolling to prevent this, but I would ...

javascripthtmlreactjsinputnumeric

Retrieve data using AJAX and dynamically show it on an element using CodeIgniter

Just to clarify, I am brand new to AJAX and CodeIgniter. I came across this article which seems helpful for beginners like me: My goal is to update an Input Field in a form whenever the select html element changes. <select class="select" name="formul ...

jqueryajaxcodeigniter

What is the best approach to storing and retrieving special characters ('+<>$") from a textfield into a database using PHP?

I have a form where users can enter a personal message with a subject. The data entered in the textarea is passed to a Javascript/jQuery function, which then sends it to a PHP file for storage in a database. However, I am encountering issues when special c ...

javascriptphpjquerymysqlajax

Adjust the dimensions of the initial cell

I need to adjust the size of the initial "generated" cell in a grid. The grid is not present in the HTML markup until JavaScript prints RSS information on it, making it difficult to target specific rows or cells directly. Note: The first element is hidden ...

javascripthtmljquerycsscss-grid

Arrange the bootstrap columns in a grid layout both vertically and horizontally adjacent to one another

I need help with displaying my columns in this specific layout https://i.stack.imgur.com/2hzju.jpg Code <div class="row"> <div id="id-orders-stats" class="col-md-6 col-sm-6"> </div> <div class="col-md-6 col-sm-6 stats-box"&g ...

csstwitter-bootstrap

Can we separate city, state, and country data into individual input fields using Autocomplete and Geonames?

Currently, I have a single INPUT field set up to trigger the jQuery UI Autocomplete function, which pulls data from Geonames API. $( "#city_state_country" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http ...

javascriptjqueryjsonautocompletegeonames

motion graphic border not joining at the corner

Yesterday, my code was functioning perfectly. However, after making several revisions to include all animations and styles, I notice that the animated borders no longer connect at three corners. Can someone please assist in identifying what went wrong duri ...

htmlcss

The property 'innerHTML' cannot be assigned to null, as stated in Vue

I am dealing with two components that allow for editing JSON objects. Additionally, I have a button that toggles between these two components. Below is the HTML code snippet: <v-btn @click="switchConfigClicked">Switch config</v-btn> <h4 cla ...

javascripthtmlvue.jsvuejs2

Adjusting label widths in Fieldcontain with JQuery Mobile

I've done a lot of research online, and it seems like a common issue. In the past, I have tackled this problem using a <table>, but I am now looking to resolve it using CSS instead of relying on JQM's data-grid. The simple problem I am fac ...

jqueryhtmlcssjquery-mobile

Strange actions observed in AJAX POST request

This code snippet functions perfectly when I set a breakpoint in the backend and allow the value to be zero before continuing with the rest of the code. However, if I don't set a breakpoint and let it run, the value will become 2 and cause a break in ...

javascriptjqueryajaxasp.net-mvc

Struggling to properly position navigation bar items in a Bootstrap website

I'm struggling to align the bar items on a new site that I've built. I've tried placing two bars at the top to mimic the layout of this site: . I'd like it to look similar to this site: , where everything is nicely centered and mobile-f ...

htmlcssbootstrap-5

The Vue Swiper does not support inline containers in my code

I am facing an issue with the layout of my simple swiper in my vue app. The containers are not inline as expected, causing the second one to appear under the first. Additionally, I am struggling with making the slider element visible only within the viewpo ...

htmlcssanimationvue.jsslider

How can I modify the font size of h1 and h2 elements in CSS?

I am currently working with a WordPress twenty eleven theme and I am trying to adjust the size of my headings. Specifically, when I enclose my headings in h1 and h2 tags like so: <h1>My h1 heading </h1> <h2> My h2 heading </h2> The ...

csswordpresshtml-heading