React-sortable-hoc: onClick event listener

[AnoushSim]

Hi Clauderic! I am trying to add onClick on SortableElement , but it does not work. I understand why it does not work: when dragging, it has already being clicked , but when I don't want to drag, how can I fix onClick event!

[heineiuo]

@AnoushSim You can set distance to 1 (or another value greater then 0)

[MistrySaurabh]

@AnoushSim You can set distance to 1 (or another value greater then 0)

@heineiuo , please add some example , it is very helpful to understand .

[heineiuo]

distance: If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the pressDelay prop.

<SortableList
   distance={1}
/>

[MistrySaurabh]

created sample demo :

import React, { Component } from 'react'
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) => {

    return (<li style={StyleLi} onClick={()=>{handleClick(value)}}>{value}</li>)
});

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

function handleClick(value){
    console.log('value===',value);
    alert('value='+value);
 }


const StyleLi={
    padding:'8px',
    margin:'5px',
    border : '1px solid red'
}



class AppReactSortableHOC extends Component {
    constructor(){
        super();
        this.state = {
            items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
          };
    }



    onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
        items: arrayMove(this.state.items, oldIndex, newIndex),
    });
    };


  render() {
        return (<SortableList items={this.state.items} onSortEnd={this.onSortEnd} distance={1} lockAxis="y"></SortableList>);
  }
}

export default AppReactSortableHOC;

[AnoushSim]

Thanks, it works

[huykon]

@MistrySaurabh how to make handleClick inside class component to change another state of component?

[shmdt]

@huykon
I'm not sure about this solution is the best, but it works for me well:

import React, {Component} from "react";
import Sortable from "./UI/Sortable";

class Edit extends Component {
    state = {
        items: []
    };

    onDeleteHandler = (data) => {
        console.log(data);
    };

    render() {
        return (
            <Sortable
                onDeleteHandler={data => this.onDeleteHandler(data)}
                items={this.state.items}/>
        );
    }
}

export default Edit;

import React, {Component} from "react";
import {SortableContainer, SortableElement} from "react-sortable-hoc";
import arrayMove from 'array-move';

import "./SortableComponent.css";

const SortableItem = SortableElement(({value, sortIndex, onDeleteHandler}) => (
        <span className="sortableImageBlock">
            <span className="sortableImageDelete" onClick={() => onDeleteHandler(value)}>
                <i className="far fa-times-circle fa-2x"></i>
            </span>
            <span className="sortableImagePosition">
                {1 + sortIndex}
            </span>
            <img src={value.image}/>
        </span>
    )
);

const SortableList = SortableContainer(({items, onDeleteHandler}) => {
    return (
        <div>
            {items.map((value, index) => (
                <SortableItem
                    key={`item-${value.id}`}
                    index={index}
                    value={value}
                    sortIndex={index}
                    onDeleteHandler={onDeleteHandler}/>
            ))}
        </div>
    );
});

class Sortable extends Component {
    state = {
        items: this.props.items,
    };

    onDeleteHandler = (data) => {
        this.props.onDeleteHandler(data);
    };

    onSortEnd = ({oldIndex, newIndex}) => {
        this.setState(({items}) => ({
            items: arrayMove(items, oldIndex, newIndex),
        }));
    };

    render() {
        return (
            <div>
                <SortableList
                    axis="xy"
                    items={this.state.items}
                    distance={1}
                    onSortEnd={this.onSortEnd}
                    onDeleteHandler={this.onDeleteHandler}/>
            </div>
        );
    }
}

export default Sortable;

[jedierikb]

Sometimes, with a quick click and drag, distance={1} or even '10` my elements are moving before they get a mouseDown event. Suggestions?