import { dndzone, overrideItemIdKeyNameBeforeInitialisingDndZones, setDebugMode } from 'svelte-dnd-action';

import Svelecte from 'svelecte';

import options from './colors.js';

// use in case, you items don't have 'id' property

overrideItemIdKeyNameBeforeInitialisingDndZones('value');

setDebugMode(true);

let value = [options[3], options[7]];

</script>

<p>

With support of <code>svelte-dnd-action</code> library you can reorder items. It's restricted only to given Svelecte instance.

<br>

If you would like to enable cross-instance item dragging, you need to specify the same <code style="color: red">inputId</code> property.

</p>

<fieldset>

<legend> Not shareable

</legend>

<Svelecte {options} bind:value={value} multiple {dndzone} valueAsObject placeholder="Re-order selected items by dragging"></Svelecte>

<br>

Second DND svelecte (cannot drag from one to the other)

<Svelecte {options} multiple {dndzone} placeholder="Re-order selected items by dragging"></Svelecte>

</fieldset>

<fieldset>

<legend> Shareable

</legend>

<Svelecte {options} inputId="share" value={[options[4]]} multiple {dndzone} valueAsObject placeholder="You can drag items here from 👇"></Svelecte>

<br>

<Svelecte {options} inputId="share" multiple {dndzone} placeholder="You can drag items here from 👆"></Svelecte>

</fieldset>