postlagerkarte / blazor-dragdrop Goto Github PK

On Dropzone.razor file, can you make the class of the div's more customizable please, with adding string parameters as:
[Parameter]
public string CustomCss { get; set; }

[Parameter]
public string CustomStyle { get; set; }

[Parameter]
public string CustomDragItemCss { get; set; }

[Parameter]
public string CustomDragItemStyle { get; set; }

Then:
div style="@CustomStyle" class="plk-dd-dropzone @GetStyleClass() @CustomCss"

and also in the foreach statement:
div draggable style="@CustomDragItemStyle" class="@CustomDragItemCss" @CheckIfItemIsInTransit(item) @CheckIfItemIsDragTarget(item) @CheckIfDragOperationIsInProgess()"

So we can add more customizable styles. Thank you very much.

When I assign a handler for AllowDrag in my component with

<Draggable Tag="@SomeItem" AllowDrag="(d) => AllowDrag(d)">

<code>
    public bool AllowDrag(DraggableItem item)
    {
       return true;
    }
</code>

the OnDragStart() method in Dropzone.razor crashes with the following error message:

Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: Delegate 'System.Func<Blazor.DragDrop.Core.DraggableItem,bool>' has some invalid arguments
at CallSite.Target(Closure , CallSite , Func`2 , Object )
at System.Dynamic.UpdateDelegates.UpdateAndExecute2[T0,T1,TRet](CallSite site, T0 arg0, T1 arg1)
at Blazor.DragDrop.Core.Dropzone.OnDragStart(Int32 draggableId)
at Blazor.DragDrop.Core.Dropzone.<>c__DisplayClass0_0.b__1()
at Microsoft.AspNetCore.Components.EventCallbackWorkItem.InvokeAsync[T](MulticastDelegate delegate, T arg)
at Microsoft.AspNetCore.Components.EventCallbackWorkItem.InvokeAsync(Object arg)
at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, Object arg)
at Microsoft.AspNetCore.Components.EventCallback.InvokeAsync(Object arg)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync(UInt64 eventHandlerId, EventFieldInfo fieldInfo, EventArgs eventArgs)

...
 private void OnDragStart(int draggableId)
    {

        var dragedItem = DragDropService.GetDraggablesForDropzone(_dropzoneId).Single(x=> x.Id == draggableId);

        if (dragedItem.AllowDrag != null && !dragedItem.AllowDrag(dragedItem.Tag)) return;

...

I think, the "dragItem.Tag" should be replaced by a "dragItem", because the handler expects a DraggableItem (and not the "dynamic item" stored in Tag)

...
 private void OnDragStart(int draggableId)
    {

        var dragedItem = DragDropService.GetDraggablesForDropzone(_dropzoneId).Single(x=> x.Id == draggableId);

        if (dragedItem.AllowDrag != null && !dragedItem.AllowDrag(dragedItem)) return;

...

Switching page after an error will lose all items

When an element is dragged over a list the dragged element is added to the new list to show where it would be dropped. However, when the element leaves the list it is not returned in its original position, so if the drag operation is aborted element doesn't return to its original position, but in the last position it had in the last list it was dragged over.

Hello,

I would like to drop an image (from file) on an element and process it in the code.
Can I achieve it using this package?

Sample :

<Dropzone >
    <RadzenImage Path="@ImageDataURL" Style="width: 600px; height: 600px" />
</Dropzone>

in the code how can I catch the drop event?

public void OnDrop(.. args? ..)
{
// process the file
}

Thanks,
Istvan

Hi!

I love using v2, its much more straightforward.
There is only one feature that I'm missing: when dropping an item between other two, in v1 there was automatically added some place for it (before releasing the cursor). I'll try to illustrate the difference:
v1:

v2:

If it could be done in v2, it would improve UX a lot.

Thanks. Keep on the great work!

How can I access order position in OnDrop?

Maybe something like
<Draggable Context="phases" Tag='new { Id = item.Id, Index = phases.OrderPosition }' OnDrop="OnDrop" >
That doesn't compile though as at that time there is no knowledge that phases is the context.

Alternatively, maybe my whole approach is wrong. What's the recommended strategy of updating and underlying list as the items get reordered?

<Blazor.DragDrop.Core.Draggable OnDrop="(d, i) => OnDrop(d, i)"> ... </Blazor.DragDrop.Core.Draggable>

public void OnDrop(dynamic d, int orderPosition) { }

In the case above the orderPosition seems to always be correct, but d is always null. Is it supposed to be a reference to what I dragged?

I saw in another post that you are working on something, but in the meanwhile...

Hi, I would like to clear all Draggable element in a Dropzone, is it possible? I read #6 and I understand to delete a single element, and I can use this for all, but I would like to find a better way. TY

Could you add support for triggering event callbacks with the item together with action parameter?

This would be extremely helpful in the case where we need an async function call after OnDrop

Thanks!

When a li tag is made draggable it is embedded in a div tag, resulting in invalid Html. Since all browsers actually render li inside divs, the main problem is with accessibility: a voice reader would not be able to render correctly the ol/ul list.

I would like to implement smth like Toolbox in WPF\Xamarin:

For example: I drag item from zone1 and drop it in zone2. Items in zone1 have no changes. Items in zone2 add item from zone1.
It is possible?

Hi,
first of all thank you for your work, @Postlagerkarte @daghb

I would like to know how it is possible to retrieve the data of the sorted list on a button click.

On a button click event, the List I gave to the Dropzone still has the initial sort order.

I checked the Demo pages but didn't see an implementation of that, unfortunately.

hi , how i can define an element as drag handle , not whole element ,

i have an box i just want when an item clicked drag event fired.

i used allowDrag , but problem is page will be refreshed every time i set data for that

Hello!

I'm trying to use the Draggable component inside a foreach. However, when I delete an item from the list, the Draggable linked to this item is not deleted.

Here is my code :

<Dropzone>
	@foreach (TestStep step in testCase.Steps)
	{
		@step.StepNumber

		<Draggable @key="step">
			<div class="row card">
				<div class="col-sm-1">@step.StepNumber</div>
				<div class="col-sm-5">@step.Actions"</div>
				<div class="col-sm-5">@step.ExpectedResults</div>
				<div class="col-sm-1">
					<button class="btn btn-light" @onclick="(() => DeleteStep(step))">
						Delete
					</button>
				</div>
			</div>
		</Draggable>
	}
</Dropzone>

@code {
    [Parameter]
    public TestCase testCase { get; set; }

    private void DeleteStep(TestStep step)
    {
        testCase.Steps.Remove(step);
        StateHasChanged();
    }
}

Note that when deleting an item, the StepNumber displayed before the Draggable are updated.
I tried to use key on Draggable but it doesn't change the behavior.

Do you have a solution to be able to remove the Draggable linked to the deleted item without reloading the whole page?

Thanks.

Haven't tested, your component so would it be possible to inject content into a draggable item and place it in a specific existing zone with some kind of ID or unique name? For what I see in your samples, you always need to declare dragabble items in razor file.

Would love to have this working with your component
https://stevenknox.net/exploring-assembly-unloading-in-net-core-3-0-by-building-a-simple-plugin-architecture/

I am going to preface this and say that I am definitely not an expert in C#.

How are you supposed to access the public properties in DraggableItem.cs? I am looking to essentially create 2 draggable zones and keep track of the items and their order in one of the zones. I see some properties that look helpful (OrderPosition & OriginDropzoneId ) but there doesn't seem to be a way to actually access this data.

Additionally, I am getting console [TRACE] messages from this library that are spamming the console. Is there a way to disable this?

Hi!

Is there a way to move a draggable from one dropzone to another one?
Preferably in a way that OnDrop() is called in the destination dropzone.
(I want to achive that if a draggable is clicked, then it is moved automatically.)

Thanks.

How are we going to define the initial position and final state of position for different Drop Zone ?

Hi. How to use OnDrop property? I try use OnDrop="(d) => OnDrop(d) and then
public void OnDrop(DraggableItem item)
{
Console.WriteLine( item.OrderPosition);
}

but this is not work.
Best.

I recently noticed in my Serverside blazor project, that the visual order of items gets corrupted when I drag a item multiple times up and down WITHOUT releasing the mouse button.

I can reproduce the error in the sample app when i change your code in index.razor to:

 <div id="main" class="container-fluid">
    <p>Drag the list items:</p>
    <ul>
        <Dropzone>
            <Draggable>
                <li class="list-group-item" >A (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >B (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >C (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >D (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >E (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >F (order-pos: @context.OrderPosition)</li>
            </Draggable>
            <Draggable>
                <li class="list-group-item" >G (order-pos: @context.OrderPosition)</li>
            </Draggable>
        </Dropzone>
    </ul>
</div>

If you click and hold on item "A" and move it down to the "G" and again up to "B" and repeat this several times (faster) you may notice, that the order of some items may have changed although you did not "release" your item and all other items should stay in the correct order.

Maybe its a blazor rendering / update issue ...

If I drag slowly I am not able reproduce the effect.

Cannot set a class on item. Allow the component to CaptureUnmatchedValues.

Hello,

I have a dynamic list of components each with it's own dropzone. Each dropzone will always have 2 items. The following allows me to swap items from one dropzone to another, but does not work when trying to swap items within the same dropzone.

**Edit
It also appears to lose the sort order.

<Dropzone Class="@GetCSSClasses()" AllowSwap="true" MaxItems="2">
    <DraggablePanel PagePanel="@SpreadPanel.LeftHandPagePanel" />
    <DraggablePanel PagePanel="@SpreadPanel.RightHandPagePanel" />
</Dropzone>

Hi @Postlagerkarte ,
I used version 1 in a case similar to your demo - twozones, but having an empty area in the second zone as a starting point and it worked fine. Are you planning to introduce this feature in this v2? If it's already there I'm sorry but I didn't understand how to use it.
ty

I am using Bootstrap and have 4 columns on my page that are filled with cards. I turned them into drop zones and draggables by making Dropzone a child of the column and draggable parent of the card:

<div class="row">
            <div class="col">
                <Dropzone>
                    <MyCard1 />
                </Dropzone>
                    
            </div>
            <div class="col">
                <Dropzone>
                    <MyCard2/>
                    <MyCard3/>
                </Dropzone>
            </div>
            <div class="col">
                <Dropzone>
                    <MyCard4/>
                </Dropzone>
                
            </div>
            <div class="col">
                <Dropzone>
                    <MyCard5/>
                    <MyCard6/>
                </Dropzone>
            </div>
        </div>

MyCard is basically this:

<Draggable>
    <div class="card shadow mb-2">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold">@Title</h6>
        </div>
        <div class="card-body">
            @ChildContent
        </div>
    </div>
</Draggable>

Drag and drop functionality works. However, for some reason, the original width of my cards is changed to be the same width as the column.

How it was before I made things draggable:

How it turned after I made things draggable:

Do you have any idea what might be causing the issue and how to resolve it?

P.S. I love what you are doing with this library and would very much love, love, love it if you continued to develop it, at least to resolve/add some of the really necessary stuff

Edit:
I think I understand why this is happening. Those cards that are half in width are placed in a separate div which is then segmented into two columns.

I think this wouldn't be solved so easily without nesting of draggable items. Nesting is already mentioned in #8 (comment)
however, I think our meaning of nesting is different. In my case, I want to drag and drop something from a drop zone which is inside of a drop zone, to its parent drop zone.

Or do you have other ideas how this could be accomplished?

@Postlagerkarte in your opinion, what would be the way to achieve highlighting of the row (such as by darwing a line) where the draggable is going to be dropped, as shown in this demo: https://codepen.io/retrofuturistic/pen/tlbHE

Thanks

I have a list of dragable modules that each have a list of dragable questions. So nested draggables would be sweet.

I tried it and it resulted in all kinds of fuckery so I am guessing it's not supported yet? Any plans to add that?

Thanks!

When draging an item to another dropzone it also stays in the original dropzone.
This happens in Demo 3 and Demo 4 too.

This might be an intended behaviour though. If so, is there a way to change it?

Thanks.

First I wanted to congratulate you on this package. I am starting to use it and I have created simple a sortable list and a function to add a new element. My problem is that I would like to get the final order of the items by for example a button click, but I have no idea to do it.

<Dropzone>
@foreach (ProvaClasse item in lista)
 {
      <Draggable>
           <li  class="list-group-item mt-2 mb-2"> @item.DicNome[1] </li>
      </Draggable>
}
</Dropzone>

@code{
    List<ProvaClasse> lista;
    protected override void OnInitialized()
    {
        lista = _dbProvaClasse.Lista();
    }
}

TY

Would it be possible to add support for Display Grid?

So something like this would be possible?

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<div class="grid-container">
 <Dropzone>
        <Draggable>
             <div class="grid-item">1</div>
        </Draggable>
        <Draggable>
             <div class="grid-item">2</div>
        </Draggable>
        <Draggable>
             <div class="grid-item">3</div>  
        </Draggable>
        <Draggable>
             <div class="grid-item">4</div>
        </Draggable>
        <Draggable>
             <div class="grid-item">5</div>
        </Draggable>
        <Draggable>
             <div class="grid-item">6</div>  
        </Draggable>
        <Draggable>
             <div class="grid-item">7</div>
        </Draggable>
        <Draggable>
             <div class="grid-item">8</div>
        </Draggable>
        <Draggable>
             <div class="grid-item">9</div>  
        </Draggable>
 </Dropzone>
</div>

</body>
</html>

Hi! Great work on v2 so far!

Just to clarify the issue: if you try to drag an item between other 2 items (in the same list), the drop does not happen. (So in order to work, the cursor must be above another item when released.)

I don't know if its a v2 specific behaviour, however I don't remember it from before.
The issue happens in the demo site too.

Thanks.

Hello!
We have many elements in our lists, but we can´t use the mousewheel after started dragging an element.
What can we do about this?

I have a component which exposes a property "Items" and inside the component, I loop through the Items property and build the draggable list.

This component's parent component has a dropdown, and when a user selects an item in the dropdown, I lookup records that match the dropdown's selected value; I have bound this result to the inner component's "Items" property.

As the user selects different items in the dropdown, the list inside the component keeps growing, instead of showing only the current set of Items.

I have verified this issue is related to the blazor-dragdrop library, because when I remove the DropZone and Draggable tags from the component, then the list behaves as expected. Please help. Thanks

Hi!

I'd like to remove a draggable from the list in onDrop.
How to get the current item?

    private void HandleDrop(dynamic d, int i)
    {
        OnChange.InvokeAsync(d.Id);
        // MyDragDropService.RemoveDraggableItem(...);
        StateHasChanged();
    }

Thanks.

Because set AllowSwap on booth to false dosn't work.

Hi!

How to get the current draggable item in OnDrop()?

Thanks.

On chrome, when dragged element is cover for example a menu, ghost copy a part of this menu.
I attach a screen cast with example.
https://streamable.com/rn5u9q

I recently noticed that some of my components aren't redrawing properly even when I force a redraw with StateHasChanged(). Things that used to be perfectly responsive suddenly don't change at all. The methods are getting called, all the code that should be executed still executes. It appears that only that change isn't being shown visually, eg. the components aren't getting redrawn.

I hunted down through my git commit history and found the exact moment where things stopped working was when I added Drag & Drop into my project.
Thus the only code change between the commit that works perfectly fine and the commit that doesn't is including drag & drop into my project (importing the package through nuget, adding services.AddBlazorDragDrop() into Startup, adding using Blazor.DragDrop.Core into imports, adding the drag and drop css file to _Host) and then wrapping and around my existing HTML code.

The hierarchy of my page is like this:

Index.razor has the dropzones and inside them I use my custom components like this:

Index.razor

 <div class="row">
            <div class="col dashboard-col">
                <Dropzone Class="row clear-min-height dashboard-row" Name="Column1">
                    <LogWordsWidget />
                </Dropzone>
           ....

My custom components are using another custom component like this:

<Card Title="Log Words">
      content
</Card>

And then, that card custom component is using Draggable:

<Draggable>
    <div class="card shadow mb-2">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold">@Title</h6>
        </div>
        <div class="card-body">
            @ChildContent
        </div>
    </div>
</Draggable>

Currently, I am forced to remove drag & drop from the project because it breaks the functionality of my components.

Do you have any idea what might be going wrong? As of now, I've only tried moving services.AddBlazorDragDrop() up and down the ConfigureServices method to no effect.

Preconditions: project whose name ends with the word "Blazor". For example: MyProject.Blazor.

using Blazor.DragDrop.Core; - works as expected in .cs file.

If I'm trying to write the same code in razor page, the following error appear:

If I do it inside tag (<Blazor.DragDrop.Core.Dropzone></Blazor.DragDrop.Core.Dropzone>), compilation error appears:

Is it possible to use it in a project whose name ends with the word "Blazor"?

I have 2 dropzones and a boolean flag. If the flag is false, the fist dropzone will be shown. The second dropzone with true.
A order of actions for reproducing the exception:

1. rendering a page with the first dropzone (flag is false)
2. switching the flag, rendering the second dropzone
3. switching the flag, appering the exception
   

Hi!

If there are more dropzones which Id is returned by DragDropService.GetDropzoneId()?

Hi,

I tried adding the package to my client project, but the using statement in Services.cs is not recognized:

Error CS1061 'IServiceCollection' does not contain a definition for 'AddBlazorDragDrop' and no accessible extension method 'AddBlazorDragDrop' accepting a first argument of type 'IServiceCollection' could be found (are you missing a using directive or an assembly reference?) ProjMan.Client Startup.cs 25 Active

Error CS0234 The type or namespace name 'DragDrop' does not exist in the namespace 'Blazor' (are you missing an assembly reference?) ProjMan.Client Startup.cs 15 Active

Greetings!

First of all, it's not precisely an issue, but I wanted to clear some doubts respecting to the first advertisement of the repo:

!This library is suitable if you need to make a small set of items draggable. It is not suitable to for large lists

I'm creating a map for a game in WebAssembly which basically is a background image, grids drew over it, and a div for every grid that will contain a single image which can be dragged over other grids, though a grid can't contain more than one image, but, due the grid numbers goes from 600 to 10.000, I want to know if it'll be a bad idea to use this library as the basis for the drag & drop operations...

Thanks in advance!

I'm looking into using your library, but it doesn't seem to work correctly on iPhones and I'm hoping there might be a quick fix for it.

I've made a recording of me trying to use your demo website on my iPhone, and as you can see, when the item is dragged around the screen, the whole screen moves, which makes it difficult to drag accurately.

Do you have any idea how to fix this? Thanks!

Hi
Does this package support drag and drop tr in table tag?
I try this with tr but it does not work.

So I forked your Demo project to reproduce the bug.
You can check the repository here and last commit with the bug here.

So I've just want to show a border on "active" item (on which user clicked).
If you will run the project with my changes and go to "Demo 3" page, you can click on First dropzone items and they will have a red border. If you drop smth from a Second dropzone to First and click on items from First its also take red border.

Steps to reproduce:

1. Drag item from the Second dropzone (for example "item 10") move the mouse to First dropzone (not released the mouse button) and drop an item in the Second dropzone (where it initially located)
2. Now try to click on items from the First dropzone

Actual result: It's "freeze". Borders did not appear, To "unfreeze" just move some item in the First dropzone
Expected result: dropzone not freezes.

P.S. Thanks for your great work!

My app has draggable items that include an image tag. It works well in Chrome and Edge, but in Firefox, when the item is dropped, the image is displayed in the active tab and the drag/drop doesn't complete. I suspect this is a Firefox issue, but I wondered if you had any ideas about it. The attached solution will show the problem if you use Firefox as the browser. Thanks for looking at this and for your very cool package.

FireFoxDragDrop.zip

Hi,

This is a great library, it certainly makes drag and drop a lot easier to use.

I'm having some issues when navigating between pages with the internal dictionary being reuesed and so copying over items onto the new page.

I've created an example project here.

https://github.com/mattosaurus/CampaignCalendar

The aim is to be able to drag items from a standard list of events onto a calendar day and for that to then be persisted to a SQL database in the backend. When navigating to a new month I would then read in a list of events from the SQL database and use it to populate the dropzones with items.

The immediate issue I have is that when dragging an item onto a day and then navigating to the next month the item appears there as well which I believe is due to the reuse of the internal dictionary between pages (this is probably Blazor trying to be helpful).

Would it make sense to allow the internal dictionary to be set from the service so dropzones and items could be populated at initialization and it could be manually cleared and reset when navigating to a new page?

Let me know if you think this could be a useful feature and can see a way to implement it, I had a look at adding this functionality but couldn't get it to work though I'll continue investigating (thinking about it, a data store interface might be a good idea but that's probably quite a bit more work to implement).

I am trying to create a treeview that allows drag and drop using your control.
I am making each node of my treeview a Draggable, however, this seems to prevent interaction with the contents.
i.e. I have something like:

The @OnClick event is firing, but it attempts to change the contents of the Draggable (e.g. changing CSS class) which is not working. It seems as if the contents of the Draggable can only be static, so we can't have it contain any kind of changeable component. Is that right?