fix: always set draggable through `setAttribute` to avoid weird behavior (#12649)

Closes #12643

Very weird behaviour from the draggable setter...if you set element.draggable="false" it will actually set draggable to true (the boolean).

.changeset/wild-poems-design.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: always set draggable through `setAttribute` to avoid weird behavior

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -341,9 +341,10 @@ export function set_dynamic_element_attributes(node, prev, next, css_hash) {
  * because updating them through the property setter doesn't work reliably.
  * In the example of `width`/`height`, the problem is that the setter only
  * accepts numeric values, but the attribute can also be set to a string like `50%`.
- * If this list becomes too big, rethink this approach.
+ * In case of draggable trying to set `element.draggable='false'` will actually set
+ * draggable to `true`. If this list becomes too big, rethink this approach.
  */
-var always_set_through_set_attribute = ['width', 'height'];
+var always_set_through_set_attribute = ['width', 'height', 'draggable'];
 
 /** @type {Map<string, string[]>} */
 var setters_cache = new Map();

packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/_config.js

@@ -0,0 +1,17 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: `<div draggable="false"></div><div draggable="false"></div>`,
+
+	async test({ assert, target, logs }) {
+		const [div, div2] = target.querySelectorAll('div');
+		ok(div);
+		ok(div2);
+
+		assert.deepEqual(div.getAttribute('draggable'), 'false');
+		assert.deepEqual(div.draggable, false);
+		assert.deepEqual(div2.getAttribute('draggable'), 'false');
+		assert.deepEqual(div2.draggable, false);
+	}
+});

packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	let attrs = $state({ draggable: 'false' });
+</script>
+
+<svelte:element this={'div'} draggable="false"></svelte:element>
+
+<div {...attrs}></div>