We Keep Coding

React : SortableJS: Exclude some last elements from sorting

I have a list something similar to this in React
<div id="list">
<Item data-id="1">
<Item data-id="2">
<Item data-id="3">
<Item data-id="4">
<Item data-id="5">
</div>
I am using sortablejs npm library for sorting.
Now, I want to exclude the last 2 elements from sorting,
Below is the function I use for sorting
import Sortable from 'sortablejs';
let list = document.getElementById('list');
Sortable.create(list, {
ghostClass: 'ghost',
store : {
set: (sortable) => {
// logic to store new order in DB
sortable.destroy();
}
}
});
Expected Result:
Last 2 items should become non-draggable
also, first 3 items should not be able to go below them
How can I achieve that?
Solution for a similar problem is at:
How to exclude an element from being dragged in sortable list?
I want equivalent of below mentioned code in React:
$(function() {
$('.sortable').sortable();
$('.sortable').disableSelection();
$('.sortable').sortable({ cancel: '.note' });
});​
$('.sortable').sortable({
items : ':not(.note)'
});

maybe you can use the "filter" config option?
var sortable = new Sortable(el, {
// variables
group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
sort: true, // sorting inside list
delay: 0, // time in milliseconds to define when the sorting should start
delayOnTouchOnly: false, // only delay if user is using touch
touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
disabled: false, // Disables the sortable if set to true.
store: null, // #see Store
animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
handle: ".my-handle", // Drag handle selector within list items
filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
draggable: ".item", // Specifies which items inside the element should be draggable
dataIdAttr: "data-id",
ghostClass: "sortable-ghost", // Class name for the drop placeholder
chosenClass: "sortable-chosen", // Class name for the chosen item
dragClass: "sortable-drag", // Class name for the dragging item
swapThreshold: 1, // Threshold of the swap zone
invertSwap: false, // Will always use inverted swap zone if set to true
invertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default)
direction: "horizontal", // Direction of Sortable (will be detected automatically if not given)
forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in
fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.
dragoverBubble: false,
removeCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding it
emptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into it

Jquery with mouseover that works only on hover

i'm having some difficulty with the jquery mouseover.
I simply want to have the distortion effect happen when the mouse hovers over the image, and not when the mouse leaves. I am using mgGlitch for the effect and using jquery for the hover. I appreciate the help!
JQUERY
$(".glitch-img").hover(function() {
$( ".glitch-img" ).mgGlitch({
// set 'true' to stop the plugin
destroy : false,
// set 'false' to stop glitching
glitch: true,
// set 'false' to stop scaling
scale: true,
// set 'false' to stop glitch blending
blend : true,
// select blend mode type
blendModeType : 'hue',
// set min time for glitch 1 elem
glitch1TimeMin : 200,
// set max time for glitch 1 elem
glitch1TimeMax : 400,
// set min time for glitch 2 elem
glitch2TimeMin : 10,
// set max time for glitch 2 elem
glitch2TimeMax : 100,
}),
// .mouseout(function() {
// $(".glitch-img").myGlitch({
// // set 'true' to stop the plugin
// destroy : false,
// // set 'false' to stop glitching
// glitch: false,
// // set 'false' to stop scaling
// scale: false,
// // set 'false' to stop glitch blending
// blend : false,
// })
});

From the JQuery Docs:
The .hover() method binds handlers for both mouseenter and mouseleave events.
What you want to do instead is bind the event to the mouseover() function. Reference

Chart.js bar chart: show tooltip on label hover

I'm using Chart.js library to draw a bar chart and I want to show tooltip not only on bar hover, but also on x-axis label hover for that bar. I found onHover method for configuration, but it only lets me access the array of currently hovered bars, which isn't useful.
So, how can I access mouse event and maybe take position from there to compare it against bar labels positions? Or there is another way to do it?
My current configuration:
const countryChartOptions = {
hover: {
onHover: this.onChartHover,
},
};
const onHover = (activeElements) => {
console.log(activeElements);
};
It only prints out hovered bars data, but I'm stuck to figure out how to extend it for behavior I need.

What about :
options: {
tooltips: {
// Add this..
intersect: false
}
}

It works for me
options: {
tooltips:{
intersect : false,
mode:'index'
}
}

Is it possible to programatically trigger click/drag events in order to start a carousel moving

I have a requirement to create a dragable free-scrolling carousel, which I can do with the likes of http://flickity.metafizzy.co/ or http://idangero.us/swiper/. However neither of these allow me to specify an initial movement. Is it possible to simulate a click-drag on these carousels to 'give them a spin'?
Something like:
$('.home-map-wrapper').trigger('mousedown').trigger('mousemove', { clientX: 0, clientY: 0 }).trigger('mousemove', { clientX: 10, clientY: 0 });
Update 1
I've created a fiddle with Flickety to demonstrate. How do I give this an initial movement?
https://jsfiddle.net/sprintstar/b34w9uec/
Update 2
I want it to move initially like you've grabbed it and given it a gentle spin. But I don't want it to auto advance, like with 'autoPlay'. Unfortunately Flickerty offers no such configuration.

You do not have to use events to launch your carousel using flickity,
You can simply:
Retrieve your Flickity instance
Specify a velocity for your carousel
Specify that you are in freeScrolling mode (and not scrolling toward a specific position)
Launch animation
Code
function initFlickety() {
var flickityElement = $('.home-map-wrapper').flickity({
freeScroll: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
freeScrollFriction: 0.00
});
var flickity = flickityElement.data("flickity"); // [1]
flickity.velocity = -1; // [2]
flickity.isFreeScrolling = true; // [3]
flickity.startAnimation(); // [4]
}
Fiddle
https://jsfiddle.net/b34w9uec/6/

If I understood correctly you want to have an initial movement on load.
I have tried setting autoPlay to a specific value on plugin initialization like this:
$('.home-map-wrapper').flickity({
autoPlay: 1000,
freeScroll: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
freeScrollFriction: 0.00
});
Check this Fiddle

disable panning on map with mouse

I have discovered how to remove the controls for panning and zooming. I also found the property to stop zooming in on mouse clicks. How can I prevent the user from panning the map with the mouse?

You should set map.dragMap = false;

Here is an example of map instantiation expanded with all options related to the functionality mentioned in the question, both the ones already found and the one OP asked for. The option that answers the question is "dragMap": false:
var map = AmCharts.makeChart("chartdiv", {
"type": "map",
"theme": "light",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true
},
"dragMap": false, // disables map dragging/panning
"zoomOnDoubleClick": false, // disables zoom on double click
"zoomControl": {
"zoomControlEnabled": false, // disables +/- zoom control
"panControlEnabled": false // disables pan controls (default)
},
"areasSettings": {
"autoZoom": false, // disables zoom when click on area
"selectable": true // determines whether an area is selectable - i.e. clicking on an area/country changes its color
}
});