Font size should be cloned from element

[d2a-raudenaerde]

When dragging an element that has a font-size that is inherited, this font-size is no longer applied to the dragged-element, making the text bigger (or smaller) and no longer properly fitting the drag-element.

Please copy the current font-size of the cloned element as well.

[svenmeier]

copy ... as well.

Well, if we'd copy the font-size, we might have to copy many more inherited stylings too. Even if this were possible, I'm not sure we wan to do it.

[d2a-raudenaerde]

Ah yes, it will also require a lot of properties. I think the window.getComputedStyle() will return all that is needed..? (See here: http://www.htmlgoodies.com/html5/css/referencing-css3-properties-using-javascript.html#fbid=b2-TgWC-yGY)

The reason I opened the issue is that the styling of the elements in my project is heavily defined by inheritance, so if I want the elements to look correct while dragging, I have to apply all the styles to the element itself to make it look good.

I agree with you that just 'looking good' is not necessarily the job of wicket-dnd, as there are other solutions, I just thought it would we nice if it worked like that out-of-the-box ;)

[svenmeier]

Hm, the clone is added to the body currently:

https://github.com/svenmeier/wicket-dnd/blob/master/wicket-dnd/src/main/java/wicketdnd/wicket-dnd.js#L76

I'm wondering why I did it this way. If we added the clone to the parent of the dragged element, it would still be able to inherit all styles.

WDYT?

[d2a-raudenaerde]

The main advantage of adding it to the body (as far as I can see) is that is won't affect the rest of the layout and styling.

For example, if I have a list and some special style on the last (last-child) element (say, a big black border-bottom) and if the cloned element is added to the same parent, then the last-child will change to the dragged element. And maybe the size-calculation of the parent will be off, but that might be preventable.

The main disadvantage of adding to the body is that the styling is lost in case of inheritance. I'm not sure how much work transferring the calculated style is (I have never done that, but it might be worth an experiment :)

I think either will work, my guess is that adding to the body and copying style will provide the most stable and predictable behavior.

If I have a moment of less pressure at work I might try to fork and implement it :)

[svenmeier]

Yesterday I've tried out adding the hover to the drop target, and it did work quite well.

Only problem I found is that the hover with position 'fixed' isn't displayed outside of a parent with overflow:scroll - as I'm using in the TableExample :/.

[d2a-raudenaerde]

Sounds Interesting!

But you can you tell where the user will drag a item to? (I have a application where users can drag items from the center-list of the screen to a number of different panels, for example facets on the left, a filter-bar on top, and a garbage can in the upper right corner)

[svenmeier]

Sure, detection of drop location works as usual.

I've just noticed that the clone has to be added to the dragSource to allow it inherit all parental styles. I'll have to try this.

[d2a-raudenaerde]

Cool. Thanks!

[svenmeier]

Ok, seems it wasn't so difficult after all.

I've pushed a change to 0.6.x and master to allow configuration via the CSS theme:

• with position:absolute the clone is added to the body, possibly losing inherited styling (old behavior)
• with position:fixed the clone is added to the drag-source, inheriting parental styling.

I've updated all CSS themes to use position:fixed now, but I might revert it to the old positioning for backwards compatibility. You can easily create your own theme then.

TableExample has a red font-color now: when you drag something you see that the clone has a red font too.
Please report back whether this works for you.

[d2a-raudenaerde]

Ah great,
I try to build my project with the snapshot repository and dependency as is written in the project-page, but I get a maven error:

[WARNING] The POM for com.github.svenmeier.wicket-dnd:wicket-dnd:jar:0.7.4-SNAPSHOT is missing, no dependency information available
Downloading: https://oss.sonatype.org/content/repositories/snapshots/com/github/svenmeier/wicket-dnd/wicket-dnd/0.7.4-SNAPSHOT/wicket-dnd-0.7.4-SNAPSHOT.jar
Downloading: https://repository.apache.org/content/repositories/snapshots/com/github/svenmeier/wicket-dnd/wicket-dnd/0.7.4-SNAPSHOT/wicket-dnd-0.7.4-SNAPSHOT.jar
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 10.321 s
[INFO] Finished at: 2016-03-24T08:50:05+01:00
[INFO] Final Memory: 13M/190M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal on project ui: Could not resolve dependencies for project com.data2act:ui:war:1.0-SNAPSHOT: Could not find artifact com.github.svenmeier.wicket-dnd:wicket-dnd:jar:0.7.4-SNAPSHOT in sonatype-snapshots (https://oss.sonatype.org/content/repositories/snapshots) -> [Help 1]

Did I do something wrong or is it not automatically uploaded?

[svenmeier]

Sorry, I forgot to deploy it. Should be available soon in the snapshot repository.