dragging in chrome doesn't work

[Ziv]

I have been testing react, redux and react-dnd for a new project and came with a strange situation that doesn't work in Google Chrome (I've only tested it on windows. both 32bit and 64bit). It works fine in Firefox and IE11.

I'm showing a list of divs that are backed up by redux store,

I'm using dnd to drop one item on another to exchange them.

The first 5 or so items in the list can be dragged but the the rest cannot.
I'v put a console log on canDrop on the render of the component and you can see, that for those items that cannot be dragged, it changes immediately from true to false.

I've put a sample project at github https://github.com/zivni/test-react-dnd-chrome

Edit: I identified the source of the problem. it is the classes on the dragged div. in my PlacedItemContainer.tsx i'm using classNames to add classes on items when moving over or can drop in them:

<div className={classNames(this.getDndStyle()) }>

...

private getDndStyle(): ClassDictionary {
    const {isOver, canDrop} = this.props;
    return {
        ['itemIsOver']: isOver && canDrop,
        ['itemCanDrop']: canDrop,
    }
}

the styles are:

.itemIsOver{
    background: yellowgreen;
}

.itemCanDrop{
    border: 1px solid green;
}

As you can see, in normal mode there is no css class on the div.
When I removed the class from the div or when I changed to

    return {
        ['item']: true,
        ['itemIsOver']: isOver && canDrop,
        ['itemCanDrop']: canDrop,
    }
and css:
.item{
    border: 1px solid black;
}

It started to work.

But when the css was not border but background for instance, it didn't work. but this did work:

.itemIsOver{
    background: yellowgreen;
}

.item .itemCanDrop{
    border: 1px solid green;
}

.item{
    background: wheat;
}

Also just putting the item class on the div without an actual css style, didn't work.

[dan]

This appears to be a weird edge case in WebKit. Apparently if you suddenly introduce a CSS border to the dragged element as a response to the beginning of a drag operation, the browser will just abort the drag operation. I can reproduce this in Chrome and Safari but not in Firefox.

There is nothing we can do on our side to fix this. You can use

.item {
  border: 1px solid transparent;
}

as the default style so browser doesn’t think you add a border.
Also feel free to report this to WebKit 😉

[rndm2]

I am experiencing similar issue.
I have 5 drop targets on one page. Each drop target contains drag sources. I can drag only from 1st and 2nd drop targets to any another, but not from 3-5 drop targets.
And border doesn't help