From 30754fa8e9f877cc4f1bf235f78aa308d88bb1dc Mon Sep 17 00:00:00 2001
From: Neale Pickett <neale@lanl.gov>
Date: Fri, 5 Mar 2021 14:05:36 -0700
Subject: [PATCH] Fix FF trying to load a URL on drag drop

---
 CHANGELOG.md                           |  4 ++++
 example-puzzles/example/5/draggable.js | 25 +++++++++++++++++--------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4933771..e32b547 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [unreleased]
+### Changed
+- example/5/draggable.js fix for FireFox to prevent dropping a draggable trying to load a URL
+
 ## [v4.1.1] 
 ### Removed
 - ppc64le and i386 builds of github, because ppc64le keep failing mysteriously, and we don't need them anyhow.
diff --git a/example-puzzles/example/5/draggable.js b/example-puzzles/example/5/draggable.js
index 65390e9..ac58c84 100644
--- a/example-puzzles/example/5/draggable.js
+++ b/example-puzzles/example/5/draggable.js
@@ -22,16 +22,25 @@ function draggableHandleDragOver(e) {
 }
 
 function draggableHandleDragEnter(e) {
-  e.target.classList.add('over')
+  let element = e.target
+  if (!element.classList) {
+    element = element.parentElement
+  }
+  element.classList.add('over')
 }
 
 function draggableHandleDragLeave(e) {
   // this/e.target is previous target element.
-  e.target.classList.remove('over')
+  let element = e.target
+  if (!element.classList) {
+    element = element.parentElement
+  }
+  element.classList.remove('over')
 }
 
 function draggableHandleDrop(e) {
   // this/e.target is current target element.
+  e.preventDefault()
   let tgt = e.target
   let src = document.querySelector("[data-move-id=\"" + e.dataTransfer.getData("text/plain") + "\"]")
 
@@ -59,12 +68,12 @@ function draggableHandleDragEnd(e) {
 
 function sortableInit(event) {
   for (let e of document.querySelectorAll("[draggable]")) {
-    e.addEventListener('dragstart', draggableHandleDragStart, false)
-    e.addEventListener('dragenter', draggableHandleDragEnter, false)
-    e.addEventListener('dragover', draggableHandleDragOver, false)
-    e.addEventListener('dragleave', draggableHandleDragLeave, false)
-    e.addEventListener('drop', draggableHandleDrop, false)
-    e.addEventListener('dragend', draggableHandleDragEnd, false)
+    e.addEventListener('dragstart', draggableHandleDragStart)
+    e.addEventListener('dragenter', draggableHandleDragEnter)
+    e.addEventListener('dragover', draggableHandleDragOver)
+    e.addEventListener('dragleave', draggableHandleDragLeave)
+    e.addEventListener('drop', draggableHandleDrop)
+    e.addEventListener('dragend', draggableHandleDragEnd)
   }
 }