{"id":13466344,"url":"https://github.com/Postlagerkarte/blazor-dragdrop","last_synced_at":"2025-03-25T21:32:02.792Z","repository":{"id":35168598,"uuid":"212039067","full_name":"Postlagerkarte/blazor-dragdrop","owner":"Postlagerkarte","description":"Easy-to-use Drag and Drop Library for Blazor","archived":false,"fork":false,"pushed_at":"2023-12-15T14:33:14.000Z","size":383,"stargazers_count":414,"open_issues_count":69,"forks_count":98,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-17T15:08:59.876Z","etag":null,"topics":["blazor","blazor-client","blazor-server","csharp","drag","drag-and-drop","drop-library"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Postlagerkarte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-10-01T07:42:07.000Z","updated_at":"2025-03-14T12:45:36.000Z","dependencies_parsed_at":"2023-12-15T15:45:57.493Z","dependency_job_id":null,"html_url":"https://github.com/Postlagerkarte/blazor-dragdrop","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Postlagerkarte%2Fblazor-dragdrop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Postlagerkarte%2Fblazor-dragdrop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Postlagerkarte%2Fblazor-dragdrop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Postlagerkarte%2Fblazor-dragdrop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Postlagerkarte","download_url":"https://codeload.github.com/Postlagerkarte/blazor-dragdrop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245304874,"owners_count":20593626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-client","blazor-server","csharp","drag","drag-and-drop","drop-library"],"created_at":"2024-07-31T15:00:42.664Z","updated_at":"2025-03-25T21:32:02.746Z","avatar_url":"https://github.com/Postlagerkarte.png","language":"HTML","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["Components","2D/3D Rendering engines"],"readme":"# blazor-dragdrop\nDrag and Drop Library for Blazor\n\n[![Build Status](https://dev.azure.com/postlagerkarte/blazor-dragdrop/_apis/build/status/Postlagerkarte.blazor-dragdrop?branchName=master)](https://dev.azure.com/postlagerkarte/blazor-dragdrop/_build/latest?definitionId=3\u0026branchName=master)\n\n#### Demo:\n\nhttps://blazordragdrop.azurewebsites.net/\n\n#### Install:\n\nInstall-Package blazor-dragdrop\n\n[![NuGet version (blazor-dragdrop)](https://img.shields.io/nuget/v/blazor-dragdrop.svg?style=flat-square)](https://www.nuget.org/packages/blazor-dragdrop)\n\n#### Usage:\n\n1) Add BlazorDragDrop to your Startup.cs\n\n```csharp\nservices.AddBlazorDragDrop();\n```\n\n2) Add Plk.Blazor.DragDrop to your _Imports.razor\n\n```csharp\n@using Plk.Blazor.DragDrop\n```\n\n3) Add relevant styles to your app (since 2.2 no styles are included in the library anymore)\n\nYou can copy styles from [dragdrop.css](Plk.Blazor.DragDrop.Demo/wwwroot/css/dragdrop.css) to your site.css to get started. Read more about styling [here](#styling).\n\n------\n\nVersion 1.x:\n\nPlease upgrade to 2.0 - there will be no support/bugfixes for the 1.x version.\n\nVersion 2.x :\n\n#### Create a draggable list for your items\n\nYou have to create a dropzone and assign your items to it:\n\n```html\n    \u003cDropzone Items=\"MyItems\"\u003e\n        \n    \u003c/Dropzone\u003e\n```\nThis will not yet render anything - you have to provide a render template so that the dropzone knows how to render your items. \n\n```html\n    \u003cDropzone Items=\"MyItems\"\u003e\n        \u003cdiv\u003e@context.MyProperty\u003c/div\u003e\n    \u003c/Dropzone\u003e\n```\n\nYou can also use your own component as a render template:\n\n```html\n    \u003cDropzone Items=\"MyItems\"\u003e\n        \u003cMyCompoenent Item=\"@context\"\u003e\u003c/MyComponent\u003e\n    \u003c/Dropzone\u003e\n```\nYou access your item via the @context - Alternatively, you can specify the Context attribute on the Dropzone element to assign a different name.\n\nBy default the dropzone will use a build-in style for the drag/drop animations. \n\nIf you add or remove items to the underlying list the dropzone will automatically update. \n\nAfter a drag operation you can inspect your list to get the current position of items. \n\nUse the TItem property of the Dropzone to tell the compiler about the item type you are using. It is helpful when using some of the event handlers. \n\n#### Features:\n\nOnly allow limited number of items in a Dropzone: \n\n```html\n\u003cDropzone MaxItems=\"2\"\u003e\n\n\u003c/Dropzone\u003e\n```\nIf you drop something and the limit is reached you can get a notification by providing a callback.\n\nRestrict Drop:\n\nThe item can only be dropped if the given Func returns `true`.\nThe first parameter is the item that is currently being dragged.\nThe second parameter is the item directly under the current item or null when there is a gap.\n\n```html\n\u003cDropzone Accepts='(d, t) =\u003e d.Gender == \"Male\"'\u003e\n\n\u003c/Dropzone\u003e\n```\nIf you drop something and the item is rejected you can get a notification by providing a callback.\n\nCopy Items:\n\nBy default, items are moved between dropzones. \n\nIf you instead want the item to be copied you can make use of the \"CopyItem\" attribute:\n\n```html\n\u003cDropzone CopyItem=\"(item)=\u003e { return new TodoItem() {Titel = item.Titel}; }\" Items=\"MyThirdList\" TItem=\"TodoItem\" OnItemDrop=\"@((i)=\u003elastdropped = i)\"\u003e\n    \u003cdiv style=\"border: 2px solid black\"\u003e\n        @context.Titel\n    \u003c/div\u003e\n\u003c/Dropzone\u003e\n```\nThe CopyItem attribute expects a method telling the dropzone how to create a copy of the item. It receives the currently active item as input.\n\nInstant Replace: \n\nBy default you get a visual clue for the drop operation. You can activate Instant Replace to instead swap out items on the fly. This option should only be used for small lists.\n\n```html\n\u003cDropzone InstantReplace=\"true\"\u003e\n\n\u003c/Dropzone\u003e\n```\n\n\nMultiple Dropzone:\n\nYou can create more than one dropzone and move items between them.\n\n#### Styling:\n\nTo style the dropzone divs you can either create a css selector for plk-dd-dropzone or you assign classes to the dropzone:\n\n```html\n\u003cDropzone Class=\"my-a my-b\"\u003e\n```\n\nFurthermore, you create css selectors for the following classes:\n\n```html\nplk-dd-dragged-over (class added to the item that is currently dragged over)\nplk-dd-in-transit (class added to the item that is currently dragged around)\nplk-dd-spacing (class added to the div that sits between two items)\nplk-dd-spacing-dragged-over (class added to div that is currently the drop target)\nplk-dd-inprogess (class added to a dropzone when a drag operation is in progress)\n```\n\nYou should always disable pointer events for a dropzone when a drag operation is in progress. Include this in your custom css:\n\n```html\n.plk-dd-inprogess \u003e * {\n    pointer-events: none;\n}\n```\n\n#### Examples:\n\nCheck the [demo page](https://blazordragdrop.azurewebsites.net).\n\n------\n#### Mobile Devices:\n\nThe HTML 5 drag'n'drop API allows to implement drag'n'drop on most desktop browsers.\n\nUnfortunately, most mobile browsers don't support it. \n\nYou need to make use of a polyfill library, e.g. mobile-drag-drop\n\nAdd this to your _host.html:\n\n```html\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/mobile-drag-drop@2.3.0-rc.2/default.css\"\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/mobile-drag-drop@2.3.0-rc.2/index.min.js\"\u003e\u003c/script\u003e\n\n    \u003cscript\u003e\n        // options are optional ;)\n        MobileDragDrop.polyfill({\n            // use this to make use of the scroll behaviour\n            dragImageTranslateOverride: MobileDragDrop.scrollBehaviourDragImageTranslateOverride\n        });\n    \u003c/script\u003e\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPostlagerkarte%2Fblazor-dragdrop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPostlagerkarte%2Fblazor-dragdrop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPostlagerkarte%2Fblazor-dragdrop/lists"}