228 questions
0
votes
0
answers
35
views
SortableJS Sortable how to change cursor when onMove returns false
I have a Sortable with an onMove method that returns false in some circumstances. How can I change the cursor to "not-allowed" when it returns false, so it is clear to the user that they ...
- 143
0
votes
0
answers
82
views
Why my drag and drop menu is not working?
I'm building an admin menu manager with Laravel Livewire and SortableJS. The drag-and-drop UI works perfectly but I can not reorder menus and nested submenus visually.
I have a recursive function in ...
0
votes
1
answer
82
views
Sortablejs is slow on Chrome with large table (2000 records)
When my sortablejs has an table of 2000+ records it gets realy slow and the page gives me the option to wait or close tab.
But this table is used by clients(in need of an good UX) so this cant happen ...
- 445
0
votes
1
answer
37
views
Change the settings of Sortablejs after its set
I am having trouble to change my sortablejs settings after its set.
The initialization of this function is done within an other script(this script may not change) and is done when the page is loaded.
...
- 445
0
votes
0
answers
86
views
How to update or remove the dragged image during drag & drop?
I am using SortableJS to implement a ranking system for users.
When I drag and drop an item (for example, moving rank 3 to rank 4), the image that follows the cursor does not update its background ...
- 3,395
0
votes
1
answer
52
views
Drag-and-Drop Form Customizer: Duplicate and Empty Fields Issue When Reordering
I am working on a drag-and-drop form customizer where users can add, reorder, and remove fields using Alpine.js and Sortable.js. However, I am encountering two issues that I cannot seem to fix:
...
1
vote
1
answer
156
views
Cannot find Sortable dependency in SlickGrid: "Uncaught (in promise) ReferenceError: Sortable is not defined" when run with Vite
I have been trying to get SlickGrid to work, first in a svelte application, and then in a Vanilla Javascript one for testing, both built with Vite and where Slickgrid is installed via npm.
Even though ...
- 163
0
votes
0
answers
63
views
Can you make sortable.js work with Bootstrap 5 modal?
I'm building a checklist app for fun and I'm trying to use sortable.js with python django.
I can make a sortable list work in this example with the html as follows
{% extends 'BJJApp/base.html' %}...
- 117
0
votes
0
answers
39
views
Sortable js on change the drag element source it impact the dragged element
I am using sortable js
The issue occurs because the filterValue state you use for the search functionality applies a hidden class to the drag source items, but this hidden state affects the dropped ...
0
votes
1
answer
165
views
Flickering/being removed when using sortablejs with dcraw
I try to list files selected using multiple file input using the code below (also available at jsbin). When trying to move li items to sort and nest them, they start flickering and sometimes are ...
2
votes
1
answer
55
views
How to adjust the width and margin of Sortable's rank lists?
Is there a way to define the ratio between the width of ranked list (drag from here narrow, to here wider) that are horizontally aligned? Can we adjust/reduce the space between the two lists?
Example ...
- 1,026
-3
votes
1
answer
55
views
SortableJs will reorder elements after get actual position from backend [closed]
how I can update current position element, after get this information from server? I have array with elements, and store method, but after render component I can't reorder elements in list, only ...
1
vote
1
answer
119
views
SortableJS - Drag element into sibling as a child
I'm new to using SortableJS, so I'm not sure if this is by design or if I'm doing it wrong.
I can drag elements to be children of elements that already have at least one child element, but I cannot ...
- 870
0
votes
1
answer
619
views
Difficulty Sorting Nested JSON Layer Tree with SortableJS in Alpine.js
I'm having trouble sorting my nested JSON layer tree using SortableJS in an Alpine.js application. I have a complex JSON structure representing layers, which can be nested multiple levels deep. My ...
- 8,455
0
votes
0
answers
142
views
SortableJS collapse list items on drag
I am using SortableJS to implement drag and drop for a todo app. Sample structure like so:
List 1:
- Item
- Item
- Item
List 2:
- Item a
- Item b
- Item c
To make list drags more effective, I would ...
- 159
1
vote
1
answer
143
views
How do I adjust the margin and width of R Shiny sortable bucket list?
I'm trying to write a UI where a user can categorize values by pulling from a bucket list on the left to different bucket lists on the right. To name the categories, there is a textInput on top of ...
0
votes
2
answers
721
views
DOM not updating in x-for loop with AlpineJS when data is sorted
I have an AlpineJS UI which allows an editor to add style rules or groups of style rules (it's not really important what these are but I've kept the concept so as to differentiate from a more simple ...
- 6,040
0
votes
1
answer
395
views
Customize the "ghost" element with VueDraggable
I use the following library: https://github.com/SortableJS/Sortable
I have 2 lists where I can dragg one element to the other list. But When i dragg the item its a clone of the icon.
What I am trying ...
- 403
0
votes
1
answer
196
views
Next.js react-sortablejs with local images
I have a problem that when I use react-sortablejs with local images, the src to image is not display.
The code:
import { useState } from "react";
import axios from "axios";
import {...
- 21
-1
votes
1
answer
125
views
Prevent elements with a classname "disabled" to move with Sortable.js
I have a list of items, which contains couple items with a class name disabled.
When dragging items, those "disabled" elements should stay fixed and should not move or being pushed.
What is ...
- 3,967
0
votes
0
answers
175
views
Making Sections and rows with SortableJS Svelte
REPL
I am trying to create sections and rows with SortableJS in svelte. I want to be able to reorder sections, reorder rows within sections, and drag rows to new sections. I cannot figure out how to ...
- 897
2
votes
1
answer
572
views
Drag HTML element issue in Safari browser
I have a dialog box, and inside that dialog, I have a list of items, every list item can be dragged and sort UI accordingly. It works perfectly in Chrome and Firefox, but in Safari, when I dragged the ...
- 21
1
vote
0
answers
192
views
How to cancel a sort?
I'm not understanding how to cancel a sort. If I drag outside the target area or hit the escape key while dragging, there is an animation that has the draggable return to original position. But the ...
- 450
1
vote
1
answer
61
views
Set default value in a "destination" sortable rank_list group in R Shiny App
I am using the R package sortable in a Shiny App in a similar way as described in this SO post, with the aim of drag-and-dropping values from one "source" rank_list to a "destination&...
- 327
0
votes
1
answer
77
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/...
- 3,967
2
votes
2
answers
1k
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 ...
- 33
0
votes
1
answer
59
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
438
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) {
...
- 1
1
vote
0
answers
123
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 ...
- 63
1
vote
0
answers
691
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-...
- 11
0
votes
0
answers
167
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
1
vote
1
answer
1k
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 ...
1
vote
1
answer
431
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 ...
- 3,650
2
votes
1
answer
1k
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
256
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
574
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 ...
- 43
2
votes
1
answer
179
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(...
- 759
1
vote
0
answers
219
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 ...
- 43
1
vote
1
answer
89
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, ...
- 72
1
vote
0
answers
255
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
399
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 ...
- 1,201
0
votes
1
answer
295
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 ...
1
vote
1
answer
125
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 ...
- 13
1
vote
2
answers
5k
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 ...
- 959
0
votes
1
answer
423
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 ...
- 3,063
0
votes
1
answer
97
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 ...
- 2,395
0
votes
1
answer
668
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
38
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)
...
- 163
1
vote
1
answer
3k
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 ...
1
vote
1
answer
731
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:...
- 40.1k