11@page " /Example3"
2- <article >
3- <p >
4- This is more advanced solution that allows multiple child elements to be part of a draggable element.
5- </p >
2+ <article class =" prose prose-invert"
3+ <p >
4+ Example 3 addresses the challenge of moving an item to the end of the list. This is achieved by use of a variable named `lastModel`,
5+ And placing an element at the end of the list that is not draggable. This element is then used as the drop target for the last item in the list.
6+ </p >
67</article >
8+
9+
710<div >
811</div >
912<div class =" flex justify-center bg-gray-800"
10-
11- <ul class =" mx-auto my-5 "
12- ondragover =" event.preventDefault();"
13- >
14- @foreach ( var item in Models .OrderBy (x => x .Order ))
15- {
16- if (item .Order == int .MaxValue )
17- {
18- < li @ondrop = " ()=>HandleDrop(item)" @key = " item" class = " h-5 bg-green-200 w-full
19- @(item .IsDragOver ? " border-t-4 border-red-500" : " " " >
20- < / li >
21- continue ;
22- }
23- <li @key =" item" class =" pb-2 relative"
24- @ondragstart =" () => draggingModel = item"
25- @ondragend =" ()=> draggingModel = null" draggable =" true"
26- @ondrop =" ()=>HandleDrop(item)"
27- >
28- <div class =" bg-emerald-500 py-3"
29- <div class =" bg-amber-600 py-10 mx-2 px-2 rounded-xl" @item.Name </div >
30- <div >Child elem . to demonstrate the issue </div >
31- </div >
32-
33- @if (draggingModel is not null )
34- { // this is overlay for dropping. Otherwise it flickers between dragenter and leave, bsc of child element
35- // this overlays the child elements of <li>
36- div class =" bg-rose-100/20 absolute inset-0 w-full h-full @(item.IsDragOver ?" border-t-4 border-red-500 " :" " )"
37- @ondrop =" ()=>HandleDrop(item)"
38- @ondragenter =" @(()=>{item.IsDragOver = true; Console.WriteLine($" Drag Enter {item.Name} " ); })"
39- @ondragleave =" @(()=> {item.IsDragOver = false; Console.WriteLine($" Drag Leave {item.Name} " ); })"
40- >
41- </div >
42- }
43-
44- </li >
45- }
46- </ul >
13+
14+ <ul class =" mx-auto my-5 "
15+ ondragover =" event.preventDefault();"
16+ @foreach ( var item in Models .OrderBy (x => x .Order ))
17+ {
18+
19+ <li @key =" item" class =" pb-2 relative w-64"
20+ @ondragstart =" () => draggingModel = item"
21+ @ondragend =" () => draggingModel = null" draggable =" @(item == lastModel ? " false " : " true " )"
22+ >
23+
24+
25+ @if (item == lastModel )
26+ {
27+ if (draggingModel is not null )
28+ {
29+ < div @ondrop = " () => HandleDrop(item)" @key = " item" class = " h-10 bg-transparent w-full
30+ @(item .IsDragOver ? " border-t-4 border-red-500" : " " " >
31+ < / div >
32+ }
33+ }
34+ else
35+ {
36+ <div class =" bg-sky-800 py-3 rounded-xl px-2"
37+ <div class =" bg-indigo-800 py-5 mx-2 px-2 rounded-xl" @item.Name </div >
38+ <div >Part of content .. .</div >
39+ </div >
40+ }
41+
42+ @if (draggingModel is not null )
43+ { // for explanation why we need this overlay, see Example2
44+ div class =" bg-neutral-500/20 absolute inset-0 w-full h-full @(item.IsDragOver ? " border-t-4 border-red-500 " : " " )"
45+ @ondrop =" () => HandleDrop(item)"
46+ @ondragenter =" @(() => { item.IsDragOver = true; Console.WriteLine($" Drag Enter {item.Name} " ); })"
47+ @ondragleave =" @(() => { item.IsDragOver = false; Console.WriteLine($" Drag Leave {item.Name} " ); })"
48+ </div >
49+ }
50+
51+ </li >
52+ }
53+ </ul >
4754</div >
4855
4956@code
5057{
51- private List <Model > Models { get ; } = [];
52-
53- private class Model
54- {
55- public int Order { get ; set ; }
56- public string Name { get ; set ; } = " "
57- public bool IsDragOver { get ; set ; }
58- }
59-
60- protected override void OnInitialized ()
61- { // fill names wit "random" string
62- for (var i = 0 ; i < 10 ; i ++ )
63- {
64- Model m = new () { Order = i , Name = $" Item {i }"
65- Models .Add (m );
66- }
67- Models .Add (new (){ Order = int . MaxValue } );
68- base .OnInitialized ();
69- }
70-
71- private void HandleDrop (Model landingModel )
72- { // landing model -> where the drag happened
73- if (draggingModel is null ) return ;
74- if ( landingModel . Order == int . MaxValue )
75- {
76-
77- }
78- int originalOrderLanding = landingModel .Order ;// keep the original order for later
79- // increase model uned by 1
80- Models .Where (x => x .Order >= landingModel . Order ).ToList (). ForEach ( x => x . Order ++ );
81- draggingModel . Order = originalOrderLanding ; // replace landing model
82- int ii = 0 ;
83- foreach ( var model in Models . OrderBy ( x => x . Order ). ToList ())
84- {
85- model .Order = ii ++ ;// keep the numbers from 0 to size- 1
86- model . IsDragOver = false ; // remove drag over.
87- }
88- }
89-
90- private Model ? draggingModel ;// the model that is being dragged
58+ private List <Model > Models { get ; } = [];
59+
60+ private class Model
61+ {
62+ public int Order { get ; set ; }
63+ public string Name { get ; set ; } = " "
64+ public bool IsDragOver { get ; set ; }
65+ }
66+
67+ protected override void OnInitialized ()
68+ { // fill names wit "random" string
69+ for (var i = 0 ; i < 10 ; i ++ )
70+ {
71+ Model m = new () { Order = i , Name = $" Item {i }"
72+ Models .Add (m );
73+ }
74+ Models .Add (lastModel );
75+ base .OnInitialized ();
76+ }
77+
78+ private void HandleDrop (Model landingModel )
79+ { // landing model -> where the drag happened
80+ if (draggingModel is null ) return ;
81+
82+ int originalOrderLanding = landingModel . Order ; // keep the original order for later
83+
84+ Models . Where ( x => x . Order >= landingModel . Order ). ToList (). ForEach ( x => x . Order ++ );
85+ draggingModel .Order = originalOrderLanding ;// replace landing model
86+ int ii = 0 ;
87+ foreach ( var model in Models .OrderBy (x => x .Order ).ToList ())
88+ {
89+ model . Order = ii ++ ; // keep the numbers from 0 to size-1
90+ model . IsDragOver = false ; // remove drag over.
91+ }
92+ lastModel .Order = int . MaxValue - 1 ;// keep it on the end, but with option to + 1
93+ }
94+
95+ private Model ? draggingModel ; // the model that is being dragged
96+
97+ readonly Model lastModel = new () { Order = int . MaxValue - 1 } ;// minus 1, because HandeDrop increases the order by 1.
9198}
0 commit comments