svelte-dnd-action simple example with animation • Playground • Svelte

Skip to main content

App.svelte

<style>

div {

height: 1.5em;

width: 10em;

text-align: center;

border: 1px solid black;

margin: 0.2em;

padding: 0.3em;

}

</style>

<script>

import {dndzone} from 'svelte-dnd-action';

import {flip} from 'svelte/animate';

const flipDurationMs = 200;

function handleSort(e) {

items = e.detail.items;

}

let items = [

{id:1, title: 'I'},

{id:2, title: 'Am'},

{id:3, title: 'Yoda'}

];

</script>

<section use:dndzone={{items, flipDurationMs}} on:consider={handleSort} on:finalize={handleSort}>

{#each items as item(item.id)}

<div animate:flip={{duration:flipDurationMs}}>

{item.title}

</div>

{/each}

</section>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

import { dndzone } from 'svelte-dnd-action';

import { flip } from 'svelte/animate';

var root_1 = $.template(`<div class="svelte-qv3h5p"> </div>`);

var root = $.template(`<section></section>`);

export default function App($$anchor) {

const flipDurationMs = 200;

function handleSort(e) {

$.set(items, e.detail.items);

}

let items = $.mutable_state([

{ id: 1, title: 'I' },

{ id: 2, title: 'Am' },

{ id: 3, title: 'Yoda' }

]);

var section = root();

$.each(section, 13, () => $.get(items), (item) => item.id, ($$anchor, item) => {

var div = root_1();

var text = $.child(div, true);

$.reset(div);

$.template_effect(() => $.set_text(text, $.get(item).title));

$.animation(div, () => flip, () => ({ duration: flipDurationMs }));

$.append($$anchor, div);

});

$.reset(section);

$.action(section, ($$node, $$action_arg) => dndzone?.($$node, $$action_arg), () => ({ items: $.get(items), flipDurationMs }));

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

div.svelte-qv3h5p {

height: 1.5em;

width: 10em;

text-align: center;

border: 1px solid black;

margin: 0.2em;

padding: 0.3em;

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 0
end: 142
attributes: []
children: [...] (1)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 9
end: 12
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 9
end: 12
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "div"
start: 9
end: 12
 }
 ]
start: 9
end: 12
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 13
end: 133
children: [...] (6)
  Declaration {...}
 type: "Declaration"
start: 17
end: 30
property: "height"
value: "1.5em"
 }
 Declaration {...}
 type: "Declaration"
start: 34
end: 45
property: "width"
value: "10em"
 }
 Declaration {...}
 type: "Declaration"
start: 49
end: 67
property: "text-align"
value: "center"
 }
 Declaration {...}
 type: "Declaration"
start: 71
end: 94
property: "border"
value: "1px solid black"
 }
 Declaration {...}
 type: "Declaration"
start: 98
end: 111
property: "margin"
value: "0.2em"
 }
 Declaration {...}
 type: "Declaration"
start: 115
end: 129
property: "padding"
value: "0.3em"
 }
 ]
 }
start: 9
end: 133
 }
 ]
content:  {...}
 start: 7
end: 134
styles: "\n\tdiv {\n\t\theight: 1.5em;\n\t\twidth: 10em;\n\t\ttext-align: center;\n\t\tborder: 1px solid black;\n\t\tmargin: 0.2em;\n\t\tpadding: 0.3em;\n\t}\n"
comment: null
 }
 }
js: []
start: 143
end: 640
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 142
end: 143
raw: "\n"
data: "\n"
 }
 Text {...}
 type: "Text"
start: 415
end: 416
raw: "\n"
data: "\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 416
end: 640
name: "section"
attributes: [...] (3)
  UseDirective {...}
 start: 425
end: 462
type: "UseDirective"
name: "dndzone"
expression: ObjectExpression {...}
 type: "ObjectExpression"
start: 438
end: 461
loc:  {...}
 start:  {...}
 line: 24
column: 22
 }
end:  {...}
 line: 24
column: 45
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 439
end: 444
loc:  {...}
 start:  {...}
 line: 24
column: 23
 }
end:  {...}
 line: 24
column: 28
 }
 }
method: false
shorthand: true
computed: false
key: Identifier {...}
 type: "Identifier"
start: 439
end: 444
loc:  {...}
 start:  {...}
 line: 24
column: 23
 }
end:  {...}
 line: 24
column: 28
 }
 }
name: "items"
 }
kind: "init"
value: Identifier {...}
 type: "Identifier"
start: 439
end: 444
loc:  {...}
 start:  {...}
 line: 24
column: 23
 }
end:  {...}
 line: 24
column: 28
 }
 }
name: "items"
 }
 }
 Property {...}
 type: "Property"
start: 446
end: 460
loc:  {...}
 start:  {...}
 line: 24
column: 30
 }
end:  {...}
 line: 24
column: 44
 }
 }
method: false
shorthand: true
computed: false
key: Identifier {...}
 type: "Identifier"
start: 446
end: 460
loc:  {...}
 start:  {...}
 line: 24
column: 30
 }
end:  {...}
 line: 24
column: 44
 }
 }
name: "flipDurationMs"
 }
kind: "init"
value: Identifier {...}
 type: "Identifier"
start: 446
end: 460
loc:  {...}
 start:  {...}
 line: 24
column: 30
 }
end:  {...}
 line: 24
column: 44
 }
 }
name: "flipDurationMs"
 }
 }
 ]
 }
modifiers: []
 }
 OnDirective {...}
 start: 463
end: 487
type: "OnDirective"
name: "consider"
expression: Identifier {...}
 type: "Identifier"
start: 476
end: 486
loc:  {...}
 start:  {...}
 line: 24
column: 60
 }
end:  {...}
 line: 24
column: 70
 }
 }
name: "handleSort"
 }
modifiers: []
 }
 OnDirective {...}
 start: 488
end: 512
type: "OnDirective"
name: "finalize"
expression: Identifier {...}
 type: "Identifier"
start: 501
end: 511
loc:  {...}
 start:  {...}
 line: 24
column: 85
 }
end:  {...}
 line: 24
column: 95
 }
 }
name: "handleSort"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 513
end: 515
raw: "\n\t"
data: "\n\t"
 }
 EachBlock {...}
 type: "EachBlock"
start: 515
end: 629
expression: Identifier {...}
 type: "Identifier"
start: 522
end: 527
loc:  {...}
 start:  {...}
 line: 25
column: 8
 }
end:  {...}
 line: 25
column: 13
 }
 }
name: "items"
 }
body: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 545
end: 548
raw: "\n\t\t"
data: "\n\t\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 548
end: 620
name: "div"
attributes: [...] (2)
  AnimateDirective {...}
 start: 553
end: 593
type: "AnimateDirective"
name: "flip"
expression: ObjectExpression {...}
 type: "ObjectExpression"
start: 567
end: 592
loc:  {...}
 start:  {...}
 line: 26
column: 21
 }
end:  {...}
 line: 26
column: 46
 }
 }
properties: [...] (1)
  Property {...}
 type: "Property"
start: 568
end: 591
loc:  {...}
 start:  {...}
 line: 26
column: 22
 }
end:  {...}
 line: 26
column: 45
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 568
end: 576
loc:  {...}
 start:  {...}
 line: 26
column: 22
 }
end:  {...}
 line: 26
column: 30
 }
 }
name: "duration"
 }
value: Identifier {...}
 type: "Identifier"
start: 577
end: 591
loc:  {...}
 start:  {...}
 line: 26
column: 31
 }
end:  {...}
 line: 26
column: 45
 }
 }
name: "flipDurationMs"
 }
kind: "init"
 }
 ]
 }
modifiers: []
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 594
end: 598
raw: "\n\t\t\t"
data: "\n\t\t\t"
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 598
end: 610
expression: MemberExpression {...}
 type: "MemberExpression"
start: 599
end: 609
loc:  {...}
 start:  {...}
 line: 27
column: 4
 }
end:  {...}
 line: 27
column: 14
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 599
end: 603
loc:  {...}
 start:  {...}
 line: 27
column: 4
 }
end:  {...}
 line: 27
column: 8
 }
 }
name: "item"
 }
property: Identifier {...}
 type: "Identifier"
start: 604
end: 609
loc:  {...}
 start:  {...}
 line: 27
column: 9
 }
end:  {...}
 line: 27
column: 14
 }
 }
name: "title"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 610
end: 614
raw: "\t\n\t\t"
data: "\t\n\t\t"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 620
end: 622
raw: "\n\t"
data: "\n\t"
 }
 ]
 }
context: Identifier {...}
 type: "Identifier"
name: "item"
start: 531
loc:  {...}
 start:  {...}
 line: 25
column: 17
character: 531
 }
end:  {...}
 line: 25
column: 21
character: 535
 }
 }
end: 535
typeAnnotation: undefined
 }
index: undefined
key: MemberExpression {...}
 type: "MemberExpression"
start: 536
end: 543
loc:  {...}
 start:  {...}
 line: 25
column: 22
 }
end:  {...}
 line: 25
column: 29
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 536
end: 540
loc:  {...}
 start:  {...}
 line: 25
column: 22
 }
end:  {...}
 line: 25
column: 26
 }
 }
name: "item"
 }
property: Identifier {...}
 type: "Identifier"
start: 541
end: 543
loc:  {...}
 start:  {...}
 line: 25
column: 27
 }
end:  {...}
 line: 25
column: 29
 }
 }
name: "id"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 629
end: 630
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 143
end: 415
context: "default"
content: Program {...}
 type: "Program"
start: 151
end: 406
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 23
column: 0
 }
 }
body: [...] (5)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 153
end: 195
loc:  {...}
 start:  {...}
 line: 12
column: 1
 }
end:  {...}
 line: 12
column: 43
 }
 }
specifiers: [...] (1)
  ImportSpecifier {...}
 type: "ImportSpecifier"
start: 161
end: 168
loc:  {...}
 start:  {...}
 line: 12
column: 9
 }
end:  {...}
 line: 12
column: 16
 }
 }
imported: Identifier {...}
 type: "Identifier"
start: 161
end: 168
loc:  {...}
 start:  {...}
 line: 12
column: 9
 }
end:  {...}
 line: 12
column: 16
 }
 }
name: "dndzone"
 }
local: Identifier {...}
 type: "Identifier"
start: 161
end: 168
loc:  {...}
 start:  {...}
 line: 12
column: 9
 }
end:  {...}
 line: 12
column: 16
 }
 }
name: "dndzone"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 175
end: 194
loc:  {...}
 start:  {...}
 line: 12
column: 23
 }
end:  {...}
 line: 12
column: 42
 }
 }
value: "svelte-dnd-action"
raw: "'svelte-dnd-action'"
 }
 }
 ImportDeclaration {...}
 type: "ImportDeclaration"
start: 197
end: 233
loc:  {...}
 start:  {...}
 line: 13
column: 1
 }
end:  {...}
 line: 13
column: 37
 }
 }
specifiers: [...] (1)
  ImportSpecifier {...}
 type: "ImportSpecifier"
start: 205
end: 209
loc:  {...}
 start:  {...}
 line: 13
column: 9
 }
end:  {...}
 line: 13
column: 13
 }
 }
imported: Identifier {...}
 type: "Identifier"
start: 205
end: 209
loc:  {...}
 start:  {...}
 line: 13
column: 9
 }
end:  {...}
 line: 13
column: 13
 }
 }
name: "flip"
 }
local: Identifier {...}
 type: "Identifier"
start: 205
end: 209
loc:  {...}
 start:  {...}
 line: 13
column: 9
 }
end:  {...}
 line: 13
column: 13
 }
 }
name: "flip"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 216
end: 232
loc:  {...}
 start:  {...}
 line: 13
column: 20
 }
end:  {...}
 line: 13
column: 36
 }
 }
value: "svelte/animate"
raw: "'svelte/animate'"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 235
end: 262
loc:  {...}
 start:  {...}
 line: 14
column: 1
 }
end:  {...}
 line: 14
column: 28
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 241
end: 261
loc:  {...}
 start:  {...}
 line: 14
column: 7
 }
end:  {...}
 line: 14
column: 27
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 241
end: 255
loc:  {...}
 start:  {...}
 line: 14
column: 7
 }
end:  {...}
 line: 14
column: 21
 }
 }
name: "flipDurationMs"
 }
init: Literal {...}
 type: "Literal"
start: 258
end: 261
loc:  {...}
 start:  {...}
 line: 14
column: 24
 }
end:  {...}
 line: 14
column: 27
 }
 }
value: 200
raw: "200"
 }
 }
 ]
kind: "const"
 }
 FunctionDeclaration {...}
 type: "FunctionDeclaration"
start: 264
end: 317
loc:  {...}
 start:  {...}
 line: 15
column: 1
 }
end:  {...}
 line: 17
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 273
end: 283
loc:  {...}
 start:  {...}
 line: 15
column: 10
 }
end:  {...}
 line: 15
column: 20
 }
 }
name: "handleSort"
 }
expression: false
generator: false
async: false
params: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 284
end: 285
loc:  {...}
 start:  {...}
 line: 15
column: 21
 }
end:  {...}
 line: 15
column: 22
 }
 }
name: "e"
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 287
end: 317
loc:  {...}
 start:  {...}
 line: 15
column: 24
 }
end:  {...}
 line: 17
column: 2
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 291
end: 314
loc:  {...}
 start:  {...}
 line: 16
column: 2
 }
end:  {...}
 line: 16
column: 25
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 291
end: 313
loc:  {...}
 start:  {...}
 line: 16
column: 2
 }
end:  {...}
 line: 16
column: 24
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 291
end: 296
loc:  {...}
 start:  {...}
 line: 16
column: 2
 }
end:  {...}
 line: 16
column: 7
 }
 }
name: "items"
 }
right: MemberExpression {...}
 type: "MemberExpression"
start: 299
end: 313
loc:  {...}
 start:  {...}
 line: 16
column: 10
 }
end:  {...}
 line: 16
column: 24
 }
 }
object: MemberExpression {...}
 type: "MemberExpression"
start: 299
end: 307
loc:  {...}
 start:  {...}
 line: 16
column: 10
 }
end:  {...}
 line: 16
column: 18
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 299
end: 300
loc:  {...}
 start:  {...}
 line: 16
column: 10
 }
end:  {...}
 line: 16
column: 11
 }
 }
name: "e"
 }
property: Identifier {...}
 type: "Identifier"
start: 301
end: 307
loc:  {...}
 start:  {...}
 line: 16
column: 12
 }
end:  {...}
 line: 16
column: 18
 }
 }
name: "detail"
 }
computed: false
optional: false
 }
property: Identifier {...}
 type: "Identifier"
start: 308
end: 313
loc:  {...}
 start:  {...}
 line: 16
column: 19
 }
end:  {...}
 line: 16
column: 24
 }
 }
name: "items"
 }
computed: false
optional: false
 }
 }
 }
 ]
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 319
end: 405
loc:  {...}
 start:  {...}
 line: 18
column: 1
 }
end:  {...}
 line: 22
column: 3
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 323
end: 404
loc:  {...}
 start:  {...}
 line: 18
column: 5
 }
end:  {...}
 line: 22
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 323
end: 328
loc:  {...}
 start:  {...}
 line: 18
column: 5
 }
end:  {...}
 line: 18
column: 10
 }
 }
name: "items"
 }
init: ArrayExpression {...}
 type: "ArrayExpression"
start: 331
end: 404
loc:  {...}
 start:  {...}
 line: 18
column: 13
 }
end:  {...}
 line: 22
column: 2
 }
 }
elements: [...] (3)
  ObjectExpression {...}
 type: "ObjectExpression"
start: 335
end: 353
loc:  {...}
 start:  {...}
 line: 19
column: 2
 }
end:  {...}
 line: 19
column: 20
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 336
end: 340
loc:  {...}
 start:  {...}
 line: 19
column: 3
 }
end:  {...}
 line: 19
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 336
end: 338
loc:  {...}
 start:  {...}
 line: 19
column: 3
 }
end:  {...}
 line: 19
column: 5
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 339
end: 340
loc:  {...}
 start:  {...}
 line: 19
column: 6
 }
end:  {...}
 line: 19
column: 7
 }
 }
value: 1
raw: "1"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 342
end: 352
loc:  {...}
 start:  {...}
 line: 19
column: 9
 }
end:  {...}
 line: 19
column: 19
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 342
end: 347
loc:  {...}
 start:  {...}
 line: 19
column: 9
 }
end:  {...}
 line: 19
column: 14
 }
 }
name: "title"
 }
value: Literal {...}
 type: "Literal"
start: 349
end: 352
loc:  {...}
 start:  {...}
 line: 19
column: 16
 }
end:  {...}
 line: 19
column: 19
 }
 }
value: "I"
raw: "'I'"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 357
end: 376
loc:  {...}
 start:  {...}
 line: 20
column: 2
 }
end:  {...}
 line: 20
column: 21
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 358
end: 362
loc:  {...}
 start:  {...}
 line: 20
column: 3
 }
end:  {...}
 line: 20
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 358
end: 360
loc:  {...}
 start:  {...}
 line: 20
column: 3
 }
end:  {...}
 line: 20
column: 5
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 361
end: 362
loc:  {...}
 start:  {...}
 line: 20
column: 6
 }
end:  {...}
 line: 20
column: 7
 }
 }
value: 2
raw: "2"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 364
end: 375
loc:  {...}
 start:  {...}
 line: 20
column: 9
 }
end:  {...}
 line: 20
column: 20
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 364
end: 369
loc:  {...}
 start:  {...}
 line: 20
column: 9
 }
end:  {...}
 line: 20
column: 14
 }
 }
name: "title"
 }
value: Literal {...}
 type: "Literal"
start: 371
end: 375
loc:  {...}
 start:  {...}
 line: 20
column: 16
 }
end:  {...}
 line: 20
column: 20
 }
 }
value: "Am"
raw: "'Am'"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 380
end: 401
loc:  {...}
 start:  {...}
 line: 21
column: 2
 }
end:  {...}
 line: 21
column: 23
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 381
end: 385
loc:  {...}
 start:  {...}
 line: 21
column: 3
 }
end:  {...}
 line: 21
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 381
end: 383
loc:  {...}
 start:  {...}
 line: 21
column: 3
 }
end:  {...}
 line: 21
column: 5
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 384
end: 385
loc:  {...}
 start:  {...}
 line: 21
column: 6
 }
end:  {...}
 line: 21
column: 7
 }
 }
value: 3
raw: "3"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 387
end: 400
loc:  {...}
 start:  {...}
 line: 21
column: 9
 }
end:  {...}
 line: 21
column: 22
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 387
end: 392
loc:  {...}
 start:  {...}
 line: 21
column: 9
 }
end:  {...}
 line: 21
column: 14
 }
 }
name: "title"
 }
value: Literal {...}
 type: "Literal"
start: 394
end: 400
loc:  {...}
 start:  {...}
 line: 21
column: 16
 }
end:  {...}
 line: 21
column: 22
 }
 }
value: "Yoda"
raw: "'Yoda'"
 }
kind: "init"
 }
 ]
 }
 ]
 }
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern

svelte-dnd-action simple example with animation • Playground • Svelte