By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
sortablejs | reorder lists with drag-and-drop | Widget library
by SortableJS JavaScript Version: 1.10.2 License: MIT
by SortableJS JavaScript Version: 1.10.2 License: MIT
kandi X-RAY | sortablejs Summary
Support
- sortablejs has a medium active ecosystem.
- It has 21483 star(s) with 3154 fork(s). There are 416 watchers for this library.
- It had no major release in the last 12 months.
- There are 302 open issues and 1203 have been closed. On average issues are closed in 118 days. There are 11 open pull requests and 0 closed requests.
- It has a neutral sentiment in the developer community.
- The latest version of sortablejs is 1.10.2
Quality
- sortablejs has 0 bugs and 0 code smells.
Security
- sortablejs has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
- sortablejs code analysis shows 0 unresolved vulnerabilities.
- There are 0 security hotspots that need review.
License
- sortablejs is licensed under the MIT License. This license is Permissive.
- Permissive licenses have the least restrictions, and you can use them in most projects.
Reuse
- sortablejs releases are available to install and integrate.
- Deployable package is available in Maven.
- Installation instructions, examples and code snippets are available.
- sortablejs saves you 380 person hours of effort in developing the same functionality from scratch.
- It has 905 lines of code, 0 functions and 43 files.
- It has low code complexity. Code complexity directly impacts maintainability of the code.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
Get all kandi verified functions for this library.
Get all kandi verified functions for this library.
sortablejs Key Features
Supports touch devices and modern browsers (including IE9)
Can drag from one list to another or within the same list
CSS animation when moving items
Supports drag handles and selectable text (better than voidberg's html5sortable)
Smart auto-scrolling
Advanced swap detection
Smooth animations
Multi-drag support
Support for CSS transforms
Built using native HTML5 drag and drop API
Supports
Supports any CSS library, e.g. Bootstrap
Simple API
Support for plugins
CDN
No jQuery required (but there is support)
TypeScript definitions via @types/sortablejs
sortablejs Examples and Code Snippets
Community Discussions
- Reorder and preserve php array based on given keys
- how to get vue draggable moved item
- Vue.Draggable div items display left and right
- sortablejs not working within SharePoint (webpart)
- NPM - why do I get EBADEGINE errors while I meet versions requirements installing reactjs dependancies on docker (buster)?
- NG_PERSISTENT_BUILD_CACHE=1 ng serve not working
- find input tag inside a html div and that div is stored in a javascript variable
- Updating position of SortableJS + Rails Form
- React-component is not re-rendered when the store is changed, neither automatically nor even by force update
- Vue draggable. Prevent drop on specific node and allow drop on specific node
Trending Discussions on sortablejs
QUESTION
Reorder and preserve php array based on given keys
Asked 2022-Mar-29 at 12:47wondering if it's possible to reorder a php array based on given keys, currently I have an array that looks like this:
array:4 [▼
0 => array:3 [▼
"to" => "test"
"name" => "name"
"type" => "custom"
]
1 => array:4 [▼
"to" => "test 2"
"name" => "name 2"
"type" => "page"
"target" => "test"
]
2 => array:4 [▼
"to" => "my link"
"name" => "something"
"type" => "custom"
"target" => "_blank"
]
3 => array:4 [▼
"to" => "https://github.com/"
"name" => "github"
"type" => "custom"
"target" => "_parent"
]
]
On the frontend I'm using sortableJs to allow users to reorder the items to their liking, when the onSort event is fired I collect all of the ids inside of the sortable container and send it to the php function.
the data that sortable send looks like this
array:4 [▼
0 => "0"
1 => "2"
2 => "1"
3 => "3"
]
Where the value is the order that they're supposed to be in, so based on this data the original array would need to be this
array:4 [▼
0 => array:3 [▼
"to" => "test"
"name" => "name"
"type" => "custom"
]
2 => array:4 [▼
"to" => "my link"
"name" => "something"
"type" => "custom"
"target" => "_blank"
]
1 => array:4 [▼
"to" => "test 2"
"name" => "name 2"
"type" => "page"
"target" => "test"
]
3 => array:4 [▼
"to" => "https://github.com/"
"name" => "github"
"type" => "custom"
"target" => "_parent"
]
]
I've been thinking about this but can't seem to figure it out.
ANSWER
Answered 2022-Mar-29 at 12:43Oh, I love these! My solution would be
$sorted_array = array_map(
function($index) use ($original_array){
return $original_array[$index];
},
$sort_order
);
Where $original_array is your original array and $sort_order is the data that sortable sends.
EDIT: This only shuffles the values around, it does not conserve the keys. Your array is not an associative array, and your keys are not in fact keys but indices, and will always be displayed in order.
QUESTION
how to get vue draggable moved item
Asked 2022-Mar-27 at 18:52I am using this to implement drag-drop in my vue app. Lets my array is:
lists: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
]
I want to get the element object from the list after finishing the drop event. For example, I am moving the Item 1 item. After finishing the drag-drop, I want to get the print of which item has been moved. So, I want to get the output:
{ id: 1, name: 'Item 1' }
To get that, I have used @end:
<draggable
class="list-group"
ghost-class="moving-card"
:list="lists"
group="my-group"
@end="finish($event, lists)"
>
And at finish function, I would like to get the desired output: { id: 1, name: 'Item 1' } from my <v-list v-for="list in lists"></v-list>. So, what to do at this function?
finish (evt, draggedList) {
// console.log('finished')
// desired output (if item 1 has been moved):
// { id: 1, name: 'Item 1' }
}
ANSWER
Answered 2022-Mar-27 at 18:52Use @change="finish" then change your method:
finish (item) {
console.log(item.moved.element) // { id: 1, name: 'Item 1' }
}
RTM: https://github.com/SortableJS/Vue.Draggable#events part which mentions change event.
QUESTION
Vue.Draggable div items display left and right
Asked 2022-Mar-24 at 06:23I am new to Vue.js and for this project, I am using Vuedraggable to drag items. Currently, the items inside the draggabble div are displayed as
Text 1
Text 2
Text 3
Text 4
Is there a way we can change that and display as
Text 1 Text 2
Text 3 Text 4
JsFiddle Link = https://jsfiddle.net/ujjumaki/y1xw95rc/41/
View
<div id="app">
<div>
<draggable id="first" data-source="juju" :list="todos" class="list-group" draggable=".item">
<div class="list-group-item item" v-for="(element, index) in todos" :key="index" style="border-style: outset;
margin-top:0.5%; width: 10%; border-color:#17a2b8; border-width:thin;">
<p>
{{element.text}} id {{element.id}}
</p>
</div>
</draggable>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
Method
new Vue({
el: "#app",
data: {
todos: [
{ text: "Text 1", id: "1" },
{ text: "Text 2", id: "2" },
{ text: "Text 3", id: "3"},
{ text: "Text 4", id: "4" }
]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
ANSWER
Answered 2021-Aug-31 at 20:48Try to add following css:
#first {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
text-align: center;
}
.list-group-item {
width: 100% !important;
}
QUESTION
sortablejs not working within SharePoint (webpart)
Asked 2022-Mar-13 at 08:42I have an application where items can be dragged and dropped between two lists. For this I use react-sortablejs (which uses sortablejs).
When I start my React application normally (in dev mode or deployed standalone) the drag and drop works as desired.
However, as soon as I embed the application in a SharePoint page (using webpart), the drag and drop feature starts to go haywire: the first drop works as desired, but all subsequent drops of the same item result in strange behavior, primarily duplication of the item.
After some debugging, it looks to me like the item remains in the old list and therefore an error occurs when the item is "pushed back" or a duplicate occurs because another item is pushed into the same list.
I therefore don't think that this is a problem of the library itself (also because I haven't found any similar error messages about this), but that it has something to do with SharePoint. I noticed in another context that classic context menus with absolute positioning also cause problems because event.pageX and event.pageY contain different values.
Anyway, at the moment I have no clue to get to the bottom of this problem, so I'm hoping that anyone might have had similar experiences before. Maybe this ticket will help someone else who runs into similar problems in the future.
ANSWER
Answered 2022-Mar-13 at 08:42My problem went away after setting forceFallack to true
QUESTION
NPM - why do I get EBADEGINE errors while I meet versions requirements installing reactjs dependancies on docker (buster)?
Asked 2022-Jan-26 at 14:08Trying to run this on docker, but I get EBADENGINE unsupported engine warning (and subsquent build fail, which I assume are related at least somewhat).
Docker command (from cloned project root with package.json file):
$ docker build --force-rm -t crmui:dev .
....
Step 6/9 : RUN npm install --legacy-peer-deps
---> Running in 34978d87b4eb
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@casl/react@2.1.1',
npm WARN EBADENGINE required: { npm: '^6.0.0' },
npm WARN EBADENGINE current: { node: 'v17.3.0', npm: '8.3.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'availity-reactstrap-validation-safe@2.6.1',
npm WARN EBADENGINE required: { node: '>= 5.0.0', npm: '^3.0.0' },
npm WARN EBADENGINE current: { node: 'v17.3.0', npm: '8.3.0' }
npm WARN EBADENGINE }
npm is above the required version, and so is node.
The Dockerfile:
FROM node:17.3-buster
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
matter of preference
RUN npm install react-app-rewired -g
RUN npm install --legacy-peer-deps
# add app. the chmod avoids a user issue with docker & mkdir .chache; not a production-ready fix
COPY . ./
RUN mkdir node_modules/.cache && chmod -R 777 node_modules/.cache
# start app
CMD ["npm", "start"]
The package.json file:
{
"name": "vuexy-react-admin-dashboard",
"version": "1.0.0",
"private": true,
"dependencies": {
"@casl/ability": "5.2.2",
"@casl/react": "2.1.1",
"@fullcalendar/core": "5.7.2",
"@fullcalendar/daygrid": "5.7.2",
"@fullcalendar/interaction": "5.7.2",
"@fullcalendar/list": "5.7.2",
"@fullcalendar/react": "5.7.0",
"@fullcalendar/timegrid": "5.7.2",
"@fullcalendar/timeline": "5.7.2",
"@hookform/resolvers": "1.3.4",
"@uppy/react": "1.10.8",
"animate.css": "4.1.1",
"apexcharts": "^3.29.0",
"availity-reactstrap-validation-safe": "2.6.1",
"axios": "^0.24.0",
"axios-mock-adapter": "1.19.0",
"babel-plugin-react-intl": "5.1.18",
"bootstrap": "4.5.2",
"bs-stepper": "1.7.0",
"chart.js": "2.9.4",
"chroma-js": "2.1.0",
"classnames": "2.2.6",
"cleave.js": "1.6.0",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"file-saver": "2.0.2",
"flatpickr": "4.6.3",
"history": "5.0.0",
"html-to-draftjs": "1.5.0",
"intl-messageformat": "7.8.4",
"jquery": "3.5.1",
"jsonwebtoken": "8.5.1",
"leaflet": "1.6.0",
"moment": "2.29.1",
"nouislider": "14.6.2",
"nouislider-react": "3.3.8",
"postcss-rtl": "1.5.0",
"prismjs": "^1.25.0",
"prop-types": "15.7.2",
"react": "17.0.1",
"react-apexcharts": "1.3.6",
"react-chartjs-2": "2.9.0",
"react-contexify": "5.0.0",
"react-copy-to-clipboard": "5.0.2",
"react-country-flag": "2.0.1",
"react-data-table-component": "6.11.2",
"react-dom": "17.0.1",
"react-draft-wysiwyg": "^1.14.7",
"react-feather": "~2.0.3",
"react-flatpickr": "3.9.1",
"react-hook-form": "6.15.1",
"react-intl": "3.11.0",
"react-leaflet": "3.1.0",
"react-paginate": "7.0.0",
"react-perfect-scrollbar": "1.5.5",
"react-player": "2.6.2",
"react-rating": "2.0.5",
"react-redux": "7.2.2",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.2",
"react-scroll-up": "1.3.7",
"react-select": "4.0.2",
"react-shepherd": "3.3.0",
"react-slidedown": "2.4.5",
"react-sortablejs": "6.0.0",
"react-toastify": "7.0.3",
"reactstrap": "8.6.0",
"recharts": "2.0.4",
"redux": "4.0.5",
"redux-debounced": "0.5.0",
"redux-thunk": "2.3.0",
"sass": "1.26.8",
"screenfull": "5.0.2",
"sortablejs": "1.12.0",
"styled-components": "5.1.1",
"sweetalert2": "10.14.0",
"sweetalert2-react-content": "3.0.1",
"swiper": "6.0.4",
"uppy": "1.21.2",
"webpack": "4.43.0",
"wnumb": "1.2.0",
"xlsx": "^0.17.3",
"yarn": "1.21.1",
"yup": "0.32.8"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject",
"lint": "eslint src/**/*.js src/**/*.jsx",
"lint:fix": "eslint src/**/*.js --fix"
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"@types/sortablejs": "1.10.6",
"eslint": "7.8.0",
"eslint-plugin-import": "2.22.0",
"eslint-plugin-react": "7.20.6",
"node-sass": "^4.13.1",
"react-app-rewire-aliases": "^0.2.0",
"react-app-rewire-postcss": "^3.0.2",
"react-app-rewire-sass-rule": "^2.1.1",
"react-app-rewired": "^2.1.6",
"sass-loader": "^8.0.2"
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
]
}
This fails with: <... more warning....>
npm WARN deprecated @formatjs/intl-unified-numberformat@3.3.7: We have renamed the package to @formatjs/intl-numberformat
npm ERR! code 1
npm ERR! path /app/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/local/bin/node /app/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! make: Entering directory '/app/node_modules/node-sass/build'
npm ERR! g++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-D__STDC_FORMAT_MACROS' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '
<.... lots of similar stuff ... >
8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-D__STDC_FORMAT_MACROS' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DBUILDING_NODE_EXTENSION' -I/root/.node-gyp/17.3.0/include/node -I/root/.node-gyp/17.3.0/src -I/root/.node-gyp/17.3.0/deps/openssl/config -I/root/.node-gyp/17.3.0/deps/openssl/openssl/include -I/root/.node-gyp/17.3.0/deps/uv/include -I/root/.node-gyp/17.3.0/deps/zlib -I/root/.node-gyp/17.3.0/deps/v8/include -I../../nan -I../src/libsass/include -fPIC -pthread -Wall -Wextra -Wno-unused-parameter -m64 -O3 -fno-omit-frame-pointer -fno-rtti -fno-exceptions -std=gnu++17 -std=c++0x -MMD -MF ./Release/.deps/Release/obj.target/binding/src/binding.o.d.raw -c -o Release/obj.target/binding/src/binding.o ../src/binding.cpp
npm ERR! make: Leaving directory '/app/node_modules/node-sass/build'
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli '/usr/local/bin/node',
npm ERR! gyp verb cli '/app/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@17.3.0 | linux | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` succeeded python2 /usr/bin/python2
npm ERR! gyp verb check python version `/usr/bin/python2 -c "import sys; print "2.7.16
npm ERR! gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 17.3.0
npm ERR! gyp verb command install [ '17.3.0' ]
npm ERR! gyp verb install input version string "17.3.0"
npm ERR! gyp verb install installing version: 17.3.0
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version not already installed, continuing with install 17.3.0
npm ERR! gyp verb ensuring nodedir is created /root/.node-gyp/17.3.0
npm ERR! gyp verb created nodedir /root/.node-gyp
npm ERR! gyp http GET https://nodejs.org/download/release/v17.3.0/node-v17.3.0-headers.tar.gz
npm ERR! gyp http 200 https://nodejs.org/download/release/v17.3.0/node-v17.3.0-headers.tar.gz
npm ERR! gyp verb extracted file from tarball include/node/common.gypi
npm ERR! gyp verb extracted file from tarball include/node/config.gypi
<.... bunch for tarball errors ...>
pm ERR! gyp verb extracted file from tarball include/node/openssl/x509_no-asm.h
npm ERR! gyp verb extracted file from tarball include/node/zconf.h
npm ERR! gyp verb extracted file from tarball include/node/zlib.h
npm ERR! gyp verb tarball done parsing tarball
npm ERR! gyp verb check download content checksum, need to download `SHASUMS256.txt`...
npm ERR! gyp verb checksum url https://nodejs.org/download/release/v17.3.0/SHASUMS256.txt
npm ERR! gyp http GET https://nodejs.org/download/release/v17.3.0/SHASUMS256.txt
npm ERR! gyp http 200 https://nodejs.org/download/release/v17.3.0/SHASUMS256.txt
npm ERR! gyp verb checksum data {"node-v17.3.0-aix-ppc64.tar.gz":"5300264598a643445378a51bf1d62242281ae602045934bf6fcacf6f6ba3abda","node-v17.3.0-darwin-arm64.tar.gz":"b504ba3628337f7ac2c67d04bf30e56082942345aa1a50e0e464f51df6662ff3","node-v17.3.0-darwin-arm64.tar.xz":"8f19364dd1159ce4ae8cfb3414508ee9092b8d3cf428b13c0d2aec7ac406e1ba","node-v17.3.0-darwin-x64.tar.gz":"d4fa7d01c3b08cecdb71eee1da27a5e0e2d31bd25ad3bee1807df95811c2ce3f","node-v17.3.0-darwin-x64.tar.xz":"eb231bd4ad5950ccb5572fc4bb099266a634d6788559424976c8e9fb7fc320d6","node-v17.3.0-headers.tar.gz":"9cb2ac1e9a3e7df31269699e02dcc55069cd1f27fd0417650fb95acf8f3e7a22","node-v17.3.0-headers.tar.xz":"b5f1f5bdb2405e626448100aa50879f859288eee4651a496270fc4c4486b28fc","node-v17.3.0-linux-arm64.tar.gz":"6f236f47fc68fa535bd0f769d9e12767a6b5251875aea2632c227ca55d1ab7ae","node-v17.3.0-linux-arm64.tar.xz":"ad298da8144635a7ae470b973bddca4270e5a3e5cb919991c367b6e4ea5aa5a9","node-v17.3.0-linux-armv7l.tar.gz":"f92c17fc61af2a47a9b9e42b8e795abfbe18a1fa4e51de52d7362cae74ad487d","node-v17.3.0-linux-armv7l.tar.xz":"660e89b1cf388493a9c00e7720b4bfafa903db12d00481ddae9edf22e950b728","node-v17.3.0-linux-ppc64le.tar.gz":"7161e93479e3df1b18f2fb75b36ef75fd1cbdf2cc610262f510531ef731d0050","node-v17.3.0-linux-ppc64le.tar.xz":"810b3e203bc1d450e543f7c945a136acb7e2f16152839e6f8cf87b4f1ee8c3bb","node-v17.3.0-linux-s390x.tar.gz":"de1b0007f4d46e786f2583b7312e3262820e6535bc16b45da57de65a8472e824","node-v17.3.0-linux-s390x.tar.xz":"10f1da9e679232797e273ca15c6205b86b438eccfceb56f41951af63239cdf76","node-v17.3.0-linux-x64.tar.gz":"479fb0b4b6405fb7240376187e2823cf384635a4998bdbaddc3ea826b63c8c74","node-v17.3.0-linux-x64.tar.xz":"b54b4b7d0732f2dbad9c13f5b909411cde3cc9989bfdeb7557c400e4c93fe6ee","node-v17.3.0.pkg":"f960b616eace93d171a0d15e67c62116aa3c6100eb6266046774cc478487b9d9","node-v17.3.0.tar.gz":"2914a3f0dc02ec6046f81ff12e1fb1fcf2b346b6b50e2c944440fdd165efd3ff","node-v17.3.0.tar.xz":"e4e4c4e64854698f2590144a177bcc7e7c0befb52020288fdae5c0da0d015d03","node-v17.3.0-win-x64.7z":"8876df18c5327e495f6dc4e576c66885c85ec77438386921bc93589788178b18","node-v17.3.0-win-x64.zip":"a7a1d01ca796aa48f3690f1637bf4677dab81cd8608c082e325ebf575d5f832f","node-v17.3.0-win-x86.7z":"62c94ff583c9e2b267f839bd24893bb2a3ee090547658be003e0ba11047d593b","node-v17.3.0-win-x86.zip":"8e766aca83e5a7d01faeb57121f4af4963726b0e8a3f70ff3eeb51493c61ba96","node-v17.3.0-x64.msi":"a2480ad99c7d02a67c71cb462adbb4dad0a2c3884c7fea2ac2da543be18661a6","node-v17.3.0-x86.msi":"5b3b8acff16964add6b24c408060430edf7c2060408568e4286f7dc758cf8cb6","win-x64/node.exe":"9f0b2a11ed3a956a773f4072e40c05645445cbd100d71c30737656159f0e5e42","win-x64/node.lib":"281c2c43920b76ee23c32f110917b50b92977b15842dceada2ed84d7a29e8d34","win-x64/node_pdb.7z":"484ab403a7743cf8e2d04e8e1cc0e1b419e48b601402e01c248a386549c847d8","win-x64/node_pdb.zip":"074124c6ccbc5ceed67c0f7a4091d2e72fb236a6d1a27cb7aaca950e4215ccdc","win-x86/node.exe":"1e4d4bdc1855e032af72080e3390a19d637a85058b52f94d7918b33f0c8ad0db","win-x86/node.lib":"9d79fc5845cf0e8602ea59057639cf2b3731058eb9ada1b8c3bd52638732f4d7","win-x86/node_pdb.7z":"59680a579e30520af180b9ea543ab854b485e287520b7c7b01abef3b1085eb8f","win-x86/node_pdb.zip":"5b5a3f76e247c52c005757935f8360a7d4766134ff7fb858c858567b5785fee3"}
npm ERR! gyp verb download contents checksum {"node-v17.3.0-headers.tar.gz":"9cb2ac1e9a3e7df31269699e02dcc55069cd1f27fd0417650fb95acf8f3e7a22"}
npm ERR! gyp verb validating download checksum for node-v17.3.0-headers.tar.gz (9cb2ac1e9a3e7df31269699e02dcc55069cd1f27fd0417650fb95acf8f3e7a22 == 9cb2ac1e9a3e7df31269699e02dcc55069cd1f27fd0417650fb95acf8f3e7a22)
npm ERR! gyp verb get node dir target node version installed: 17.3.0
npm ERR! gyp verb build dir attempting to create "build" dir: /app/node_modules/node-sass/build
npm ERR! gyp verb build dir "build" dir needed to be created? /app/node_modules/node-sass/build
npm ERR! gyp verb build/config.gypi creating config file
npm ERR! gyp verb build/config.gypi writing out config file: /app/node_modules/node-sass/build/config.gypi
npm ERR! (node:78) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp verb config.gypi checking for gypi file: /app/node_modules/node-sass/config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: /app/node_modules/node-sass/common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "make"
npm ERR! gyp info spawn /usr/bin/python2
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/app/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/app/node_modules/node-sass/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/app/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/root/.node-gyp/17.3.0/include/node/common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=/root/.node-gyp/17.3.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/app/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/root/.node-gyp/17.3.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/app/node_modules/node-sass',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp verb command build []
npm ERR! gyp verb build type Release
npm ERR! gyp verb architecture x64
npm ERR! gyp verb node dev dir /root/.node-gyp/17.3.0
npm ERR! gyp verb `which` succeeded for `make` /usr/bin/make
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'V=1', 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! ../src/libsass/src/cencode.c: In function 'base64_encode_block':
npm ERR! ../src/libsass/src/cencode.c:48:11: warning: this statement may fall through [-Wimplicit-fallthrough=]
npm ERR! result = (fragment & 0x003) << 4;
npm ERR! ~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/cencode.c:52:2: note: here
npm ERR! case step_B:
npm ERR! ^~~~
npm ERR! ../src/libsass/src/cencode.c:62:11: warning: this statement may fall through [-Wimplicit-fallthrough=]
npm ERR! result = (fragment & 0x00f) << 2;
npm ERR! ~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/cencode.c:66:2: note: here
npm ERR! case step_C:
npm ERR! ^~~~
npm ERR! ../src/libsass/src/functions.cpp: In function 'void Sass::Functions::handle_utf8_error(const Sass::ParserState&, Sass::Backtraces)':
npm ERR! ../src/libsass/src/functions.cpp:110:20: warning: catching polymorphic type 'class utf8::invalid_code_point' by value [-Wcatch-value=]
npm ERR! catch (utf8::invalid_code_point) {
npm ERR! ^~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/functions.cpp:114:20: warning: catching polymorphic type 'class utf8::not_enough_room' by value [-Wcatch-value=]
npm ERR! catch (utf8::not_enough_room) {
npm ERR! ^~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/functions.cpp:118:20: warning: catching polymorphic type 'class utf8::invalid_utf8' by value [-Wcatch-value=]
npm ERR! catch (utf8::invalid_utf8) {
npm ERR! ^~~~~~~~~~~~
npm ERR! ../src/libsass/src/json.cpp: In function 'char* json_encode_string(const char*)':
npm ERR! ../src/libsass/src/json.cpp:405:15: warning: catching polymorphic type 'class std::exception' by value [-Wcatch-value=]
npm ERR! catch (std::exception) {
npm ERR! ^~~~~~~~~
npm ERR! ../src/libsass/src/json.cpp: In function 'char* json_stringify(const JsonNode*, const char*)':
npm ERR! ../src/libsass/src/json.cpp:424:15: warning: catching polymorphic type 'class std::exception' by value [-Wcatch-value=]
npm ERR! catch (std::exception) {
npm ERR! ^~~~~~~~~
npm ERR! In file included from /root/.node-gyp/17.3.0/include/node/v8-local-handle.h:12,
npm ERR! from /root/.node-gyp/17.3.0/include/node/v8-array-buffer.h:12,
npm ERR! from /root/.node-gyp/17.3.0/include/node/v8.h:25,
npm ERR! from /root/.node-gyp/17.3.0/include/node/node.h:63,
npm ERR! from ../../nan/nan.h:58,
npm ERR! from ../src/binding.cpp:1:
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h: In function 'void v8::internal::PerformCastCheck(T*)':
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:38: error: 'remove_cv_t' is not a member of 'std'
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^~~~~~~~~~~
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:38: note: suggested alternative: 'remove_cv'
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^~~~~~~~~~~
npm ERR! remove_cv
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:38: error: 'remove_cv_t' is not a member of 'std'
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:38: note: suggested alternative: 'remove_cv'
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^~~~~~~~~~~
npm ERR! remove_cv
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:50: error: template argument 2 is invalid
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:63: error: '::Perform' has not been declared
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^~~~~~~
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:63: note: suggested alternative: 'herror'
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^~~~~~~
npm ERR! herror
npm ERR! ../src/binding.cpp: In function 'Nan::NAN_METHOD_RETURN_TYPE render(Nan::NAN_METHOD_ARGS_TYPE)':
npm ERR! ../src/binding.cpp:284:98: warning: cast between incompatible function types from 'void (*)(uv_work_t*)' {aka 'void (*)(uv_work_s*)'} to 'uv_after_work_cb' {aka 'void (*)(uv_work_s*, int)'} [-Wcast-function-type]
npm ERR! int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
npm ERR! ^~~~~~~~~~~~
npm ERR! ../src/binding.cpp: In function 'Nan::NAN_METHOD_RETURN_TYPE render_file(Nan::NAN_METHOD_ARGS_TYPE)':
npm ERR! ../src/binding.cpp:320:98: warning: cast between incompatible function types from 'void (*)(uv_work_t*)' {aka 'void (*)(uv_work_s*)'} to 'uv_after_work_cb' {aka 'void (*)(uv_work_s*, int)'} [-Wcast-function-type]
npm ERR! int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
npm ERR! ^~~~~~~~~~~~
npm ERR! In file included from ../../nan/nan.h:58,
npm ERR! from ../src/binding.cpp:1:
npm ERR! ../src/binding.cpp: At global scope:
npm ERR! /root/.node-gyp/17.3.0/include/node/node.h:843:43: warning: cast between incompatible function types from 'void (*)(Nan::ADDON_REGISTER_FUNCTION_ARGS_TYPE)' {aka 'void (*)(v8::Local<v8::Object>)'} to 'node::addon_register_func' {aka 'void (*)(v8::Local<v8::Object>, v8::Local<v8::Value>, void*)'} [-Wcast-function-type]
npm ERR! (node::addon_register_func) (regfunc), \
npm ERR! ^
npm ERR! /root/.node-gyp/17.3.0/include/node/node.h:877:3: note: in expansion of macro 'NODE_MODULE_X'
npm ERR! NODE_MODULE_X(modname, regfunc, NULL, 0) // NOLINT (readability/null_usage)
npm ERR! ^~~~~~~~~~~~~
npm ERR! ../src/binding.cpp:358:1: note: in expansion of macro 'NODE_MODULE'
npm ERR! NODE_MODULE(binding, RegisterModule);
npm ERR! ^~~~~~~~~~~
npm ERR! make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack at ChildProcess.onExit (/app/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Linux 5.10.84-1-MANJARO
npm ERR! gyp ERR! command "/usr/local/bin/node" "/app/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /app/node_modules/node-sass
npm ERR! gyp ERR! node -v v17.3.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-01-09T19_05_59_458Z-debug-0.log
ANSWER
Answered 2022-Jan-26 at 14:08Okay that was dumb. But yes, to read those error message for other npm newbs out there:
npm WARN EBADENGINE package: '@casl/react@2.1.1',
npm WARN EBADENGINE required: { npm: '^6.0.0' },
npm WARN EBADENGINE current: { node: 'v17.3.0', npm: '8.3.0' }
This basically means that casl/react (whatever that does) accepts AT MOST npm 6.0.0, but I was running node 17.x with npm 8.x. It balked at that.
Because Docker is awesome, I could just do:
FROM node:14-buster
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY . ./
RUN mkdir node_modules/.cache && chmod -R 777 node_modules/.cache
# start app
CMD ["npm", "start"]
And then it ran fine.
QUESTION
NG_PERSISTENT_BUILD_CACHE=1 ng serve not working
Asked 2022-Jan-20 at 18:32I am trying to use the persistent build cache feature provided by angular but look like its not working for me, I am trying the below command
NG_PERSISTENT_BUILD_CACHE=1 ng serve
It always returns below error
'NG_PERSISTENT_BUILD_CACHE' is not recognized as an internal or external command,operable program or batch file.
I am using angular cli version 12.2.15. I am not sure what I am missing. Below is my packages.json file
"dependencies": {
"@agm/core": "^1.1.0",
"@angular-devkit/core": "^12.2.15",
"@angular/animations": "^12.2.15",
"@angular/common": "^12.2.15",
"@angular/compiler": "^12.2.15",
"@angular/core": "^12.2.15",
"@angular/forms": "^12.2.15",
"@angular/platform-browser": "^12.2.15",
"@angular/platform-browser-dynamic": "^12.2.15",
"@angular/platform-server": "^12.2.15",
"@angular/pwa": "^0.1100.2",
"@angular/router": "^12.2.15",
"@angular/service-worker": "^12.2.15",
"@auth0/angular-jwt": "5.0.2",
"@ng-bootstrap/ng-bootstrap": "^8.0.0",
"@nguniversal/module-map-ngfactory-loader": "^8.1.1",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@types/ckeditor": "^4.9.10",
"@types/hammerjs": "^2.0.36",
"@types/jest": "^26.0.15",
"@types/node": "^14.14.10",
"@types/papaparse": "^5.3.1",
"@webcomponents/shadydom": "^1.9.0",
"acorn": "^8.0.4",
"angular-chart.js": "^1.1.1",
"angular-file-uploader": "7.0.3",
"angular-mydatepicker": "^0.10.2",
"angular-ng-autocomplete": "^2.0.1",
"angular-split": "4.0.0",
"angular2-datetimepicker": "^1.1.1",
"angular2-text-mask": "9.0.0",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.5.3",
"ckeditor": "4.12.1",
"core-js": "^3.8.0",
"events": "^3.2.0",
"export-to-csv": "^0.2.1",
"first": "0.0.3",
"fullcalendar": "^4.0.0-alpha.4",
"fullcalendar-scheduler": "^4.0.0-alpha.4",
"hammerjs": "^2.0.8",
"highcharts": "^8.2.2",
"html2canvas": "^1.0.0-rc.7",
"jquery": "^3.5.1",
"jspdf": "^2.1.1",
"jw-angular-social-buttons": "^1.0.0",
"mdn-polyfills": "^5.20.0",
"moment-mini-ts": "^2.20.1",
"ng-multiselect-dropdown": "^0.2.10",
"ng2-ckeditor": "^1.2.9",
"ng2-date-picker": "11.0.0",
"ng2-pdf-viewer": "6.2.0",
"ng2-slim-loading-bar": "^4.0.0",
"ng4-loading-spinner": "^1.2.3",
"ng5-slider": "^1.2.6",
"ng9-password-strength-bar": "^1.0.0",
"ngx-bootstrap": "6.2.0",
"ngx-color-picker": "^10.1.0",
"ngx-countdown": "11.0.0",
"ngx-device-detector": "^1.5.2",
"ngx-drag-drop": "^2.0.0",
"ngx-fullcalendar": "^5.0.0-alpha.1",
"ngx-hm-sortable": "^1.0.0",
"ngx-img-cropper": "^10.0.0",
"ngx-infinite-scroll": "^10.0.0",
"ngx-mask": "11.1.4",
"ngx-mega-simple-drag-drop-list": "^1.0.8",
"ngx-order-pipe": "^2.1.1",
"ngx-papaparse": "^5.0.0",
"ngx-print": "^1.2.0-beta.5",
"ngx-select-dropdown": "^1.4.4",
"ngx-sortable": "^1.0.3",
"ngx-sortablejs": "^10.0.0",
"ngx-toastr": "^13.1.0",
"papaparse": "^5.3.0",
"pdfjs-dist": "2.3.200",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.3",
"signature_pad": "^3.0.0-beta.4",
"sortablejs": "^1.12.0",
"ts-deferred": "^1.0.4",
"tslib": "^2.2.0",
"webpack-bundle-analyzer": "^4.1.0",
"xlsx": "^0.17.4",
"zone.js": "~0.11.4",
"zxcvbn": "^4.4.2"
},
here is a snapshot when I am checking my package version using ng v command
ANSWER
Answered 2022-Jan-20 at 18:32You seem to be using Windows cmd to run the command, and hence you are getting the error.
The command:
NG_PERSISTENT_BUILD_CACHE=1 ng serve
is for Unix-like systems and won't work within Windows cmd.
You can use any of the below methods to make it work:
- First set environment variable and then run the command
// 1st command to set the environment variable
set NG_PERSISTENT_BUILD_CACHE=1
// 2nd command
ng serve
- Run both commands within single step
set NG_PERSISTENT_BUILD_CACHE=1&&ng serve
- Add the below command within package.json scripts and then run
npm start
"scripts": {
"start": "set NG_PERSISTENT_BUILD_CACHE=1&&ng serve",
...
}
PS: In all the above methods the environment variable value is set for the cmd session in which we run the command. If you want to set the environment variable globally, then that can be achieved by adding System variables within Environment Variables dialog. (System Properties -> Environment Variables -> System variables).
QUESTION
find input tag inside a html div and that div is stored in a javascript variable
Asked 2022-Jan-06 at 12:44I am creating fully flexible contact us form where user can drag and drop input elements. so in that case I am stuck in a problem
the html structure is:
<div class="ns_field_box">
<input type="text" data-name="checkbox_label" class="nsdummy-label" value="CheckBox">
<span class="nscheckbox"></span> <input type="text" data-name="checkbox_desc" value="Add checkbox description">
<div class="nshandle">
<span class="dashicons dashicons-move"></span>
<span class="dashicons dashicons-trash nsremove_feild"></span>
</div>
</div>
I stored <div class="ns_field_box"> this element in a javascript variable and want to find and store all input elements inside this variable
javascript code :
$(document).on('click', '#submit_form', function () {
var allelems = $('#B .ns_field_box');
for (i = 0; i < allelems.length; i++) {
var elem = allelems[i];
console.log(elem.children('input')); // at this line browser console says
// 'elem.children is not a function'
}
})
Required files are already set in a proper order
// jquery file
<script src='https://siga.local/nitin/plugins/wp-content/plugins/ns-contact-form/inc/assets/js/jquery.min.js?ver=3.6.0' id='ns_cf_jquery-js'></script>
<script src='https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js?ver=3.6.0' id='ns_cf_sortablejs-js'></script>
<script src='https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js?ver=1.14.0' id='ns_cf_jquerysortablejs-js'></script>
// main javascript file where the code I wrote
<script src='https://siga.local/nitin/plugins/wp-content/plugins/ns-contact-form/inc/assets/js/main.js?ver=1.0.0' id='ns_cf_js-js'></script>
and the browsers javascript console says
main.js?ver=1.0.0:34 Uncaught TypeError:
elem.children is not a function
at HTMLButtonElement.<anonymous> (main.js?ver=1.0.0:34)
at HTMLDocument.dispatch (jquery.min.js?ver=3.6.0:2)
at HTMLDocument.v.handle (jquery.min.js?ver=3.6.0:2)
Thank you to all who help me in advance
ANSWER
Answered 2022-Jan-06 at 12:44 $(document).on('click', '#submit_form', function () {
var allelems = $('#B .ns_field_box');
for (i = 0; i < allelems.length; i++) {
var elem = $(allelems[i]);
console.log(elem.children('input'));
}
})
QUESTION
Updating position of SortableJS + Rails Form
Asked 2021-Dec-01 at 23:30I've seen a lot of tutorials around using Rails + SortableJS and updating the position of an object via Ajax - however, I'm using SortableJS inside a Rails form with hidden fields that contain the "position" attribute.
How can I update all of the elements of a Sortable group after one has been moved?
// javascript/controllers/drag_controller.js
connect() {
this.sortable = Sortable.create(this.element, {
animation: 150,
onEnd: this.end.bind(this)
})
}
end(event) {
// Update "position" field of each sortable object
// event.newIndex works as the position of the newly moved item
}
Here is the nested form item:
// views/item/_form.html.erb
<%= content_tag :div, class: "nested-fields", data: { new_record: form.object.new_record? } do %>
<div class="form-group">
<%= form.label :name %>
<%= form.text_field :name %>
</div>
<%= form.hidden_field :position %>
<% end %>
The form currently works perfectly, aside from the position field. I'm also using acts_as_list which automatically fills in the position on the back-end, but not for users who edit using the form.
ANSWER
Answered 2021-Dec-01 at 23:30In my experience, the gem act_as_list—which you are already using—does what you need: Automatically updating the records.
For instance, in irb, using a Message model and destroying one record:
irb(main):001:0> m = Message.find 11
Message Load (0.8ms) SELECT "messages".* FROM "messages" WHERE "messages"."id" = $1 LIMIT $2 [["id", 11], ["LIMIT", 1]]
=> #<Message id: 11, content: "e", created_at: "2021-11-30 14:30:37.896535000 +0000", updated_at: "2021-11-30 14:41:38.871285000 +0000", position: 8>
irb(main):002:0> m.destroy
TRANSACTION (0.4ms) BEGIN
Message Load (0.8ms) SELECT "messages".* FROM "messages" WHERE "messages"."id" = $1 LIMIT $2 [["id", 11], ["LIMIT", 1]]
Message Destroy (2.6ms) DELETE FROM "messages" WHERE "messages"."id" = $1 [["id", 11]]
Message Update All (3.0ms) UPDATE "messages" SET "position" = ("messages"."position" - 1), "updated_at" = '2021-12-01 18:43:34.628679' WHERE (1 = 1) AND ("messages"."position" > 8)
TRANSACTION (5.0ms) COMMIT
You can see the last action in the console is Update All, which will update the records by reducing the position attribute in 1.
QUESTION
React-component is not re-rendered when the store is changed, neither automatically nor even by force update
Asked 2021-Nov-04 at 01:39This functional component should display a sorted list with checkboxes at each item that change the values in the store.
For some reason it is not re-rendered when the store is changed. And without a re-renderer, it (and the whole application) works very crookedly and halfway. I suspect that this is because the store object remains the same, albeit with new content. But I don’t understand how to fix it. I have even inserted a force update to the checkbox handler, but for some reason it does not work too.
Component:
import React, { useState, useReducer } from 'react';
import { ReactSortable } from 'react-sortablejs';
import ListItem from '@mui/material/ListItem';
import Checkbox from '@mui/material/Checkbox';
import { connect } from 'react-redux';
import { setGameVisible, setGameInvisible } from '../store/actions/games';
interface IGamesListProps {
games: [];
setGameVisible: (id: string) => void;
setGameInvisible: (id: string) => void;
}
interface ItemType {
id: string;
name: string;
isVisible: boolean;
}
const GamesList: React.FunctionComponent<IGamesListProps> = ({games, setGameVisible, setGameInvisible}) => {
const [state, setState] = useState<ItemType[]>(games);
// eslint-disable-next-line
const [ignored, forceUpdate] = useReducer(x => x + 1, 0); // this way of force updating is taken from the official React documentation (but even it doesn't work!)
const onCheckboxChangeHandle = (id: string, isVisible: boolean) => {
isVisible ? setGameInvisible(id) : setGameVisible(id);
forceUpdate(); // doesn't work :(((
}
return (
<ReactSortable list={state} setList={setState} tag='ul'>
{state.map((item) => (
<ListItem
sx={{ maxWidth: '300px' }}
key={item.id}
secondaryAction={
<Checkbox
edge="end"
onChange={() => onCheckboxChangeHandle(item.id, item.isVisible)}
checked={item.isVisible}
/>
}
>
{item.name}
</ListItem>
))}
</ReactSortable>
);
};
export default connect(null, { setGameVisible, setGameInvisible })(GamesList);
Reducer:
import { SET_GAMES, SET_GAME_VISIBLE, SET_GAME_INVISIBLE } from '../actions/games';
export const initialState = {
games: [],
};
export default function games(state = initialState, action) {
switch(action.type) {
case SET_GAMES: {
for(let obj of action.payload.games) {
obj.isVisible = true;
}
return {
...state,
games: action.payload.games,
};
}
case SET_GAME_VISIBLE: {
for(let obj of state.games) {
if (obj.id === action.payload.id) {
obj.isVisible = true;
};
}
return {
...state,
};
}
case SET_GAME_INVISIBLE: {
for(let obj of state.games) {
if (obj.id === action.payload.id) {
obj.isVisible = false;
};
}
return {
...state,
};
}
default:
return state;
}
}
Thank you for any help!
ANSWER
Answered 2021-Nov-03 at 10:04- First of all, you don't pass the new game via
mapStateToPropsinto Component in a state change, and even you do,useStatewon't use new game prop value for non-first render. You must use useEffect and trigger changes of the game and set the to state locally.
At this point you must find the inner state redundant and you can remove it and totally rely on the redux state.
const mapStateToProp = (state) => ({
games: state.games // you may need to change the path
})
connect(mapStateToProp, { setGameVisible, setGameInvisible })(GamesList);
- Second, the reducer you made, changes the individual game item but not the games list itself. because it is nested and the reference check by default is done as strict equality reference check-in redux
state === state. This probably doesn't cause an issue because the outer state changes by the way, but I think it worth it to mention it.
for(let obj of action.payload.games) {
obj.isVisible = true; // mutating actions.payload.games[<item>]
}
return {
...state,
games: [...action.payload.games], // add immutability for re-redenr
};
// or use map
return {
...state,
games: action.payload.games.map(obj => ({...obj, isVisible:true})),
};
- Third, It's true your
forceUpdatewill cause the component to re-render, and you can test that by adding a console.log, but it won't repaint the whole subtree of your component including inner children if their props don't change that's because of performance issue. React try to update as efficiently as possible. Also you thekeyoptimization layer which prevent change if the order of items and id of them doesn't change
QUESTION
Vue draggable. Prevent drop on specific node and allow drop on specific node
Asked 2021-Oct-28 at 12:03<draggable
class="nodes-to-drag"
v-model="arrayToDrag"
group="people"
@start="drag = true"
@end="drag = false"
item-key="id"
>
<template #item="{ element }">
<p class="items-from-arrayToDrag">{{ element.name }}</p>
</template>
</draggable>
I use draggable for vue3 https://github.com/SortableJS/vue.draggable.next
I have array with items I want to drag
And 2 empty arrays which look the same as first one and have the same group name.
I need items with specific index in array be draggable only to the first column (first array) and with another index only to the second column (second array)? How to implement this? Is there something that I can use except group name (all items to drag are from the same group)
ANSWER
Answered 2021-Oct-26 at 14:01- You should wrap each your column in
draggable - Add
@changeevent listener on each column - In that event listener you can check whether that item must be processed or not: if the item is not suitable for that area you do nothing, otherwise you do something.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install sortablejs
Support
Find more information at:
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 650 million Knowledge Items
Find more librariesReuse Solution Kits and Libraries Curated by Popular Use Cases
Explore KitsSave this library and start creating your kit
Clone
HTTPS
https://github.com/SortableJS/sortablejs.git
CLI
gh repo clone SortableJS/sortablejs
SSH
git@github.com:SortableJS/sortablejs.git
Share this Page
See Similar Libraries in
Consider Popular Widget Libraries
- fullPage.js
by alvarotrigo
- react-beautiful-dnd
by atlassian
- Sortable
by SortableJS
- sortablejs
by SortableJS
- PhotoSwipe
by dimsemenov
See all Widget Libraries
Try Top Libraries by SortableJS
- Sortable
by SortableJS JavaScript
- Vue.Draggable
by SortableJS JavaScript
- vue.draggable.next
by SortableJS JavaScript
- react-sortablejs
by SortableJS TypeScript
- ngx-sortablejs
by SortableJS TypeScript
See all Libraries by this author
Compare Widget Libraries with Highest Support
- fullPage.js
by alvarotrigo
- react-beautiful-dnd
by atlassian
- dropzone
by enyo
- Vue.Draggable
by SortableJS
- notebook
by jupyter
See all Widget Libraries
Compare Widget Libraries with Highest Quality
- Fancy-Album-for-Android
by ingyesid
- circular_progress_bar
by ylyc
- TextChronometer
by romainpiel
- oxbow
by eugener
- android-left-locked-gallery
by TheLevelUp
See all Widget Libraries
Compare Widget Libraries with Highest Security
- Fancy-Album-for-Android
by ingyesid
- adapterviewflipper-widget
by sunphiz
- circular_progress_bar
by ylyc
- TextChronometer
by romainpiel
- drag-sort-listview
by bauerca
See all Widget Libraries
Compare Widget Libraries with Permissive License
- oxbow
by eugener
- HorizontalImageScroller-Android
by twotoasters
- android-times-square
by square
- DynamicGrid
by askerov
- lucene-interval-fields
by Cue
See all Widget Libraries
Compare Widget Libraries with Highest Reuse
- drf-url-filters
by manjitkumar
- akivymd
by quitegreensky
- django-header-filter
by sanjioh
- blighty
by P403n1x87
- tkmacosx
by Saadmairaj
See all Widget Libraries
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 650 million Knowledge Items
Find more librariesReuse Solution Kits and Libraries Curated by Popular Use Cases
Explore KitsSave this library and start creating your kit
Open Weaver – Develop Applications Faster with Open Source