Using SortableJS to capture the moved element and the elements it replaced

Is there a way to retrieve both the dragged and replaced elements in Sortable JS?

The JavaScript code:

var originalList;
var sortable = Sortable.create(selection, {
  handle: '.bars-move',
  animation: 150,

/// I am unsure of what needs to be included here 

});

Here is the table setup:

<table>
  <tbody id="selection">
  {{ formset.management_form }}
  {% for form in formset %}
    {{form.id}}
    <tr id="{{form.instance.id}}">
      <td>
          <img src="{% static 'img/bars_icon.svg' %}" class="bars-move">
      </td>
      <td>{{form.name}}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>

Appreciate the help!

Answer №1

let mainArray;
let sortableList = Sortable.create(selection, {
  handle: '.bars-move',
  animation: 150,

  onStart: function (evt) {
    mainArray = sortableList.toArray();
  },

  onEnd: function(evt) {
    let draggedID = mainArray[evt.oldIndex];
    let replacedID = mainArray[evt.newIndex];
  },

});

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

Using ES6 syntax to pass arguments to a React component

I'm currently working on building a sortable list using the react.js library known as "react-sortable-hoc" (https://github.com/clauderic/react-sortable-hoc). Within my "SortableList" component, I've implemented a mapping function on each element ...

Don't forget to retain the checkboxes that were chosen in the

I am looking for a solution to a specific scenario. When I open a modal box and check some checkboxes, I want those same checkboxes to be selected the next time I open it. Below is an example of my code. Main Controller modal function function openModa ...

Having trouble sending messages on the server?

Programmer Seeking Help with Adding Data on the Server using JavaScript Stack I am encountering an issue with my javascript code as I am attempting to use the post method to add data on the server-side, but it seems to not be posting successfully. Can ...

I am looking to showcase images beside individuals' names or photos on my website in a vertical arrangement, similar to how it is done on Facebook

Looking for suggestions on how to display images uploaded by users on my webpage in a way similar to Facebook, with the user's photo displayed beside each image. Any recommendations or website links would be greatly appreciated. Thanks, Santosh Sahu ...

Access navigation through Google Maps on an Android device directly from the website

Currently, I am in the process of developing an angular 4 website that fetches a list of latitude and longitude coordinates from the server. One of the key features on this website is a button that takes the user to Google Maps, where a route is constructe ...

At what point is it possible for a JavaScript array to hold elements in key-value pairs where the keys are strings?

They say that everything in the world of javascript is considered to be an object. I decided to test this theory by running the code below, but the outcome was not what I expected. var color = []; console.log(color.constructor === Array); color[color[& ...

Issue with React event hierarchy

How can I effectively manage state changes in a deep node that also need to be handled by a parent node? Let me explain my scenario: <Table> <Row prop={user1}> <Column prop={user1_col1} /> <Column prop={user1_col2} /> ...

Randomize the elements of an array to the fullest extent possible

My array looks like this: [0,2,3] The different permutations of this array are: [0,2,3], [2,3,0], [3,0,2], [3,2,0], [0,3,2], [2,0,3] How can I generate these combinations? Currently, my only idea is: n = maximum number of possible combinations, coms = ...

Error encountered when utilizing a specialized jQuery extension: "not a function"

Every time I attempt to execute this function (function($) { $.fn.generateURLHash = function() { return document.URL.substr(document.URL.indexOf('#')+1); }; })(jQuery); when I call $.generateURLHash(), an error pops up in th ...

Require the utilization of both versions of jquery 1.7.2 and 1.8.2

I am facing a dilemma where I need to use two different versions of jquery on the same page. I require version 1.7.2 for a specific function that retrieves data from a database based on a selection change in PHP, and I also need version 1.8.2 for form vali ...

Issue with Caching during Javascript Minification

I Have ASP.Net MVC 3 App. Utilizing YUICompressor.Net for compressing Javascript and CSS files post build with MSBuild. The minimized javascript file is named JSMin.js and the CSS file is CssMin.css. In my master page, I reference these files as shown bel ...

Ways to Extract HTML DOM Attributes using Jquery

I am working with an HTML DOM that is saved in a JavaScript Variable. I need to figure out how to retrieve its attributes. For example: <script> //element_html is ajax response var element_html = '<h1 style="" class="app-control " data-order ...

Animation for maximum height with transition from a set value to no maximum height

While experimenting with CSS-transitions, I encountered an unusual issue when adding a transition for max-height from a specific value (e.g. 14px) to none. Surprisingly, there is no animation at all; the hidden elements simply appear and disappear instant ...

Exploring the World of Angularjs 2

Currently, I am diving into learning angularjs 2. I found a helpful git repository that I am following closely, which can be found here. The repository contains some interesting codes in the index.html file. <script src="node_modules/core-js/client/shi ...

What's the best way to test a simple Bearer Strategy implementation in Passport.js using Postman?

Currently, I am diving into the realm of passport authentication specifically how to authenticate a Restful API. I am feeling a bit uncertain about testing what I have. Here is the BearerStrategy code snippet: var BearerStrategy = new Bearer({ }, fun ...

Extract information from one webpage, proceed to the following page, and repeat the process, utilizing JavaScript on the site

Exploring various web scraping techniques, I've hit a roadblock and could use some assistance. Currently, my Python code successfully extracts data from the first page of my website. response = requests.get(url) soup = BeautifulSoup(r.text, 'ht ...

Refresh the div element's HTML and content using AJAX

I am interested in implementing a feature similar to the StackExchange link found on the top left of the Stack Overflow site. From what I gather, when the stack exchange link is clicked, the following actions take place: The hidden div container becom ...

What is the reason behind Q.js promises becoming asynchronous once they have been resolved?

Upon encountering the following code snippet: var deferred = Q.defer(); deferred.resolve(); var a = deferred.promise.then(function() { console.log(1); }); console.log(2); I am puzzled as to why I am seeing 2, then 1 in the console. Although I ...

Guide to transferring a function as props to children components in React?

I've been trying to implement a handle function that can be passed down to all children of my Layout component. While I know how to do this with custom components, I've been having trouble getting it to work with the 'children' prop. E ...

The Django virtual environment is picking up an outdated version of PostgreSQL, leading to the error message: `django.db.utils.NotSupportedError: PostgreSQL 13 or higher is necessary

I am trying to revive my local environment for a Django project that has been inactive for 2 years. I am running into issues with outdated components, particularly with Django using an older version of PostgreSQL compared to what is in the virtual environm ...