tom-s / react-drag-sortable Goto Github PK

Are you planning to add support for drag&drop between 2 lists?

I have 3 data in my list, and my expectation is the first item is for adding item to the list
but, from existing list i have, i can move to position 1. which is i need that is always in position 1

Great job! I love the examples and configurability.

Do you have plans to add a build step? We exclude node_modules when running Babel, so I get a syntax error when trying to import and use the module.

Hi,

when input field is inside sortable area after each keypress, input focuses out

In draggable class when I am trying to override float to none instead of left (which is set by default in library) it does not work. And then when I try to do it with !important it gives me some rank error

It is a small issue but never worked on something like this. Could you please tell me how to make it work with Float : none

It looks like you're referencing lodash directly via _.bind, _.map and _.union. I was getting undefined errors on the console, changed 5-6 spots to reference _lodash. instead, and it worked.

Hi. Cool library. I have an issue with clickable elements inside a draggable container. When I click on that element cursor changes to draggable cursor, and stays that way until I click on draggable element again or start and stop drag.
Is there a way to stop this behavior?

See title.

When I send id as props in items list, drag-drop not working.
items list like this:
items={[ { content: (<div>test1</div>), id: 1 }, { content: (<div>test2</div>), id: 2 }, { content: (<div>test3</div>), id: 3 }, { content: (<div>test4</div>), id: 4 }, ]}
Can anyone help?

First, thank you for this helpful component! It does exactly what I need it to do, given the project I'm working on. The only issue in my build is a single pixel that is causing a flicker. This happens when you first start dragging the item, and only lasts for a single pixel. It seems that once the item is dragged, it applies the "dragged" class, however it also applies an inline style of position:static; display:none; transform:none for the first pixel. Any drag beyond the first pixel the correct styles are applied: position:absolute; display:block; transform:translate(Xpx Ypx); z-index:10; left:Xpx; top:Ypx; - this results in a flicker that I can't get rid of with CSS alone (because the left and top aren't set).

Hi,
First of all thanks a lot for this library. It was the easiest to integrate & achieved exactly what I wanted to.

Though I know you are not maintaining this project, the reason am raising this is to know if the feature is already available or not. ( If not I could try doing it )

Feature :
Does this library have an option to use a drag-handle (within draggable-item) to drag.

P.S : (No. react-dnd seems bit complicated to integrate, due to the complexities of my project.)

I love the interface concept and the demo looks great. But I can't use this component because of this error.

Uncaught (in promise) Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded...

Changing react and react-dom to be peer-dependencies should resolve this.

Also in the documentation it says
import DragSortableList from 'react-sortable-list'
shouldn't that be 'react-drag-sortable'?

Here's my test.

import React, { Component } from 'react'
import DragSortableList from 'react-drag-sortable'

export default class Foo extends Component {
  render() {
    return (
      <div>
        <DragSortableList
          items={[{content: (<div>A</div)}, {content:  (<div>B</div)}]}
          onSort={() => (null)}
          type="horizontal"/>
      </div>
    )
  }
}

Sometimes an item hangs "in air" when cursor leaves the browser window area.

Browser:

Google Chrome
Version 66.0.3359.181 (Official Build) (64-bit)`

OS:

macOS Sierra
Version 10.12.6 (16G1314)

I'm receiving the above warning, also from the library, when I tried to arrange my columns, I'm receiving duplicate columns as below picture.

How to solve this, I'm trying for almost 2 hrs not been able to find the solution, please do support me to solve the above problem.

I'll share my code below,

`import { useEffect, useState } from "react";
import DragSortableList from "react-drag-sortable";

import Button from "../../../components/fields/button/button.component";
import Modal from "../../../components/modal/modal.component";

import CheckedImg from "../../../assets/images/checked.svg";

const AddTableColumn = (props) => {
const [state, setState] = useState({
checkboxes: [],
columns: props.selectedColumns.map((col, ind) => {
col.key = ind;
return col;
}),
// columns: [],
});

useEffect(() => {
const checkboxes = props.data.map((column) => {
let checked = false;

  if (state.columns.length) {
    checked = state.columns.some((stateCol) => {
      return stateCol.label === column.label;
    });
  }

  return {
    ...column,
    checked,
  };
});

const columns = [];

state.columns.forEach((stateCol, stateIndex) => {
  props.data.forEach((column, colIndex) => {
    if (stateCol.label === column.label) {
      columns.push({
        ...stateCol,
        content: (
          <div className="tb-md-col">
            <span>{stateCol.label}</span>
          </div>
        ),
      });
    }
  });
});

console.log(columns);

setState({ ...state, columns, checkboxes });

}, []);

const onCheckBox = (checkbox, index) => {
const checkboxes = [...state.checkboxes];
const currentCheckbox = checkboxes[index];
let columns = [...state.columns];

checkboxes[index].checked = !checkbox.checked;

if (currentCheckbox.checked) {
  columns.push({
    // audioConfig,
    content: (
      <div className="tb-md-col">
        <span>{checkbox.label}</span>
      </div>
    ),
    label: checkbox.label,
    value: checkbox.name,
  });
} else {
  columns = state.columns.filter(
    (column) => column.label !== checkbox.label
  );
}
setState({ columns, checkboxes });

};

const renderCheckboxes = () => {
return state.checkboxes.map((checkbox, index) => (

const onClear = () => {
const checkboxes = state.checkboxes.map((checkbox) => {
checkbox.checked = false;
return checkbox;
});

setState({ checkboxes, columns: [] });

};

return (

export default AddTableColumn;
`

Hi. Good Library.
I need information about the element after dragging a specific element.
Can you return the draggedEl to the onsort function after the dragEnd event?

Can not drag items in phone

Apparently it's for 'dragged' or 'placeholder' objects thats undefined, it's at line 401. I put a check in there if either is undefined then just return null. This is kind of an edge case, you really have to make an effort to break it. Seems if you drag them around quickly it can get confused. Apparently my client can do it at will and has been sending me videos of it dying on him. i included the video he sent me here, it's towards the end, like the last minute or two. I only got it to break a few times.

Could be something in my setup, this thing is still a work in progress, it's barely a beta.
https://drive.google.com/open?id=1_OTRpvQwWDoe-Jexu2s-zg8FkDE4ZXVP

Love some feedback, thank you!

Hi,

how do you see updating the state with new order with onSort

as far as I can see you can only get elements order, and not info on new order or swap for example?
I see there is an ID attribute, but since you increment id every time, seems there would need to be calculations

thanks for the answer, I will probably hack it out but would be interesting to hear idea of the component itself since new order is needed as end result

Thanks
Alex

Hi @tom-s! I am curious if the library also supports connected lists (i.e, dragging from one list and dropping into another)?

Thank you for open-sourcing this library!

onClick is not triggered on anchor tags. Consider this example:

import React from 'react'
import ReactDOM from 'react-dom'

// Components
import DragSortableList from 'react-drag-sortable'
import './styles.css';

var placeholder = (
    <div className="placeholderContent"> DROP HERE ! </div>
);

var list1 = [
 	{content: (<a onClick={() => console.log('clicked')}>google</a>), classes:['test', 'bigger']},
 	{content: (<a onClick={() => alert(1)}>test2</a>), classes:['test']},
 	{content: (<span>test3</span>), classes:['test']},
 	{content: (<span>test4</span>), classes:['test', 'bigger']}
];

var list = [
    {content: (<div>djaskjdaskjdaksjdsakjdksajdkjsakdjsakjd<DragSortableList items={list1} moveTransitionDuration={0.3} onSort={onSort} type="vertical"/></div>), classes: ['bigger']},
    {content: (<span>spam1</span>), classes:['test']},
 	{content: (<span>spam2</span>), classes:['test']},
 	{content: (<span>spam3</span>), classes:['test', 'bigger']}
];

var onSort = function(sortedList) {
    console.log("sortedList", sortedList);
}

ReactDOM.render(
    <DragSortableList items={list} moveTransitionDuration={0.3} onSort={onSort} type="vertical"/>,
    document.getElementById('example1'));

I've tested it on Chrome 53.0.2785.89. When in desktop view it works fine. However when I switch on responsive view - clicks are not triggered. Testing on a real mobile confirms the problem (Chrome on Android 6).

Hello,

I using webpack for my less, and when i try to put into my less :

.draggable {
  background-color: yellow;
  margin: 10px;
}

.dragged {
  opacity: 0.7 !important;
}

.placeholder {
  opacity: 0.5;
}

They are not used, because css-loader rename class. Have you a solution ?

Excellent library. The dragged element moves further away than it should when I move the mouse. The code doesn't show anything since I do it like the one in the example using React. I select the element and the more I drag the mouse, the more it goes in that direction. Using Chrome or Firefox, I have Win10

I am using this in a table structure like this:

<Table responsive className="drag">
                          <thead>
                            <tr>
                            <th style={{width:60}}>Column1</th>
                            <th style={{width:100}}>Column2</th>
                            <th>Column3</th>
                            <th>Column4</th>
                            <th>Column5</th>
                            <th></th>
                            </tr>
                          </thead>
                          <tbody>
                          <Category onSave={::this.someFunc} new={true} category={newcat}  />
                          
                          <DragSortableList items={list} placeholder={placeholder} onSort={this.onSort} dropBackTransitionDuration={0.3} type="vertical"/>
                    

                          </tbody>
                          </Table>

I am getting warning "Warning: validateDOMNesting(...): cannot appear as a child of

Firstly, much thanks for the easy to use component. I was wondering if there was a way to disable dragging with <input> tags. For example, in a situation like this:

If you try to use the cursor to select the 1 inside the first input field, it will start dragging the entire box instead of selecting and highlighting the text inside the field. I just wanted to see if you knew of any workarounds or had any advice on how to deal with this situation. Feel free to close otherwise.

I could provide some code if you'd like, but I think it's basically any situation where there is an <input> tag inside one if the items elements for the DragSortableList.