long press and drag event in react.js

Question

I want to achieve below interaction using react. But I don't know what event to be used.

It's long press and drag. But I couldn't find any references or example or library to continue. I only manage to do a hover effect

https://fiddle.jshell.net/8wsr7xa1/

<div>
    {items.map((obj,i) =>  
        <div 
        key={i} 
        style={this.state.active === obj ? 
        {backgroundColor: 'yellow'} : {}} 
        onMouseEnter={this.onMouseEnter.bind(this, obj)}>
        {obj}
        </div>
     )}
</div>

Answer 1

From the view of the calendar you have, I'm assuming you have some type of conditions applied on the days that are greyed out (they shouldn't be selected). Crediting RoshanJossey, he created a react event listner for long press with an editable threshold https://codesandbox.io/s/uselongpress-oekx2?file=/src/useLongPress.js You should supply your calendar divs with this event (longClick) and have a state defaulted to false

const [isLongClickTriggered, setIsLongClickTriggered] = useState(false)

whenever the long click event is registered you should change this state to true. Afterwards you can have the calendar divs be selected on hover as your demo initiates as long as another click is not registered. The calendar divs that were selected can then be stored in a seperate state as well.

const longPressEvent = useLongPress(onLongPress, onClick, defaultOptions);
.
.
.
<div>
    {items.map((obj,i) =>  
        <div 
        key={i} 
        style={this.state.active === obj ? 
        {backgroundColor: 'yellow'} : {}} 
         {...longPressEvent}>
        {obj}
        </div>
     )}
</div>