now you can move names from one list to another using drag!
This commit is contained in:
parent
70c9a703c5
commit
a7fa6d620e
6 changed files with 150 additions and 52 deletions
|
|
@ -9,6 +9,10 @@
|
||||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap"
|
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
|
<script
|
||||||
|
src="https://drag-drop-touch-js.github.io/dragdroptouch/dist/drag-drop-touch.esm.min.js"
|
||||||
|
type="module"
|
||||||
|
></script>
|
||||||
</head>
|
</head>
|
||||||
<body style="height: 100%; margin: 0; padding: 0">
|
<body style="height: 100%; margin: 0; padding: 0">
|
||||||
<div id="app" style="height: 100%"></div>
|
<div id="app" style="height: 100%"></div>
|
||||||
|
|
|
||||||
20
package-lock.json
generated
20
package-lock.json
generated
|
|
@ -9,7 +9,9 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chart.js": "^4.4.9",
|
"chart.js": "^4.4.9",
|
||||||
|
"drag-drop-touch": "^1.3.1",
|
||||||
"random-words": "^2.0.1",
|
"random-words": "^2.0.1",
|
||||||
|
"svelte-drag-drop-touch": "^0.1.9",
|
||||||
"svelte-spa-router": "^4.0.1",
|
"svelte-spa-router": "^4.0.1",
|
||||||
"word-exists": "^1.0.0"
|
"word-exists": "^1.0.0"
|
||||||
},
|
},
|
||||||
|
|
@ -862,6 +864,16 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/drag-drop-touch": {
|
||||||
|
"version": "1.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/drag-drop-touch/-/drag-drop-touch-1.3.1.tgz",
|
||||||
|
"integrity": "sha512-Q0/ZgsnW7VUjn+YqSnp1rvxjjPnZX5YLyVaw28einood+eTMcLzgOgHk8nyqIF9O18J68l+2htlEnbw5GsyTvQ=="
|
||||||
|
},
|
||||||
|
"node_modules/dragdroptouch-bug-fixed": {
|
||||||
|
"version": "1.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/dragdroptouch-bug-fixed/-/dragdroptouch-bug-fixed-1.0.8.tgz",
|
||||||
|
"integrity": "sha512-moNgBeWMeUk4zhV3B+a4TZUPmHVJz+cvjWEXENLEU3toVnm3lpS+ZkSwVbBxArDUQ8HSm1qA0UmKWWy1y7nvng=="
|
||||||
|
},
|
||||||
"node_modules/esbuild": {
|
"node_modules/esbuild": {
|
||||||
"version": "0.25.1",
|
"version": "0.25.1",
|
||||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
|
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
|
||||||
|
|
@ -1143,6 +1155,14 @@
|
||||||
"node": ">=18"
|
"node": ">=18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/svelte-drag-drop-touch": {
|
||||||
|
"version": "0.1.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/svelte-drag-drop-touch/-/svelte-drag-drop-touch-0.1.9.tgz",
|
||||||
|
"integrity": "sha512-DWAMC+6xBRkl5OuVR7ze+znSKERlX9t9cx4/kzoWOnPwLFvv4g8YTtQxmO8wfWfETi9qgg/cnw58gmhZKY9vyw==",
|
||||||
|
"dependencies": {
|
||||||
|
"dragdroptouch-bug-fixed": "^1.0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/svelte-spa-router": {
|
"node_modules/svelte-spa-router": {
|
||||||
"version": "4.0.1",
|
"version": "4.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chart.js": "^4.4.9",
|
"chart.js": "^4.4.9",
|
||||||
|
"drag-drop-touch": "^1.3.1",
|
||||||
"random-words": "^2.0.1",
|
"random-words": "^2.0.1",
|
||||||
"svelte-spa-router": "^4.0.1",
|
"svelte-spa-router": "^4.0.1",
|
||||||
"word-exists": "^1.0.0"
|
"word-exists": "^1.0.0"
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,108 @@
|
||||||
<script>
|
<script context="module">
|
||||||
import { RandomNamesState } from "./main.svelte";
|
import { RandomNamesState } from "./main.svelte";
|
||||||
|
|
||||||
|
let DragTempName = "na";
|
||||||
|
|
||||||
|
import "drag-drop-touch";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="root">
|
<div id="root">
|
||||||
<div id="NotSelectedYet">
|
<div
|
||||||
|
id="NotSelectedYet"
|
||||||
|
on:dragover|preventDefault
|
||||||
|
role="list"
|
||||||
|
aria-label="drag name to this list!"
|
||||||
|
on:drop={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
if (DragTempName !== "na") {
|
||||||
|
RandomNamesState.NotSelectedYet.push(DragTempName);
|
||||||
|
DragTempName = "na";
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<h1>Not Selected Yet</h1>
|
<h1>Not Selected Yet</h1>
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
{#each RandomNamesState.NotSelectedYet as name}
|
{#each RandomNamesState.NotSelectedYet as name, i}
|
||||||
<span draggable="true" class="NotSelectedYet">
|
<span
|
||||||
|
class="NotSelectedYet"
|
||||||
|
draggable="true"
|
||||||
|
role="listitem"
|
||||||
|
aria-label="drag name to different list!"
|
||||||
|
on:dragstart={() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
RandomNamesState.NotSelectedYet.splice(i, 1);
|
||||||
|
DragTempName = name;
|
||||||
|
}, 100);
|
||||||
|
}}
|
||||||
|
>
|
||||||
{name}
|
{name}
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div id="Selected">
|
<div
|
||||||
|
id="Selected"
|
||||||
|
on:dragover|preventDefault
|
||||||
|
role="list"
|
||||||
|
aria-label="drag name to this list!"
|
||||||
|
on:drop={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
if (DragTempName !== "na") {
|
||||||
|
RandomNamesState.Selected.push(DragTempName);
|
||||||
|
DragTempName = "na";
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<h1>Selected</h1>
|
<h1>Selected</h1>
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
{#each RandomNamesState.Selected as name}
|
{#each RandomNamesState.Selected as name, i}
|
||||||
<span draggable="true" class="Selected">
|
<span
|
||||||
|
class="Selected"
|
||||||
|
draggable="true"
|
||||||
|
role="listitem"
|
||||||
|
aria-label="drag name to different list!"
|
||||||
|
on:dragstart={() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
RandomNamesState.Selected.splice(i, 1);
|
||||||
|
DragTempName = name;
|
||||||
|
}, 100);
|
||||||
|
}}
|
||||||
|
>
|
||||||
{name}
|
{name}
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div id="Absent">
|
<div
|
||||||
|
id="Absent"
|
||||||
|
on:dragover|preventDefault
|
||||||
|
role="list"
|
||||||
|
aria-label="drag name to this list!"
|
||||||
|
on:drop={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
if (DragTempName !== "na") {
|
||||||
|
RandomNamesState.Absent.push(DragTempName);
|
||||||
|
DragTempName = "na";
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<h1>Absent</h1>
|
<h1>Absent</h1>
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
{#each RandomNamesState.Absent as name}
|
{#each RandomNamesState.Absent as name, i}
|
||||||
<span draggable="true" class="Absent">
|
<span
|
||||||
|
draggable="true"
|
||||||
|
class="Absent"
|
||||||
|
role="listitem"
|
||||||
|
aria-label="drag name to different list!"
|
||||||
|
on:dragstart={() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
RandomNamesState.Absent.splice(i, 1);
|
||||||
|
DragTempName = name;
|
||||||
|
}, 100);
|
||||||
|
}}
|
||||||
|
>
|
||||||
{name}
|
{name}
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
||||||
|
|
@ -6,48 +6,48 @@
|
||||||
console.log("Edit list of names");
|
console.log("Edit list of names");
|
||||||
}
|
}
|
||||||
|
|
||||||
export let RandomNamesState = $state({
|
export let RandomNamesState = $state({
|
||||||
NotSelectedYet: [
|
NotSelectedYet: [
|
||||||
"John",
|
"John",
|
||||||
"Jane",
|
"Jane",
|
||||||
"Alice",
|
"Alice",
|
||||||
"Bob",
|
"Bob",
|
||||||
"Charlie",
|
"Charlie",
|
||||||
"Diana",
|
"Diana",
|
||||||
"Eve",
|
"Eve",
|
||||||
"Frank",
|
"Frank",
|
||||||
"Grace",
|
"Grace",
|
||||||
"Hank",
|
"Hank",
|
||||||
],
|
],
|
||||||
Selected: [
|
Selected: [
|
||||||
"John",
|
"John",
|
||||||
"Jane",
|
"Jane",
|
||||||
"Alice",
|
"Alice",
|
||||||
"Bob",
|
"Bob",
|
||||||
"Charlie",
|
"Charlie",
|
||||||
"Diana",
|
"Diana",
|
||||||
"Eve",
|
"Eve",
|
||||||
"Frank",
|
"Frank",
|
||||||
"Grace",
|
"Grace",
|
||||||
"Hank",
|
"Hank",
|
||||||
],
|
],
|
||||||
Absent: [
|
Absent: [
|
||||||
"John",
|
"John",
|
||||||
"Jane",
|
"Jane",
|
||||||
"Alice",
|
"Alice",
|
||||||
"Bob",
|
"Bob",
|
||||||
"Charlie",
|
"Charlie",
|
||||||
"Diana",
|
"Diana",
|
||||||
"Eve",
|
"Eve",
|
||||||
"Frank",
|
"Frank",
|
||||||
"Grace",
|
"Grace",
|
||||||
"Hank",
|
"Hank",
|
||||||
],
|
],
|
||||||
selectedStudent: "none :(",
|
selectedStudent: "none :(",
|
||||||
});
|
});
|
||||||
|
|
||||||
export function SelectStudent() {
|
export function SelectStudent() {
|
||||||
if (RandomNamesState.NotSelectedYet.length > 0) {
|
if (RandomNamesState.NotSelectedYet.length != 0) {
|
||||||
let randomIndex = Math.floor(
|
let randomIndex = Math.floor(
|
||||||
Math.random() * RandomNamesState.NotSelectedYet.length
|
Math.random() * RandomNamesState.NotSelectedYet.length
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,9 @@
|
||||||
|
|
||||||
<div id="root">
|
<div id="root">
|
||||||
<p>The Selected Student is</p>
|
<p>The Selected Student is</p>
|
||||||
<p>thier name has bean auto moved to the Selected list</p>
|
|
||||||
|
|
||||||
<h1>{RandomNamesState.selectedStudent}</h1>
|
<h1>{RandomNamesState.selectedStudent}</h1>
|
||||||
|
<p>(The Selected Student's name will be auto moved to the Selected list)</p>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
aria-label="Back to main menu"
|
aria-label="Back to main menu"
|
||||||
onclick={() => {
|
onclick={() => {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue