svelte-dnd-action simple example without 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';

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}} on:consider={handleSort} on:finalize={handleSort}>

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

<div>

{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';

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

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

export default function App($$anchor) {

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, 5, () => $.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));

$.append($$anchor, div);

});

$.reset(section);

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

$.effect(() => $.event('consider', section, handleSort));

$.effect(() => $.event('finalize', section, handleSort));

$.append($$anchor, section);

}

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: 516
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 142
end: 143
raw: "\n"
data: "\n"
 }
 Text {...}
 type: "Text"
start: 348
end: 349
raw: "\n"
data: "\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 349
end: 516
name: "section"
attributes: [...] (3)
  UseDirective {...}
 start: 358
end: 379
type: "UseDirective"
name: "dndzone"
expression: ObjectExpression {...}
 type: "ObjectExpression"
start: 371
end: 378
loc:  {...}
 start:  {...}
 line: 22
column: 22
 }
end:  {...}
 line: 22
column: 29
 }
 }
properties: [...] (1)
  Property {...}
 type: "Property"
start: 372
end: 377
loc:  {...}
 start:  {...}
 line: 22
column: 23
 }
end:  {...}
 line: 22
column: 28
 }
 }
method: false
shorthand: true
computed: false
key: Identifier {...}
 type: "Identifier"
start: 372
end: 377
loc:  {...}
 start:  {...}
 line: 22
column: 23
 }
end:  {...}
 line: 22
column: 28
 }
 }
name: "items"
 }
kind: "init"
value: Identifier {...}
 type: "Identifier"
start: 372
end: 377
loc:  {...}
 start:  {...}
 line: 22
column: 23
 }
end:  {...}
 line: 22
column: 28
 }
 }
name: "items"
 }
 }
 ]
 }
modifiers: []
 }
 OnDirective {...}
 start: 380
end: 404
type: "OnDirective"
name: "consider"
expression: Identifier {...}
 type: "Identifier"
start: 393
end: 403
loc:  {...}
 start:  {...}
 line: 22
column: 44
 }
end:  {...}
 line: 22
column: 54
 }
 }
name: "handleSort"
 }
modifiers: []
 }
 OnDirective {...}
 start: 405
end: 429
type: "OnDirective"
name: "finalize"
expression: Identifier {...}
 type: "Identifier"
start: 418
end: 428
loc:  {...}
 start:  {...}
 line: 22
column: 69
 }
end:  {...}
 line: 22
column: 79
 }
 }
name: "handleSort"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 430
end: 432
raw: "\n\t"
data: "\n\t"
 }
 EachBlock {...}
 type: "EachBlock"
start: 432
end: 505
expression: Identifier {...}
 type: "Identifier"
start: 439
end: 444
loc:  {...}
 start:  {...}
 line: 23
column: 8
 }
end:  {...}
 line: 23
column: 13
 }
 }
name: "items"
 }
body: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 462
end: 465
raw: "\n\t\t"
data: "\n\t\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 465
end: 496
name: "div"
attributes: [...] (1)
  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: 470
end: 474
raw: "\n\t\t\t"
data: "\n\t\t\t"
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 474
end: 486
expression: MemberExpression {...}
 type: "MemberExpression"
start: 475
end: 485
loc:  {...}
 start:  {...}
 line: 25
column: 4
 }
end:  {...}
 line: 25
column: 14
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 475
end: 479
loc:  {...}
 start:  {...}
 line: 25
column: 4
 }
end:  {...}
 line: 25
column: 8
 }
 }
name: "item"
 }
property: Identifier {...}
 type: "Identifier"
start: 480
end: 485
loc:  {...}
 start:  {...}
 line: 25
column: 9
 }
end:  {...}
 line: 25
column: 14
 }
 }
name: "title"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 486
end: 490
raw: "\t\n\t\t"
data: "\t\n\t\t"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 496
end: 498
raw: "\n\t"
data: "\n\t"
 }
 ]
 }
context: Identifier {...}
 type: "Identifier"
name: "item"
start: 448
loc:  {...}
 start:  {...}
 line: 23
column: 17
character: 448
 }
end:  {...}
 line: 23
column: 21
character: 452
 }
 }
end: 452
typeAnnotation: undefined
 }
index: undefined
key: MemberExpression {...}
 type: "MemberExpression"
start: 453
end: 460
loc:  {...}
 start:  {...}
 line: 23
column: 22
 }
end:  {...}
 line: 23
column: 29
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 453
end: 457
loc:  {...}
 start:  {...}
 line: 23
column: 22
 }
end:  {...}
 line: 23
column: 26
 }
 }
name: "item"
 }
property: Identifier {...}
 type: "Identifier"
start: 458
end: 460
loc:  {...}
 start:  {...}
 line: 23
column: 27
 }
end:  {...}
 line: 23
column: 29
 }
 }
name: "id"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 505
end: 506
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 143
end: 348
context: "default"
content: Program {...}
 type: "Program"
start: 151
end: 339
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 21
column: 0
 }
 }
body: [...] (3)
  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'"
 }
 }
 FunctionDeclaration {...}
 type: "FunctionDeclaration"
start: 197
end: 250
loc:  {...}
 start:  {...}
 line: 13
column: 1
 }
end:  {...}
 line: 15
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 206
end: 216
loc:  {...}
 start:  {...}
 line: 13
column: 10
 }
end:  {...}
 line: 13
column: 20
 }
 }
name: "handleSort"
 }
expression: false
generator: false
async: false
params: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 217
end: 218
loc:  {...}
 start:  {...}
 line: 13
column: 21
 }
end:  {...}
 line: 13
column: 22
 }
 }
name: "e"
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 220
end: 250
loc:  {...}
 start:  {...}
 line: 13
column: 24
 }
end:  {...}
 line: 15
column: 2
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 224
end: 247
loc:  {...}
 start:  {...}
 line: 14
column: 2
 }
end:  {...}
 line: 14
column: 25
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 224
end: 246
loc:  {...}
 start:  {...}
 line: 14
column: 2
 }
end:  {...}
 line: 14
column: 24
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 224
end: 229
loc:  {...}
 start:  {...}
 line: 14
column: 2
 }
end:  {...}
 line: 14
column: 7
 }
 }
name: "items"
 }
right: MemberExpression {...}
 type: "MemberExpression"
start: 232
end: 246
loc:  {...}
 start:  {...}
 line: 14
column: 10
 }
end:  {...}
 line: 14
column: 24
 }
 }
object: MemberExpression {...}
 type: "MemberExpression"
start: 232
end: 240
loc:  {...}
 start:  {...}
 line: 14
column: 10
 }
end:  {...}
 line: 14
column: 18
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 232
end: 233
loc:  {...}
 start:  {...}
 line: 14
column: 10
 }
end:  {...}
 line: 14
column: 11
 }
 }
name: "e"
 }
property: Identifier {...}
 type: "Identifier"
start: 234
end: 240
loc:  {...}
 start:  {...}
 line: 14
column: 12
 }
end:  {...}
 line: 14
column: 18
 }
 }
name: "detail"
 }
computed: false
optional: false
 }
property: Identifier {...}
 type: "Identifier"
start: 241
end: 246
loc:  {...}
 start:  {...}
 line: 14
column: 19
 }
end:  {...}
 line: 14
column: 24
 }
 }
name: "items"
 }
computed: false
optional: false
 }
 }
 }
 ]
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 252
end: 338
loc:  {...}
 start:  {...}
 line: 16
column: 1
 }
end:  {...}
 line: 20
column: 3
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 256
end: 337
loc:  {...}
 start:  {...}
 line: 16
column: 5
 }
end:  {...}
 line: 20
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 256
end: 261
loc:  {...}
 start:  {...}
 line: 16
column: 5
 }
end:  {...}
 line: 16
column: 10
 }
 }
name: "items"
 }
init: ArrayExpression {...}
 type: "ArrayExpression"
start: 264
end: 337
loc:  {...}
 start:  {...}
 line: 16
column: 13
 }
end:  {...}
 line: 20
column: 2
 }
 }
elements: [...] (3)
  ObjectExpression {...}
 type: "ObjectExpression"
start: 268
end: 286
loc:  {...}
 start:  {...}
 line: 17
column: 2
 }
end:  {...}
 line: 17
column: 20
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 269
end: 273
loc:  {...}
 start:  {...}
 line: 17
column: 3
 }
end:  {...}
 line: 17
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 269
end: 271
loc:  {...}
 start:  {...}
 line: 17
column: 3
 }
end:  {...}
 line: 17
column: 5
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 272
end: 273
loc:  {...}
 start:  {...}
 line: 17
column: 6
 }
end:  {...}
 line: 17
column: 7
 }
 }
value: 1
raw: "1"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 275
end: 285
loc:  {...}
 start:  {...}
 line: 17
column: 9
 }
end:  {...}
 line: 17
column: 19
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 275
end: 280
loc:  {...}
 start:  {...}
 line: 17
column: 9
 }
end:  {...}
 line: 17
column: 14
 }
 }
name: "title"
 }
value: Literal {...}
 type: "Literal"
start: 282
end: 285
loc:  {...}
 start:  {...}
 line: 17
column: 16
 }
end:  {...}
 line: 17
column: 19
 }
 }
value: "I"
raw: "'I'"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 290
end: 309
loc:  {...}
 start:  {...}
 line: 18
column: 2
 }
end:  {...}
 line: 18
column: 21
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 291
end: 295
loc:  {...}
 start:  {...}
 line: 18
column: 3
 }
end:  {...}
 line: 18
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 291
end: 293
loc:  {...}
 start:  {...}
 line: 18
column: 3
 }
end:  {...}
 line: 18
column: 5
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 294
end: 295
loc:  {...}
 start:  {...}
 line: 18
column: 6
 }
end:  {...}
 line: 18
column: 7
 }
 }
value: 2
raw: "2"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 297
end: 308
loc:  {...}
 start:  {...}
 line: 18
column: 9
 }
end:  {...}
 line: 18
column: 20
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 297
end: 302
loc:  {...}
 start:  {...}
 line: 18
column: 9
 }
end:  {...}
 line: 18
column: 14
 }
 }
name: "title"
 }
value: Literal {...}
 type: "Literal"
start: 304
end: 308
loc:  {...}
 start:  {...}
 line: 18
column: 16
 }
end:  {...}
 line: 18
column: 20
 }
 }
value: "Am"
raw: "'Am'"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 313
end: 334
loc:  {...}
 start:  {...}
 line: 19
column: 2
 }
end:  {...}
 line: 19
column: 23
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 314
end: 318
loc:  {...}
 start:  {...}
 line: 19
column: 3
 }
end:  {...}
 line: 19
column: 7
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 314
end: 316
loc:  {...}
 start:  {...}
 line: 19
column: 3
 }
end:  {...}
 line: 19
column: 5
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 317
end: 318
loc:  {...}
 start:  {...}
 line: 19
column: 6
 }
end:  {...}
 line: 19
column: 7
 }
 }
value: 3
raw: "3"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 320
end: 333
loc:  {...}
 start:  {...}
 line: 19
column: 9
 }
end:  {...}
 line: 19
column: 22
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 320
end: 325
loc:  {...}
 start:  {...}
 line: 19
column: 9
 }
end:  {...}
 line: 19
column: 14
 }
 }
name: "title"
 }
value: Literal {...}
 type: "Literal"
start: 327
end: 333
loc:  {...}
 start:  {...}
 line: 19
column: 16
 }
end:  {...}
 line: 19
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 without animation • Playground • Svelte