MudDropZone: New Drag and Drop component #3860
Conversation
Codecov Report
@@ Coverage Diff @@
## dev #3860 +/- ##
==========================================
+ Coverage 90.59% 91.00% +0.40%
==========================================
Files 332 348 +16
Lines 10519 11419 +900
==========================================
+ Hits 9530 10392 +862
- Misses 989 1027 +38
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
Wow. This looks great @just-the-benno, @Garderoben
Good job :D
The only thing that could be added in my opinion:
- allow for reordering inside the drop zone
or - have a function that determines the order of the items in the drop zone
| .AddClass(DraggingClass, string.IsNullOrWhiteSpace(DraggingClass) == false && _dragOperationIsInProgress == true) | ||
| .AddClass(DisabledClass, Disabled == true) |
There was a problem hiding this comment.
| .AddClass(DraggingClass, string.IsNullOrWhiteSpace(DraggingClass) == false && _dragOperationIsInProgress == true) | |
| .AddClass(DisabledClass, Disabled == true) | |
| .AddClass(DraggingClass, _dragOperationIsInProgress) | |
| .AddClass(DisabledClass, Disabled) |
I think string.IsNullOrWhiteSpace(DraggingClass) is not necessary here.
There was a problem hiding this comment.
If you have a look at the CSSBuilder
public CssBuilder AddClass(string value) => AddValue(" " + value);
If the value is null or empty a "space" will be appended, which triggers also the change attribute process within Blazor and later the browser too. That is the reason, why I added this a condition for when.
There was a problem hiding this comment.
Ok got it. Maybe it would even be better if we move the IsNullOrWhiteSpace check inside the AddClass function. We use AddClass without a null check quite often.
etc.
There was a problem hiding this comment.
Agreed. I'll remove the check from this component. After it is accepted/merged, I'll create a new PR to propose a change to AddClass method of the CSSBuilder.
It is maybe not obvious, but the items are rendered in the same sequence as they appear in the source list. So, you can control the order (also within the drop zone) by sorting your source list.
That would be a nice feature but require js, or maybe I could reuse the resize observer. However, we thought it was valuable even without this feature. But that doesn't mean we can't do it later ;) |
Co-authored-by: Benjamin Kappel <b.kappel90@outlook.de>
Recommited by Mike Surcouf Authored-by: Jonny Larsson Co-authored-by: Benjamin Kappel
|
The chess example made want to use it! 😍 |
|
This looks great 😍
Before I saw this was coming I was looking to use this library https://github.com/Postlagerkarte/blazor-dragdrop. They seem to have managed this without javascript by passing indexes around. Maybe something for the future. |
|
Very nice implementation, but needs support for reordering for it to be useful for my use case I think. |
Recommited by Mike Surcouf Authored-by: Jonny Larsson Co-authored-by: Benjamin Kappel
Recommited by Mike Surcouf Authored-by: Jonny Larsson Co-authored-by: Benjamin Kappel
Recommited by Mike Surcouf Authored-by: Jonny Larsson Co-authored-by: Benjamin Kappel
Recommited by Mike Surcouf Authored-by: Jonny Larsson Co-authored-by: Benjamin Kappel
Recommited by Mike Surcouf Authored-by: Jonny Larsson Co-authored-by: Benjamin Kappel
Recommited by Mike Surcouf Authored-by: Jonny Larsson Co-authored-by: Benjamin Kappel
Recommited by Mike Surcouf Authored-by: Jonny Larsson Co-authored-by: Benjamin Kappel
New component / feature adds Drag and Drop
It's been built with great customization capability's in mind and comes with 0 styling.
Just so it can be used in way more things than just the classic drag and drop lists.
Made by me @Garderoben and @just-the-benno
Components:
Description
resolves #1045 #668
Basic Usage
Can be used in combination with other components (in some cases)
Drop Rules
CanDrop can be set globally or per drop zone.
Drop Rule Styling
CanDrop and NoDrop styling.
Dragging Styles
The style of the drop zone or the drop item can be changed on drag as well and in combination of both.
Disabled Items
Items can be disabled and prevent dragging from happening
Misc, show case examples
KanBan Example
Chess Board
How Has This Been Tested?
Manually while making this and the docs examples.
Unit tests.
Tested by several people.
Types of changes
Checklist:
dev).