Effortlessly transferring elements from box 1 to box 2 using jquery sortable - a step-by-step guide

Here is the structure of my code:

HTML :

<div class="content">
    box 1 (Customer)
    <ol class='example limited_drop_targets default vertical'>
      <li>Valentino Rossi<ol></ol></li>
      <li>David Beckham<ol></ol></li>
      <li>Eden Hazard<ol></ol></li>
    </ol>
</div>

<div class="content">
    box 2 (Room Type)
    <ol class='example limited_drop_targets default vertical'>
      <li>Single Room<ol></ol></li>
      <li>Double Room<ol></ol></li>
      <li>Family Room<ol></ol></li>
    </ol>
</div>

Javascript :

  $(function  () {
          $("ol.example").sortable();
        });

To see the full code and demo, visit: https://jsfiddle.net/oscar11/x0q81hfq/

The source of this code can be found here:

I am facing an issue where dragging/dropping elements from box 1 to box 2 is not functioning as expected. I checked the documentation but couldn't find a solution.

Can anyone provide guidance on how to achieve dragging/dropping elements between box 1 and box 2 using jquery sortable?

Thank you for your help!

javascriptjqueryhtmlcss

Answer №1

Our initial step is to browse the examples page for the plugin in order to discover any documentation that may clarify whether or not the plugin supports the specific functionality you require.

Upon a brief inspection, we identified that it is possible to specify a "group" parameter that accepts a class, resulting in changes to your code as follows:

$(function() {
  $("ol.example").sortable({
    group: '.example'
  });
});

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

Developing a hover-triggered tooltip feature in a React application

A tooltip has been created that appears when hovering over an element, displaying the full name of the product called productName. <div className="product-select-info" onMouseEnter={e => productNameHandleHover(e)} onMouseLeave={productNameHand ...

javascriptreactjstypescript

Ways to populate the second nested array with new values without overwriting existing ones

I am encountering the following issue: this.logs = {}; this.logs[1] = resp; In my initial array, I have the result shown in the image below: https://i.sstatic.net/RScSm.png However, when I try to add a second level array with another array like this: th ...

javascriptarraysangulartypescriptarraylist

The ability to submit a conversation chat is currently

I encountered an issue when attempting to submit a chat, and I received the error message 'handlebar is not define'. I followed the code tutorial provided in this link: https://codepen.io/drehimself/pen/KdXwxR This is the screenshot of the error ...

javascriptjqueryhtmlcss

Having trouble figuring out how to update a list using ajax in Yii

I need to modify a JavaScript function that filters the content of a list. The current code looks like this: var id = $(this).data('id'); $.fn.yiiListView.update('contests-list', { data: {category: 2} }); I couldn't find any ...

javascriptphpjqueryyii

Learn how to showcase JSON file contents in HTML using AngularJS

When attempting to display a collection of questions stored in JSON data within an HTML file, I incorporated the ng-repeat directive to loop through the data using ng-repeat="q in response", and then attempted to print them individually like this: {{q.q1} ...

javascriptjqueryhtmlangularjsjson

Is there a method to incorporate a scroll event into the ng-multi-selectdropdown, a npm package?

Query: I need to incorporate a scroll event in the given html code that triggers when the div is scrolled. However, I am facing issues with implementing a scroll event that works when the elements are being scrolled. <ng-mult ...

javascripthtmlangular

Steps for including a 'close' button in Lightbox on Bootstrap 4

Apologies for my English... I found this code here, but it was missing the close button. Above on the Website I have, <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.clou ...

javascriptbootstrap-4

Unpredictable hovering actions when interacting with nested items within the hover layer

Imagine a scenario where we have the following elements: A container that holds everything A baseDiv inside that container // Let's create a base layer var container = document.getElementById('container') var baseDiv = document.createEl ...

javascriptmouseoveraddeventlistener

Revamping tree organization with Accelerando

I recently made the switch from XML to JSON data structures in a small web project. As I was looking for ways to transform the data, similar to how XSLT is used with XML, I came across an interesting library called . However, I encountered a challenge whe ...

javascripthtmljsonrecursiontempo

From Linq query to dynamic d3.js visualization

I am searching for an effective method to input data from my MVC application into a d3.js bubble chart. Specifically, the standard bubble chart requires nested data in this format: { "name": "flare", "children": [ { "name": "an ...

c#javascriptjsonlinqd3.js

Is it possible for the outcome of a component to be passed to render and actually show up as undefined

I am currently working on creating a wrapper component for an API call in order to display "loading" if the API hasn't updated yet. As I am new to React, I am struggling with passing the state to the ApiResp component: After checking the console.log ...

javascriptreactjsreact-native

Error: The function init is missing and cannot be found when the HTML button is clicked

In my attempt to utilize a function within HTML, I am encountering difficulty implementing it in an Angular TS component. An error message indicates that the code must be correct as it is being provided by TensorFlow. The snippet of code in question is as ...

javascripthtmlangulartensorflownpm

Toggle the visibility of a div using jQuery repeatedly

I'm looking to implement a show/hide functionality using jQuery for a DIV based on a text link. What sets my requirement apart from the examples I've seen on this site is that I need a way to do this multiple times on one page and also have it wo ...

javascriptjqueryshow-hide

Modifying the background hues in React using the useState hook

Hello there, I'm in need of some clarification on the following code snippet. I've come across a piece of code that I can't quite grasp, even though it was recommended to me. To style text colors based on checkbox status, I came up with thi ...

javascriptreactjsbackgroundstylesconditional-operator

Concealing Popover with internal click

I am currently implementing Vue-PopperJS in my project, following the setup provided on the linked page with a few modifications: <template> <Popper ref="popover" trigger="clickToToggle" :options="{ pla ...

javascriptvue.jspopper.js

Encountering a blank response when using $http.get() in AngularJS version 1.5.0

Within my AngularJS application, I have established a factory that is responsible for fetching updated data from the server following the deletion of one or more items from a list. var myApp = angular.module('app'); myApp.factory('mvListRef ...

javascriptangularjsnode.jsmean-stack

Ways to rearrange items in the navigation bar?

I am working with a Bootstrap template and I am trying to adjust the layout to be right-to-left (RTL). Currently, when I set the site title to RTL in the navbar, the buttons in the navbar also switch to RTL alignment. This is not the desired layout I want. ...

javascripthtmlcssfrontendbootstrap-5

Allow for the inclusion of periods and spaces when coding in JavaScript

My JavaScript code checks if the username meets certain criteria. // Check the username re = /^\w+$/; if(!re.test(form.username.value)) { alert("Alert"); form.username.focus(); return false; } Currently, the script only accepts lette ...

javascriptregex

Maintain server-side variable state in Next.js after navigating with Link

I have a specific requirement for my NextJS app. I need to render certain pages inside a React Native Web View and hide specific components (like the header and footer) once the rendering is complete. These components are simple, server-side rendered eleme ...

javascriptreactjsreact-nativenext.jsnavigation

What is the reason for needing to return a function when making an API call, but not when invoking a view controller in Express (specifically, KeystoneJS

When working with views in Express, my code needs to adhere to a specific format (I am also using the KeystoneJS CMS): exports = module.exports = function(req, res) { // code for the view } However, when creating an API that returns JSON data, I ha ...

javascriptnode.jsexpresskeystonejs