Postlagerkarte / blazor-dragdrop

Easy-to-use Drag and Drop Library for Blazor
MIT License
403 stars 96 forks source link

[Question] OrderPossiton not Available ? #161

Closed danijel88 closed 1 year ago

danijel88 commented 1 year ago

Hello, I saw old conversation about Order Position, is that still available , because when I try OnItemDrop="@((d,i)=>d.OrderPosition)" d.OrderPosition can not be found. Anyway, I need to see which position in list belong to the item, so I can save in that way, I need to track sequence of item. So I want to add Item 1 to Item 10, and when I move Item 10 to Item 5, want to have correct written sequence .

Item 1 - #1 Item 2 - #2 Item 3 - #3 Item 4 - #4

When I move Item 2 down on position of Item 4, I should have Item 1 - #1 Item 3 - #2 Item 4 - #3 Item 2 - #4

Or if I move Item 1 till end of list Item 3 - #1 Item 4 - #2 Item 2 - #3 Item 1 - #4

Or opposite.

Postlagerkarte commented 1 year ago

It was removed because you can easily check your list for the position of the items, e.g. inside the OnDrop you can check myList.IndexOf(droppedItem)

danijel88 commented 1 year ago

Yes, but it means when it is dropped. In that case I need to go to drop item for one position. Example I add like this image If I move 1st and 2nd will get correct possition image

But if I move 1st item to last item, position is not update on correct way image

Here is the code: `@page "/variants/{styleId}" @using MMS.WebUi.Services @using MMS.Shared.Models.OperationModels @using MMS.WebUi.Components


<Dropzone Items="NewRequests" TItem="StyleVariantCreateRequest" OnItemDrop="@((p)=>OnItemDrop(p))" InstantReplace="true" OnReplacedItemDrop="@((p)=>OnReplacedItemDrop(p))">

@code { private int _sequence = 1; private string _variantName = string.Empty; StyleVariantCreateRequest lastdropped; [Parameter] public string styleId { get; set; }

[Inject] StyleService StyleService { get; set; }

StyleVariantCreateRequest Request = new();
List<StyleVariantCreateRequest> NewRequests = new List<StyleVariantCreateRequest>();
List<StyleOperationResponse> StyleOperationsResponse = new();

protected override async Task OnInitializedAsync()
{
    int id = Convert.ToInt32(styleId);
    StyleOperationsResponse = await StyleService.GetStyleOperationsByStyleIdAsync(id);
}

private void AddVariantOperation()
{
    if (string.IsNullOrEmpty(_variantName))
    {
        _variantName = Request.VariantName;
    }
    int id = Convert.ToInt32(styleId);
    var operation = StyleOperationsResponse.FirstOrDefault(w => w.StyleOperationId == Request.StyleOperationId);
    NewRequests.Add(new StyleVariantCreateRequest
        {
            Sequence = _sequence,
            StyleId = id,
            VariantName = _variantName,
            StyleOperationId = Request.StyleOperationId,
            OperationDescription = $"{operation.OperationEnglishName} - {operation.OperationLocalName}"
        });
    _sequence++;
}

private StyleVariantCreateRequest _droppedItem = new();
private StyleVariantCreateRequest _replacedItem = new();
private int _oldSequence = 0;
public void OnItemDrop(StyleVariantCreateRequest item)
{
    _droppedItem = item;
    _oldSequence = item.Sequence;
    _droppedItem.Sequence = _replacedItem.Sequence;
    _replacedItem.Sequence = _oldSequence;

    StateHasChanged();
}
public void OnReplacedItemDrop(StyleVariantCreateRequest item)
{
    _replacedItem = item;

    StateHasChanged();
}

}` What I'm doing wrong or what I missed?

Postlagerkarte commented 1 year ago

If you don't have to many items you can just adjust all items at once, so no need to keep track of the replaced items, etc:

public void OnDrop(TodoItem todo)
{
    foreach(var myToDo in MyToDoList)
    {
        myToDo.Position = MyToDoList.IndexOf(x);
    }
}
danijel88 commented 1 year ago

Yes, that works. Thanks.

NessfertIndia commented 1 year ago

Can you post the example of OnDrop please @danijel88 / @Postlagerkarte Looks like OnDrop event is not available with <Dropzone , instead i can see one called OnItemDrop The ultimate aim is just to read the new order of items in the DropZone

danijel88 commented 1 year ago

Hello, Sorry on late replay, but was on holiday. Yes, now it is used OnItemDrop. OnItemDrop="@(p => OnItemDrop(p))"