Questions tagged [sortablejs]
Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists
228
questions
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 ...
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 ...
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 ...
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 ...
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/...
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 ...
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 ...
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 ...
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 ...
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) {...
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 ...
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 ...
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-...
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....
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 ...
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 ...
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 ...
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="...
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 ...
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 ...
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 ...
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 ...
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(...
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 ...
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 ...
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 ...
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, ...
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 ...
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 ...
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 ...
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 ...
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 ...
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" ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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)
...
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",
...
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 ...
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 ...
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:...