Vue DnD Kit

Appearance

Performance ​

Vue DnD Kit is designed to stay fast at scale. Use the controls below to load up to 5 000 items and compare two rendering strategies.

Demo ​

Items
Mode
500Total items
500DOM nodes
—FPS
Item 11
Item 22
Item 33
Item 44
Item 55
Item 66
Item 77
Item 88
Item 99
Item 1010
Item 1111
Item 1212
Item 1313
Item 1414
Item 1515
Item 1616
Item 1717
Item 1818
Item 1919
Item 2020
Item 2121
Item 2222
Item 2323
Item 2424
Item 2525
Item 2626
Item 2727
Item 2828
Item 2929
Item 3030
Item 3131
Item 3232
Item 3333
Item 3434
Item 3535
Item 3636
Item 3737
Item 3838
Item 3939
Item 4040
Item 4141
Item 4242
Item 4343
Item 4444
Item 4545
Item 4646
Item 4747
Item 4848
Item 4949
Item 5050
Item 5151
Item 5252
Item 5353
Item 5454
Item 5555
Item 5656
Item 5757
Item 5858
Item 5959
Item 6060
Item 6161
Item 6262
Item 6363
Item 6464
Item 6565
Item 6666
Item 6767
Item 6868
Item 6969
Item 7070
Item 7171
Item 7272
Item 7373
Item 7474
Item 7575
Item 7676
Item 7777
Item 7878
Item 7979
Item 8080
Item 8181
Item 8282
Item 8383
Item 8484
Item 8585
Item 8686
Item 8787
Item 8888
Item 8989
Item 9090
Item 9191
Item 9292
Item 9393
Item 9494
Item 9595
Item 9696
Item 9797
Item 9898
Item 9999
Item 100100
Item 101101
Item 102102
Item 103103
Item 104104
Item 105105
Item 106106
Item 107107
Item 108108
Item 109109
Item 110110
Item 111111
Item 112112
Item 113113
Item 114114
Item 115115
Item 116116
Item 117117
Item 118118
Item 119119
Item 120120
Item 121121
Item 122122
Item 123123
Item 124124
Item 125125
Item 126126
Item 127127
Item 128128
Item 129129
Item 130130
Item 131131
Item 132132
Item 133133
Item 134134
Item 135135
Item 136136
Item 137137
Item 138138
Item 139139
Item 140140
Item 141141
Item 142142
Item 143143
Item 144144
Item 145145
Item 146146
Item 147147
Item 148148
Item 149149
Item 150150
Item 151151
Item 152152
Item 153153
Item 154154
Item 155155
Item 156156
Item 157157
Item 158158
Item 159159
Item 160160
Item 161161
Item 162162
Item 163163
Item 164164
Item 165165
Item 166166
Item 167167
Item 168168
Item 169169
Item 170170
Item 171171
Item 172172
Item 173173
Item 174174
Item 175175
Item 176176
Item 177177
Item 178178
Item 179179
Item 180180
Item 181181
Item 182182
Item 183183
Item 184184
Item 185185
Item 186186
Item 187187
Item 188188
Item 189189
Item 190190
Item 191191
Item 192192
Item 193193
Item 194194
Item 195195
Item 196196
Item 197197
Item 198198
Item 199199
Item 200200
Item 201201
Item 202202
Item 203203
Item 204204
Item 205205
Item 206206
Item 207207
Item 208208
Item 209209
Item 210210
Item 211211
Item 212212
Item 213213
Item 214214
Item 215215
Item 216216
Item 217217
Item 218218
Item 219219
Item 220220
Item 221221
Item 222222
Item 223223
Item 224224
Item 225225
Item 226226
Item 227227
Item 228228
Item 229229
Item 230230
Item 231231
Item 232232
Item 233233
Item 234234
Item 235235
Item 236236
Item 237237
Item 238238
Item 239239
Item 240240
Item 241241
Item 242242
Item 243243
Item 244244
Item 245245
Item 246246
Item 247247
Item 248248
Item 249249
Item 250250
Item 251251
Item 252252
Item 253253
Item 254254
Item 255255
Item 256256
Item 257257
Item 258258
Item 259259
Item 260260
Item 261261
Item 262262
Item 263263
Item 264264
Item 265265
Item 266266
Item 267267
Item 268268
Item 269269
Item 270270
Item 271271
Item 272272
Item 273273
Item 274274
Item 275275
Item 276276
Item 277277
Item 278278
Item 279279
Item 280280
Item 281281
Item 282282
Item 283283
Item 284284
Item 285285
Item 286286
Item 287287
Item 288288
Item 289289
Item 290290
Item 291291
Item 292292
Item 293293
Item 294294
Item 295295
Item 296296
Item 297297
Item 298298
Item 299299
Item 300300
Item 301301
Item 302302
Item 303303
Item 304304
Item 305305
Item 306306
Item 307307
Item 308308
Item 309309
Item 310310
Item 311311
Item 312312
Item 313313
Item 314314
Item 315315
Item 316316
Item 317317
Item 318318
Item 319319
Item 320320
Item 321321
Item 322322
Item 323323
Item 324324
Item 325325
Item 326326
Item 327327
Item 328328
Item 329329
Item 330330
Item 331331
Item 332332
Item 333333
Item 334334
Item 335335
Item 336336
Item 337337
Item 338338
Item 339339
Item 340340
Item 341341
Item 342342
Item 343343
Item 344344
Item 345345
Item 346346
Item 347347
Item 348348
Item 349349
Item 350350
Item 351351
Item 352352
Item 353353
Item 354354
Item 355355
Item 356356
Item 357357
Item 358358
Item 359359
Item 360360
Item 361361
Item 362362
Item 363363
Item 364364
Item 365365
Item 366366
Item 367367
Item 368368
Item 369369
Item 370370
Item 371371
Item 372372
Item 373373
Item 374374
Item 375375
Item 376376
Item 377377
Item 378378
Item 379379
Item 380380
Item 381381
Item 382382
Item 383383
Item 384384
Item 385385
Item 386386
Item 387387
Item 388388
Item 389389
Item 390390
Item 391391
Item 392392
Item 393393
Item 394394
Item 395395
Item 396396
Item 397397
Item 398398
Item 399399
Item 400400
Item 401401
Item 402402
Item 403403
Item 404404
Item 405405
Item 406406
Item 407407
Item 408408
Item 409409
Item 410410
Item 411411
Item 412412
Item 413413
Item 414414
Item 415415
Item 416416
Item 417417
Item 418418
Item 419419
Item 420420
Item 421421
Item 422422
Item 423423
Item 424424
Item 425425
Item 426426
Item 427427
Item 428428
Item 429429
Item 430430
Item 431431
Item 432432
Item 433433
Item 434434
Item 435435
Item 436436
Item 437437
Item 438438
Item 439439
Item 440440
Item 441441
Item 442442
Item 443443
Item 444444
Item 445445
Item 446446
Item 447447
Item 448448
Item 449449
Item 450450
Item 451451
Item 452452
Item 453453
Item 454454
Item 455455
Item 456456
Item 457457
Item 458458
Item 459459
Item 460460
Item 461461
Item 462462
Item 463463
Item 464464
Item 465465
Item 466466
Item 467467
Item 468468
Item 469469
Item 470470
Item 471471
Item 472472
Item 473473
Item 474474
Item 475475
Item 476476
Item 477477
Item 478478
Item 479479
Item 480480
Item 481481
Item 482482
Item 483483
Item 484484
Item 485485
Item 486486
Item 487487
Item 488488
Item 489489
Item 490490
Item 491491
Item 492492
Item 493493
Item 494494
Item 495495
Item 496496
Item 497497
Item 498498
Item 499499
Item 500500

Switch between Raw and Virtualized modes, crank the count to 2 000 or 5 000, and watch the FPS counter while you drag.

Raw rendering ​

Every item is mounted as a real DOM node. Each one registers a makeDraggable observer. With 100–500 items this is perfectly smooth. At 2 000+ you may notice the frame-rate dip during fast drag moves as the browser has to hit-test thousands of elements.

ts
// All N items rendered — makeDroppable on the scroll container
const el = useTemplateRef<HTMLElement>('el');
makeDroppable(el, { events: { onDrop } }, () => items.value);
makeAutoScroll(el, { threshold: 60, speed: 1.5 });
html
<div ref="el" class="list">
  <div v-for="(item, index) in items" :key="item.id" style="height: 44px">
    <PerfItem :index="index" :items="items" :item="item" />
  </div>
</div>

Virtualized rendering ​

Only the visible slice of items is in the DOM (≈ 10–15 nodes regardless of total count). useVirtualList from VueUse handles the scroll offset math; makeDroppable and makeAutoScroll are registered on the same container ref.

ts
import { useVirtualList } from '@vueuse/core';

const ITEM_HEIGHT = 44;

const { list, containerProps, wrapperProps } = useVirtualList(
  toRef(props, 'items'),
  { itemHeight: ITEM_HEIGHT, overscan: 5 }
);

// containerProps.ref points to the scrollable element
makeDroppable(containerProps.ref, { events: { onDrop } }, () => props.items);
makeAutoScroll(containerProps.ref, { threshold: 60, speed: 1.5 });
html
<div v-bind="containerProps" class="virtual-list">
  <div v-bind="wrapperProps">
    <!--
      item.index is the REAL index in the full array.
      suggestSort uses it correctly even though only a window is rendered.
    -->
    <div
      v-for="{ data, index } in list"
      :key="data.id"
      :style="{ height: ITEM_HEIGHT + 'px' }"
    >
      <PerfItem :index="index" :items="props.items" :item="data" />
    </div>
  </div>
</div>

Key points ​

  • item.index from useVirtualList is the real index in the backing array — pass it to makeDraggable so suggestSort operates on the correct position.
  • makeDroppable is on the container, not on individual items. Hovering over a visible makeDraggable item still sets hoveredDraggable, so suggestSort('vertical') resolves correctly.
  • Pass id: item.id to makeDraggable so the library can identify the item across unmount/remount cycles. When the element scrolls back into view, drag state (including drop) is correctly transferred to the new DOM node. See Virtual lists.
  • Items that scroll out of view are unmounted and their observers cleaned up automatically. The drag ghost lives in the DnDProvider overlay so it persists even when the source element unmounts.

Source ​

Released under the MIT License.

Copyright © 2026 ZIZIGY