diff --git a/public/static/css/chat.css b/public/static/css/chat.css index 6885abc..f845632 100644 --- a/public/static/css/chat.css +++ b/public/static/css/chat.css @@ -9,7 +9,13 @@ body { /* No dragging images - it plays wrongly with the drag/drop image sharing feature and users can accidentally share in chat by dragging an on-page image */ img { - pointer-events: none; + /* https://stackoverflow.com/questions/12906789/preventing-an-image-from-being-draggable-or-selectable-without-using-js */ + user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; } .float-right { diff --git a/src/App.vue b/src/App.vue index 6726fac..43435d5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2800,6 +2800,13 @@ export default { let $body = document.querySelector("body"); // Set up drag/drop file upload events. + $body.addEventListener("dragstart", (e) => { + // Nothing ON the page should begin being draggable. Prevents on-page images from + // being dragged and then dropped (and sent as files on chat), but still allows + // their click handler to view in the lightbox modal. + e.preventDefault(); + return false; + }) $body.addEventListener("dragenter", (e) => { e.preventDefault(); e.stopPropagation(); diff --git a/src/components/MessageBox.vue b/src/components/MessageBox.vue index 8eef33e..7e31dc1 100644 --- a/src/components/MessageBox.vue +++ b/src/components/MessageBox.vue @@ -311,7 +311,7 @@ export default {