Refreshing the Document Object Model when dragging and dropping items using jQuery

Within my table, I am working with two unique columns. The first column is labeled "pick" and the second is labeled "drop". In the first column, I have several items that I can drag using jQuery UI draggable/droppable into the second column.

My goal is to dynamically update the DOM when an item is moved. Specifically, I want to remove the item from the "pick" column and add it to the "drop" column. I am looking for assistance in consolidating this process into a single function that can be easily integrated into the existing codebase where drop detection occurs.

jqueryjquery-uidrag-and-drop

Answer №1

My approach to this problem involves changing the parent of the dropped element to the element it was dropped onto.


$( ".droppable" ).droppable({   
    drop: function( event, ui ) {
        $(ui.draggable).appendTo($( this ));
}});

However, I have also considered optimizing the code so that it only runs when necessary.


$( ".droppable" ).droppable({   
    drop: function( event, ui ) {
        if($(ui.draggable).parent() !==$(this)){
            $(ui.draggable).appendTo($( this ));
        }
}});

Upon further reflection on your issue, I suggest trying a new solution. In order for this to work effectively, ensure that the 'drop' column has 'top' and 'left' properties with 'position:absolute', and that the main wrapper containing both columns has 'position:relative'.


$( ".droppable" ).droppable({   
    drop: function( event, ui ) {
        var $kid = $(ui.draggable);
        var $dad = $(this);
        if($kid.parent() !== $dad){
            $kid.appendTo($dad);
            $kid.css('left', $kid.left() - $dad.left());
            $kid.css('top', $kid.top() - $dad.top());
        }
}});

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

Issues with sending data using ajax

Trying to get weinre working through Ajax by calling this on dom ready: $.ajax({ url: 'http://debug.build.phonegap.com/target/target-script-min.js#hutber', dataType: "script", crossDomain: true, error: function(data){ c( ...

javascriptjqueryajax

The process of locating a textarea by its id becomes obsolete when integrating CKEDITOR

The data table has editable cells, where clicking on a cell will trigger a bootstrap modal to display with a textarea containing the text retrieved from the database. Snippet of the table structure: <table class="table table-striped table-hover" id="t ...

javascriptjquerytwitter-bootstrapckeditorbootstrap-modal

Error in Dimplejs: Line is not visible when series is empty

I have a dimplejs.org line chart set up. I am trying to colorize the Clicks data points from blue to red (blue for fewer clicks and a gradient from blue to red for more clicks). When I set the series as shown below, it works fine but the tooltip only incl ...

javascriptjqueryd3.jsdata-visualizationdimple.js

What is the best method to retrieve the Harvard GSD calendars with Ajax?

Currently, I'm working on setting this up using Ajax technology, and here's what I've managed to come up with so far. Despite numerous attempts, I still haven't been able to crack the code. function retrieveCalendarData() { $(".cals"). ...

jqueryajaxcalendar

Collapse the Bootstrap Menu upon selecting a Link

I am working on a side menu with an offcanvas display feature. The current functionality is such that when the button is clicked, the canvas pushes left and opens the menu. However, I want the menu to collapse and close automatically when a link is selecte ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Is there a way to ensure that jPlayer plays the same song even after a page refresh

I have been working on integrating jPlayer with Ajax to ensure that when the page of my website is refreshed, jPlayer will continue playing its current song seamlessly. I have successfully stored track information and the current track during refresh, ho ...

javascriptjqueryajaxjplayer

Arranging an array using jQuery JSON information

I've been working on sorting an array that is generated by a PHP script. The PHP script retrieves HTML files from a directory and then utilizes jQuery to fetch and display them on the webpage. Below is a snippet of my current code: <script> $( ...

jqueryjson

Issues with receiving data on $.ajax POST request

If you'd like to check out my website Please use the following login details (case sensitive): Username: stack Password: stack Click on the tab labeled "yourhours." The main goal is to send all input box data to a database. At the moment, I am fo ...

javascriptphpjqueryajax

Check the status of the audio source URL using JavaScript

I am currently live streaming audio to my player using the Soundcloud API. <audio></aidio> <source src="soundcloud-track-url"></source> Within my code, I have added an onerror eventListener for both the <audio> and <sourc ...

javascriptjqueryhtml5-audiosoundcloud

Interact with jQuery to trigger events upon clicking on a list item, excluding checkboxes within the list

I'm in the process of developing a straightforward web application. I have a dynamically generated list on one section: Subsequently, I set up an event that triggers when any element within the list is clicked: $(document).on('click', &apo ...

javascriptjqueryhtmlcheckbox

Function defined as an AngularJS component

I am facing an issue where my component is not initializing when I create it with a function that returns a component object. Can someone please help me understand the difference between these two situations? Html: <div ng-app="demoApp"> <navb ...

javascriptjqueryangularjsangular-components

Learn the technique of swapping out a portion of a string with a value from an input field in real-time

My webpage has a form on the left side where users can input text, and on the right is some static text. I want the text on the right to update automatically as the user types in the input field on the left. In my HTML code, it looks something like this - ...

javascriptjqueryhtml

Maintaining the position of the screen as you type in information that is located outside of the container

I am encountering an issue with the input/text-area element in absolute position extending halfway outside the container. The screen position seems to follow the caret as I type, but I'd prefer to keep writing and have part of the text hidden beyond t ...

javascriptjqueryhtmlcss

JavaScript events for scrolling horizontally and vertically across multiple browsers

Is there a way to capture mousewheel and touchpad events, including on Mac, using JavaScript? Ideally, I want to get deltaX and deltaY values for both horizontal and vertical movements. I came across a website - - that appears to handle touchpad events ho ...

javascriptjquery

Data sent through AJAX messaging is not being acknowledged

I recently made an AJAX request and set it up like this: $.ajax({ data : { id : 25 }, dataType : 'json', contentType : 'application/json; charset=utf-8', type : 'POST', // the rest of the ...

javascriptphpjqueryajaxjson

The deletion was not successfully carried out in the ajax request

Can anyone help with an issue I'm having while trying to remove a row from a table using the closest function? The function works fine outside of the $.post request, but it doesn't work properly when used within the post request. Here is my code: ...

javascriptjqueryajax

D3 Chart: What is the best way to insert images into a node?

Within the jsFiddle demo provided in this query, there is code displayed. I am curious about how I can assign images to each node. var graph = { "nodes":[ {"name":"1","rating":90,"id":2951}, ] } You can access my jsFiddle Demo through this ...

javascriptjquerycssd3.js

Tips for splitting the json_encode output in Javascript

Looking for help with extracting specific values from JSON data retrieved via PHP and AJAX. I only want to display the agent name in my ID, not the entire object that includes "name" : "Testing". Here is the console output: [{"agent_module_id":"1","agen ...

javascriptphpjqueryajax

Ways to extract the initial layer of information from a JSON document

I have a JSON file named movie.json stored externally, and it follows this format: { "action": [ { "id": "1001", "name": "Matrix" }, { "id": "1002", & ...

javascriptjqueryjson

The process of loading the Facebook like script using $.getScript is causing an issue where the

How can I make the Facebook like button display properly on my HTML page? I have successfully loaded scripts and divs for Twitter, Google +1 buttons, but the Facebook like button script is not displaying the button. The alert shows that the script is exec ...

javascriptjqueryfacebook