Drag and drop issues: Problems in Chrome, Opacity

#1

I built a sortable Kanban and therefore I wanted to make draggable divs. I found out that this is draggable in FF but not in chrome. Is this inevitable?

<$link to=Community><div>link to community</div></$link>

To do a quick test:

Draggable div .json (151 Bytes)

#2

I’m not sure why, but it works for me in Chrome when I move the div outside of the link widget, or place the whole thing inside of a draggable widget:

<div><$link to=Community>Link to community</$link></div>

<$draggable>
    <$link to=Community><div>Link to community</div></$link>
</$draggable>
1 Like
#3

Changing “div” to “span” also allows it to work.

Chrome seems to be having all sorts of trouble with DnD these days.

When I inspect and compare, I find this rule in Chrome but not in FF.

a:-webkit-any-link {
    cursor: pointer;
  }

According to my online research, cursor needs to be “move” in order for DnD to happen. You can easily make the div draggable by assigning a class “draggable”

<style>
.draggable {
    cursor: move;
    position: absolute;
    user-select: none;
}
</style>

But I’m thinking there is probably already a tc- class that does this.

3 Likes
#4

Hi,
the draggable-widget works, thanks a lot.
One Question regarding the opacity. Could this be modified in a way the dragged object has full opacity and the placeholder that remains there is turned to 50%? At the moment it is the other way round. You drag a ghost.

#5

That’s the default behaviour in every browser. eg: If you select some text here and drag it, the text is “ghosted”. …

If it would be the other way around in TW it would probably be confusing for users, which are used to the default behaviour.

#6

Well I guess users would understand this. There are a lot of DnD-applications without ghost images… the Muuri-Plugin for example.

Perhaps this site contains a clue:
https://www.kryogenix.org/code/browser/custom-drag-image.html

#7

Hi @JanJo we use browser native drag and drop, which allows items to be dragged and dropped between the browser and other windows. Using the browser native facilities means that we cannot control things like whether the dragged item is ghosted because it is actually operating system behaviour.

Tools that roll their own drag and drop from JS primitives can offer more control but they cannot interoperate with the operating systems native drag and drop.