search

lidorsystems / integralui-web-angular

IntegralUI Web - Advanced UI Components for Angular 9
https://www.lidorsystems.com/products/web/studio/
Other
10 stars 8 forks source link

Drag effect does not display clearly in Firefox #9

Closed mm-ryo closed 5 years ago

mm-ryo commented 5 years ago

Firefox : drag-effect-FireFox Chrome : drag-effect-Chrome

Are we able to customize drag effect? thanks

Lidor-Systems commented 5 years ago

This happens the the sample that is set up on StackBlitz when running FireFox. But if you run the TreeView Drag Drop sample from online quickstart page, it appears like this:

image

Can you try it on a separate project (not on StackBlitz), to see how it works?

Unfortunately, the drag image that shows the dragging element is handled by the HTML5 drag drop, which implementation depends on the browser, and cannot be changed.

Note We are working on a new drag drop mode, that will rearrange items in a more fluid way. By showing the target location with an empty space. In this case you can customize the appearance of drag handle via CSS.

mm-ryo commented 5 years ago

we tried it in our own project, but the effect is the same that looks like what we see in Firefox.

Lidor-Systems commented 5 years ago

A solution for this drag drop mode is to change the drag image from the source element with a custom one that will also have a CSS class attached to it. In this way it can be changed, if required. The image will be generated from the dragging element, with option to change its appearance: background, text color etc via CSS.

In this way the dragging element will look the same, no matter the browser in use.

In current state, this cannot be done on your side. We have added this feature on our list and will be available in next update,

Lidor-Systems commented 5 years ago

This issue is now fixed in our internal build.

Apparently, the problem was because the HTML5 draggable attribute was set to an element that is child of the top tree item element, where CSS styles were applied. Because of it, under FireFox the dragged item appears without its background style set.

We have changed the code so that draggable attribute is now set to the tree item element with general styles, this fixes the issue with FireFox. The image of dragged item will now appear the same in all browsers.

There is no need to apply custom image, because it is based on custom CSS styles that are applied to the item.

This fix will be part of the next update 19.3, coming on 24 Sep 2019.