The element vanishes from sight after being detached and re-appended

Currently, I am utilizing hQuery's draggable and droppable features. My goal is to move an element from its original parent to its new dropped parent after dragging it.

However, when I detach and append the element, it seems to disappear! What could be causing this issue?

Upon conducting a console.log on the dragged element, it confirms that the element has indeed changed parents.

Check out my FIDDLE:
https://jsfiddle.net/0apuqnxd/6/

Here is the JS code snippet:

//Make elements Draggable
$('.elementsDiv').draggable({
    revert: 'invalid',
  });

  $('.flakUp, .flakDown').droppable({
    accept: '.elementsDiv',
    drop: function(event, ui) {

  //Get dragged Element (checked)
  draggedElement = $(ui.draggable);

  //Get dropZone where element is dropped (checked)
  dropZone = $(event.target);

  //Remove element from DOM (prev parent)
  $(draggedElement).detach();

  //Append element to DOM (new parent)
  $(draggedElement).appendTo(dropZone);
  },
});

Check out the UPDATED FIDDLE for more clarity:
https://jsfiddle.net/0apuqnxd/13/

This updated version aims to showcase that the dropped element is not attached to the dropZone as intended, but rather only to the document...

Answer №1

It appears that the coordinates are incorrect.

When dropping an item, it is better to place it at a higher coordinate than the dropped one.

$('.flakUp, .flakDown').droppable({
  accept: '.elementsDiv',
  drop: function(event, ui) {
        console.log(event);
    console.log(ui.offset.top);
    var droppable = $(this);
    var draggable = ui.draggable;
       // Move draggable into droppable
    var offset = $(this).offset();
    console.log(offset);
    var relX = event.pageX - offset.left;
    var relY = event.pageY - offset.top;
    draggable.css({"left": ui.offset.left, "top": ui.offset.top, "position": "absolute"}).appendTo(droppable);
  },
});

https://jsfiddle.net/ChaHyukIm/0apuqnxd/12/

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

Want to know how to center the value of a slider range input in your React project using NextJS and Tailwind

Can someone help me with the issue I'm having with the offset? Is there a way to link a value to the thumb? I've tried two methods, but one gives a significant offset and the other gives less. However, it seems more like a workaround than a solu ...

Modifying the appearance of scoped child components in Vue: A step-by-step guide

I am currently using vant ui components in my Vue project, such as buttons. I would like to make some minor style adjustments, like changing the color and border, but I am unsure how to do it. Can anybody please assist me in solving this issue? Thank you i ...

The Socket.io server is experiencing issues with the "connection" event not firing, and the client event is also not being triggered

I've been struggling to set up an express backend with socket io. No matter what I try, the connection events just won't fire. Both the server and client are using version 3.1.2, so that's not the issue. When I start the client app, I see so ...

What is the reason for the failure of the jQuery code to disable the submit button in the following snippet?

I am working on a feature to disable the submit button in a form when the username, email, password fields are empty. When all of them are filled, I want to enable the submit button. However, the current code is not disabling the submit button as expected. ...

Accessing Facebook through Login with only a button visible

I need help with checking the user's login status on Facebook. I have implemented the code provided by Facebook, but all I see is the login button. How can I determine if the user is already logged in or not? function testAPI() { console.log(&apo ...

Navigating through the Document Object Model within a table

I'm working with an HTML table that contains a delete button in each row's last column. When the button is clicked, I want to delete the entire row. However, my current code only deletes the button itself and not the entire row: var buttons = do ...

Tips for solving the problem of TSX error where 'ReactNode' cannot be assigned with 'void' type

I've been attempting to loop through the Mui component MenuItem using a forEach loop, but I'm encountering an error stating 'Type 'void' is not assignable to type 'ReactNode''. Here's the section of my code caus ...

How can you iterate over the input elements that are currently visible within a form using Javascript?

Is there a way to clear the values of all visible input fields in a form using JavaScript? I'm currently struggling with setting text inputs to empty as they come out as undefined. Any suggestions on how to achieve this? ...

Is there any difference in loading speed when using an async function in the createConnection method of promise-mysql?

Is it more efficient to use asynchronous createConnection or not? Does this impact the loading speed in any way? I am working with express, ReactJS, and promise-mysql. Which approach is preferable? Option 1: async connect () { try{ ...

Is my page not displaying correctly due to compatibility view?

My client "jordanzad.com" has a website where the main page design appears broken when viewed in compatibility view. Can you help fix this issue? ...

What is the best way to align text above a wrapper box?

After watching a tutorial on YouTube about creating a simple login form, I decided to customize it with some personal touches. I wanted to include a "Welcome" text above the login form, but when using h1, the text appeared next to the box rather than abov ...

Tips for eliminating unwanted white space that appears after clicking on a drop-down menu

Is there a way to remove the white space after clicking on the drop down menu? <select name="shipping_method" class="required-entry" id="shipping_method" style="width:250px;"> <optgroup disabled="disabled" style="font-style: normal; display: n ...

After loading ajax content onto the page, the scroll bars fail to appear

I am currently constructing a website that loads page content through ajax. Everything seems to be functioning perfectly, except for a peculiar issue I have encountered in Chrome and Safari. Surprisingly, it is working flawlessly in IE! The problem lies i ...

"Trying to access the Reducer in a container results in an undefined value

I recently tried adding a new Container to my React App, connected it with Redux, and wanted to test if everything was functioning properly. Unfortunately, when I try to access the reducer using this.props.selection, it returns as undefined. This is puzzli ...

An effective way to verify if a record has been successfully updated is by utilizing Sequelize's

Within this snippet of code, I made an update to a specific record in the IPAdress model. What is the best way for me to verify if the record has been successfully updated or not? let IPAdress = await model.IPAdress.update(data,{ where: { id } }); ...

Ways to ensure the first div always expands when sorting in AngularJS

In my AngularJS application, I have a set of div elements generated using ng-repeat. The first div is always expanded by default upon loading the page. Now, when I click a button to sort the divs based on their ID in the JSON data, I want the top div to ...

Two sections that are supposed to have the same height, but one seems to be slightly taller than the other

Upon closer inspection: At first glance, they may appear identical at certain zoom levels. However, a more detailed examination through zooming in and out reveals a noticeable discrepancy. Firefox's default zoom may make them seem incorrect, while Chr ...

What is the best way to assign a unique color to each circle?

Struggling to assign random colors to each circle in my canvas. Currently, they all have the same color that changes upon refresh. I'm aiming for unique colors on each circle but my attempts have been unsuccessful so far. Check out my code below: v ...

Display irregularly spaced time samples from a MySQL database on a Google Line Chart using a PHP query

Currently, I am utilizing a Line Chart from Google to display data fetched from a MySQL database involving various variables at different time intervals. Although the sample time is set at 1 minute, there are occasions where some data points are lost (for ...

Detecting Image Loading with Javascript

My website is filled with numerous images categorized into 5 different groups, causing it to load slowly. To improve loading times, I have assigned each image a "data-src" attribute containing its actual source. Then, when a specific category is selected ...