chosen problem concerning jquery

My objective is to transfer li elements from one container to another container when the user clicks on the li span. I have a choices container and a choices display, so when a user clicks on the li span with the id of "add" in the first container, the respective li element is removed and should appear in the second container. However, I am facing some challenges in moving only the selected li element and I am unsure about handling callbacks in this scenario. Any advice on this matter would be greatly appreciated.

 <script>
(function($){   
jQuery( "#catalog" ).accordion({
heightStyle: "content"
});

jQuery("span#add").click(function(){
    jQuery(this).parent().animate(
            {
                'margin-left':'1000px'
            },1000,
            function(){
                var ul_class = $(this).parent().attr('class');
                $(this).slideUp('fast');               
                $("ul."+ ul_class + "_clone").append($(this).parent().html());
                $(this).remove();                
            }
            );

});

}) (jQuery);
</script>

<?php $datas = json_decode($param[0]->params) ?>
<div class="config_holder">
<div id="products">
    <h3>Config Params</h3>
    <div id="catalog">
        <?php foreach ($datas as $key1=>$data):?>
            <h4><a href="#"><?php if(!empty($key1)) echo $key1 ?></a></h4>
        <div>
            <ul class="<?php echo $key1 ?>">
                <?php if(!empty($data) ):?>
                <?php foreach($data as $key2=>$item):?>
                <?php if($key2 !="&nbsp;" || $key2 != " "): ?>
                <li id="" class="ui-state-default ui-corner-all" ><?php  echo $key2; ?><span style="float:right" id="add" class="ui-icon ui-icon-circle-plus"></span></li>
                <?php endif;?>
                <?php endforeach; ?>                
                <?php endif;?>
            </ul>
        </div>
        <?php endforeach;?>
    </div>
</div>
<div id="cart">
<h3 >Mein Konfiguration</h3>
<div class="ui-widget-content">
<img title="" src="http://i.dell.com/das/dih.ashx/165x130/sites/imagecontent/consumer/merchandizing/de/PublishingImages/165x119/6315-inspiron-17r-5721-165X119-de.png" alt="">
<ol>
<li class="placeholder">My Choises</li>
<?php foreach ($datas as $key3=>$clone):?>
<ul class="<?php echo $key3 ?>_clone"></ul>
<?php endforeach;?>

</ol>

</div>
<a href=""><button>search</button></a>
</div>
</div>

Answer №1

If you are familiar with jQuery UI, you can take advantage of its connected list feature.

$(function() {
    $( "#FirstListID, #SecondListID" ).sortable({
      connectWith: ".sharedListClass"
    }).disableSelection();
});

For a complete example, you can visit http://jqueryui.com/sortable/#connect-lists

Answer №2

Give this a shot...

$("span, #add, .ui-icon").on('click', function(){
    $(this).parent().animate({'margin-left':'1000px'}, 1000, function(){
        var ul_class = $(this).parent().attr('id');
        $(this).slideUp('fast');               
        $("ul#"+ ul_class + "_clone").append($(this).parent().html());
        $(this).remove();
    });
});

Check out the DEMO

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

What is the most efficient method for identifying and modifying an element's in-line style while performing a swipe gesture?

Recently, I've been developing a left swipe gesture handler for chat bubbles. Implementing touchMove and touchStart seems like the logical next step, but for now, I'm focusing on making it work seamlessly for PC/web users. I managed to make it f ...

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

Currently, I am utilizing angular in combination with Kendo ui. Is there a way to modify the dimensions of the switch button in Kendo UI Angular using CSS? ...

An unexpected identifier error occurred following an Ajax request

Below is the HTML code that I am working with: <div id="texttheory" class="centertext">'. $short .' </div>'; <button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')"> <im ...

Adjusting iframe height based on its source URL using JQuery

Currently, I have implemented a script to adjust the height of YouTube iframes in order to maintain a 16:9 aspect ratio while keeping the width at 100% of the container. The challenge I am facing is ensuring that the script only affects YouTube videos and ...

Designing a website using HTML and CSS with the goal of optimizing it to fill

My website includes all the recommended elements in the head area: <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, ...

Issue with Bootstrap 3 dropdown not receiving updates

My goal is to dynamically populate a bootstrap 3 dropdown menu from a MySQL database. Everything works perfectly the first time I load the data. However, when I add more rows to the database, they do not automatically show up in the dropdown. Only after ...

Load data into Handsontable using AJAX when the site is freshly loaded

Could you please clarify the reason behind the functionality of this code: $(document).ready(function () { var container = document.getElementById('example'); function fetchData() { var dataResult = null; $.ajax({ ...

Choosing Text with JavaScript

I am looking to enhance the appearance of text on an HTML page by making it bold. I have implemented the following code: <script type="text/javascript" > function getSelectedText(){ if(window.getSelection){ ; return window.getSelect ...

Using recursive setTimeout in Javascript may not always utilize the entire final JSON object that is returned

My current approach involves making recursive calls to a URL until it returns either a success or reaches the maximum limit of tries. Below is a compact version of the relevant code: function doSomething(numRetries) { $.post('someURL', {retr ...

Utilize Vue to condense cells within a table

I am attempting to create a schedule table using vue.js. Each row represents an activity (in this example, only one is hardcoded), and each column represents a time period. The cells contain the names of users if they are scheduled during that time. https ...

Leveraging AJAX for sending variables to PHP and fetching them through AJAX once more

I need to pass values to a PHP script using AJAX for passing and retrieving those values. However, I am facing an issue where the second AJAX call is not able to retrieve any value from the PHP file. Are there any reasons why this might be happening? How c ...

Firefox does not support the event

// This function makes rows draggable within a table by utilizing mouse events. // It handles the drag initiation, movement, and stopping of the drag operation. makeRowsDraggable: function() { var dragInitiated = false; var startPageX, startPageY ...

Unable to execute response

I'm facing an issue with a form in which I am utilizing jquery.ajax to execute PHP code in the background. Unfortunately, my JavaScript code isn't handling the response from the script properly. Interestingly, if I use if (status == "success"), ...

How come jQuery won't let me activate the 'change' event on a radio button?

Click the link below to access the page: Below are the original javascript codes that are functioning correctly: $(document).ready(function(){ $(".open_gene").on('change', function(event) { $('#Gene_field').show(); }); ...

Add different input strings to an array within the scope when there is a change in the input value (AngularJS)

My goal is to populate an empty array within the scope with strings. The number of elements in this array can vary depending on what the user types in the player count input field. $scope.playerNames = []; To achieve this, I am using a $watch function th ...

Creating a unified border style for both <p> and <ul> tags in HTML5

Is there a way to have both paragraphs and unordered lists contained within the same border? I initially thought I could achieve this by placing the list inside the paragraph tag, but that does not seem to work. Below is a snippet of my external style sh ...

Disabling the scrollbar in Selenium screenshots

When using Chromedriver to capture screenshots of webpages, my code effectively does the job. However, I am now facing an issue with removing the unsightly scrollbars from the image. Is it feasible to inject CSS into the webpage in order to achieve this? W ...

What is the best way to align my SVG to display inline with text?

I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text. Here's a snippet of my HTML code: ...

Adjust the path-clip to properly fill the SVG

Is there a way to adjust the clip-path registration so that the line fills correctly along its path instead of top to bottom? Refer to the screenshots for an example. You can view the entire SVG and see how the animation works on codepen, where it is contr ...

Uploading an image via Chrome and transferring it to a server using PHP: a step-by-step guide

In my web application, I am looking to allow users to easily upload images to a server. My idea is for the user to simply paste the image into their Chrome browser (e.g. a print screen), then have the image stream posted to a PHP page where it will be conv ...