Questions tagged [sortablejs]

Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists

Filter by
Sorted by
Tagged with
0 votes
0 answers
20 views

Sortablejs-How not to insert a dom element when the onMove function is called

I try to add draggable function to the tree item. When I try to drag item A to item B, and I don't let go of the mouse, I notice that the dom element of item A is inserted into itemB.I don't want the ...
lizhihang123's user avatar
0 votes
0 answers
23 views

Text Search in Sortable R

Is there any way to include text search option in add_rank_list from sortable package in R? Image below, for example we have a long list of items, any way we can include a text search that can help to ...
Zahier Nasrudin's user avatar
0 votes
0 answers
22 views

Accessing SortableJS instance from Stimulus controller in Action Cable channel

I'm using Stimulus and SortableJS in a Rails application to handle drag-and-drop functionality. In my Stimulus controller, I've created a SortableJS instance named sortableInstance. I need to access ...
Fábio Lima's user avatar
0 votes
0 answers
27 views

want to implement auto horizontal scrolling functionality in my kanban board

I want to make a kanban board which having multiple column in each column list of cards and I want to be able to move cards between columns or sort in an specific column. All things works good. But ...
hardik's user avatar
  • 116
0 votes
1 answer
40 views

Disable items to be pushed while dragging by other elements with SortableJS

I'm using a SortableJs on a list composed from items, which contains fixed elements. I would like the fixed elements to stay in the same place. They should not be dragged around, nor being reordered/...
aspirinemaga's user avatar
  • 3,827
0 votes
2 answers
52 views

what's the type of the Vue.Draggable "change" event?

I'm trying to get the type (in a typescript sense) of a change event from Vue.Draggable https://github.com/SortableJS/Vue.Draggable but can't find its definition the documentation shows that the event ...
Mathieu's user avatar
0 votes
0 answers
28 views

Add undo to a SortableJS list with nested list(s)

I have a single HTML list which may contain zero or more nested lists. A nested list is never be more than one level down ie nested lists cannot contain itself nest a list. Users can add/remove nested ...
Andrew Foulds's user avatar
0 votes
1 answer
22 views

knockout save reordering with jQuery SortableJS when drag/drop rearrange list in

I have a knockout application, where I have a list of divs for a knockoutobservablearray. After I move an item to a new position. How do I update the knockoutobservablearray to reflect the changed ...
user1561196's user avatar
0 votes
0 answers
18 views

manual even trigger using Sortable

Trying to do some data sorting using Sortable.js (https://sortablejs.github.io/Sortable/). This seems to be working for me. I have a use case where I will let customer click on the icon to move the ...
WdUm1980's user avatar
0 votes
0 answers
273 views

I couldn't make HTMX work with Bun because I had a issue with importing

Installed via bun add htmx.org bun add v1.0.1 (31aec4eb) installed [email protected] 1 packages installed [2.40s] Imported with import "htmx.org"; Used it in htmx.onLoad(function(content) {...
bear's user avatar
  • 3
0 votes
0 answers
23 views

Is there a way to move both the nested parent element and child element, in SortableJS?

My Requirements Only the children can have handles to move them around and re-sort inside of the correct Group Children from other groups can not mix When the child goes past its group it needs to ...
fizz's user avatar
  • 1
1 vote
0 answers
33 views

Rails 7 SortableJS

i have a rails app and it contains stripe for payment, my console shows Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://js.stripe.com ') does not match the ...
uma's user avatar
  • 53
1 vote
0 answers
179 views

how can i freely sort cards in drag and drop layout - jquery bootstrap - where multiple cards can be placed in one row across multiple columns

i want to have drag and drop sortable layout for my bootstrap cards. i did dowith sortable jquery plugin but it is draging and droping in a row. i want that if i have card 1 that is bigger height col-...
mandm123's user avatar
0 votes
0 answers
37 views

SortableJS - Disable sort on a condition

I am using sortable.js to make sortable lists. I want to disable sorting when a condition is met. How can id do this? Here is what i have tried; var sortableRequest = Sortable.create(document....
H D Dang's user avatar
0 votes
0 answers
23 views

Nested vuedraggable - children for draggable not display

I would like to achieve the effect of managing subpages (changing the order, level) on the page by dragging. I use vuedragabble for this. I have a problem with changing the depth levels - I think I ...
Lidia K.'s user avatar
  • 229
0 votes
0 answers
36 views

sortablejs does not work properly with local storage

I'm using the sortablejs library to enable the reordering of my list and to save the order in the local storage. I use console.log to check what happens during the 'get' and 'set' sections, and they ...
dest3's user avatar
  • 1
1 vote
1 answer
276 views

How do I make a two dimensional grid with Vue.Draggable?

I am using Vue2 with Vuetify and I have a two dimensional grid of buttons. <v-row> <v-col cols="6" v-for="item in itemList" :key="item.id"> <v-btn ...
nerfherder616's user avatar
0 votes
0 answers
31 views

How to save the select2 items after making it sortable

I'm trying to make the following select2 selection field in laravel voyager admin panel sortable with sortable.js. <select id="selected-items" class="...
Milad's user avatar
  • 11
1 vote
1 answer
64 views

Lock or disable item in ReactSortable or SortableJS

Is there a way to lock or disable an item in ReactSortable / SortableJS? I want the last item (input in this case) to not be part of the draggable items. In principle the code looks something like ...
Arno van Oordt's user avatar
0 votes
1 answer
224 views

svelte and sortable js, how to handle a dynamic array

I'm new to svelte and am working on a simple drag and drop list using sortablejs as the base. I load the data from a nested array of objects to instantiate the lists, and want any changes from ...
Matt Thornton's user avatar
0 votes
0 answers
73 views

Sortablejs, how can I set id on dynamic list

I'm using the Sortablejs library for the drag/ drop/ reorganize feature and I'm having trouble setting id's on a dynamic list on start up. I am able to set numbered id's to be used for indexing after ...
yahooNGMI's user avatar
0 votes
1 answer
208 views

Svelte and sortablejs : issues with dynamic list

I have a similar problem as the one shown in this Svelte REPL. If I create a sortablejs object in a Svelte project from a dynamic list (that means a list created with {#each...} logic blocks from a ...
Sylcha's user avatar
  • 43
2 votes
1 answer
100 views

In Shiny using sortable package drag and drop names that become Charts

This is my shiny app using the sortable package for drag and drop: library(shiny) library(imola) library(sortable) line_chart <- ggplot(mtcars, aes(mpg,cyl)) + geom_line() bar_chart <- ggplot(...
Laura's user avatar
  • 727
0 votes
0 answers
41 views

Getting the json structure of nested elements with sortable.js

I want to use the hierarchical nestable library. I can't get json structure of nested elements with child elements.(http://sortablejs.github.io/Sortable/#nested) Here I want to get the nested elements ...
Korkut hacisalihoğlu's user avatar
1 vote
0 answers
59 views

How to disable sorting while dragging and sort only after drop using the vue.draggable library?

The normal behavior of the Vue.Draggable is to sort/move the elements while they are being dragged. I want to disable this and sort only once the element is dropped somewhere. For a visual ...
Ivo Mitev's user avatar
0 votes
0 answers
66 views

Sortable.js vs Interactjs Performance

My project currently uses interactjs for drag and drop operations and is a bit slow. I wanted to explore other options that can improve the performance overall. Came across sortable.js but could not ...
bluemoonstudios's user avatar
1 vote
1 answer
50 views

Cannot add sortable::rank_list() inside of a shinyalert or modal

I am trying to add a rank_list from the sortable library in a Shiny application. This seems to work fine if the input is in the fluid page part of the UI. When I add it to a shinyalert() or a modal, ...
shbshk's user avatar
  • 72
0 votes
0 answers
54 views

How to bundle sortablejs in ASP.NET Core?

I am writing a Typescript file that has this import statement: import Sortable from "sortablejs"; I then encountered the following error when I run the web app: Failed to resolve module ...
user avatar
0 votes
0 answers
55 views

Sortablejs and empty groups causing flickering

I'm developing an extension for After Effects which makes use of drag and drop functions. I'm using sortablejs library but I'm happy to use something else if I can't fix the issue I have. Check this ...
Davide's user avatar
  • 1
1 vote
0 answers
165 views

Angular 15 + SortableJS + Swiper - navigation stops to work

I am working on a project where I use cards on a page. These cards are slidable and sortable between each other (Angular 15 + SortableJS + Swiper). After opening the page everything works fine, but ...
Josef Zemánek's user avatar
0 votes
0 answers
77 views

SortableJS ascending descending sort

I use bootstrap and sortable.js, the created table works very well for moving items with the mouse I want to sort a table with buttons How do I implement a sort on the buttons that will sort the list ...
Weber's user avatar
  • 75
0 votes
0 answers
18 views

I use @row-hover among t-table events in vue-bootstrap, how do I get the last element?

I want to implement drag and drop function using sorTable package in t-table. So, I need the mousedown function of t-table, but I couldn't find it. So, as an alternative, we're going to implement it ...
ym Kim's user avatar
  • 3
0 votes
0 answers
21 views

I encountered a bug when using Sortable in vue3. The document.querySelector found redundant items

enter image description here As shown in the picture, my data has two parts. They are repeated except for 'is-center'. <el-table v-loading="loading" :data="AmzGoodsListList" ...
Tom Paul's user avatar
0 votes
0 answers
132 views

react sortable-js, two types of items and nested items

I have a problem with react-sortable-js. I want to create a component that will handle two type of item category and item. I deal with the following scenario Move item J, as a nested item, to section ...
mxcdh's user avatar
  • 863
0 votes
0 answers
64 views

Is there any way to implement virtualization to react-sortablejs

I am trying to implement virtualization with react-sortablejs for lists with more than 500 items. I have tried with react-virtuoso, but react-sortablejs wraps the entire react-virtuoso component as a ...
Nameer Muhammad's user avatar
0 votes
0 answers
22 views

How do I know if a sortablejs div is over another sortablejs div?

Problem Statement: I want to make a sortable list where you can (obviously) sort its items. I want to make it nestable. So a Todo can have nested Todos. One solution is to have an empty div sortable ...
Sawaid's user avatar
  • 77
0 votes
0 answers
85 views

Problem with sortable js when sorting litelement

I'm new to litelement. I use sortablejs to sort my litelements. My litelements is dynamically render based on the array and the preview of sorting is so wrong. Can any one help me please. You can ...
budz's user avatar
  • 123
1 vote
1 answer
70 views

How to add ascending - descending sort buttons in a bar chart using d3.js?

I'm trying to figure out how to add interactive features in a bar chart. Now I'm stuck about program fuctions for a click action using a button to sort ascending and descending. This is my code: const ...
Chaviting's user avatar
1 vote
2 answers
2k views

How do I customize the "ghost" element with Vue.Draggable

I'm using Vue.Draggable to implement drag and drop sorting on a table element. Some of the draggable elements in the table are quite tall (tbody tags with many rows), so I would like to reduce the ...
DMack's user avatar
  • 869
0 votes
0 answers
172 views

Vue draggable with elements that change height upon being dragged

I have a Vue3 app with vue-draggable and I have a list of sortable cards which possibly contain long text inside. To make dragging easier, I want to hide the text contained in the cards and only show ...
Samuele B.'s user avatar
0 votes
1 answer
250 views

Vue Draggable clone into another list via custom component

I'm working in a Nuxt JS 2.x project that has Vue Draggable 2.24.3 I have a page where I have two draggable lists as part of a custom component called DraggableList My DraggableList component is the ...
Ryan H's user avatar
  • 2,617
0 votes
0 answers
25 views

Add if not exist SortableJs

How can you add a elm to a list only if it not exist in the list with sortable. I try to delete from the list if it exist in the list with the onEnd option, but sortable put the elm on the list before ...
isidore's user avatar
  • 11
0 votes
0 answers
18 views

JQuery Sortable() Widget - Placing index within the placeholder;

Using (jQuery Sortable) is it possible to populate the placeholder with the text containing the index of each item. For instance if the user moves the mouse down to sort the value of the current index ...
Powl_London's user avatar
0 votes
1 answer
57 views

R shiny sortable clone element in rank list not working

I have a shiny app where the user uploads a csv file. Then, using the column names from the csv file, I create sortable bucket list. I would like drag the column name from the first rank list and have ...
Oliver Oliver's user avatar
0 votes
1 answer
229 views

Failed to resolve module specifier "sortablejs". Relative references must start with either "/", "./", or "../"

I keep getting this error: Failed to resolve module specifier "sortablejs". Relative references must start with either "/", "./", or "../". This is my JS code ...
Hameed Ayoola's user avatar
1 vote
1 answer
32 views

Remove newline from RShiny CSS SortableJS

I have a 99% working minimal example here. The only thing I would like to change is to have the rank number next to the letter rather than on the line above it. library(shiny) library(sortable) ...
Justin's user avatar
  • 153
0 votes
0 answers
134 views

I want to change jquery-ui sortable code into sortableJS with stimulus how can I do it

all_request.js.erb $(function () { $( ".kanban-card, .sub-card, .kanban-card .sub-tickets" ).sortable({ connectWith: ".kanban-card", cancel: ".main_ticket", ...
Laxmi Pasi's user avatar
0 votes
0 answers
106 views

Restrict SortableJS Elements Clone + Nesting Problem

I am looking to allow only certain elements to be nested inside others and I did not managed to do so. Example: Application element can contain only Container elements. Container only Queries, and ...
Dragos Enache's user avatar
1 vote
1 answer
883 views

Sort columns table with sortable.js

How to sort columns table with sortable.js library? https://sortablejs.github.io/Sortable/ I set sortable_container(sortable_emploees id) on tr attribute. And that's works fine. But how to sort at the ...
Mateusz Białowąs's user avatar
0 votes
1 answer
308 views

How to move an item in an array without updating all the others?

I have an Array composed of Objects, such as : const items = [ { id: 0, title: 'Object 1', sort: 0 }, { id: 1, title: 'Object 2', sort: 1 }, { id: 2, title: 'Object 3', sort: 2 }, { id:...
Cyril N.'s user avatar
  • 39.1k

1
2 3 4 5