Skip to content
Snippets Groups Projects
Verified Commit e6629df4 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: switch off user select on drag and drop

parent 78c572b4
No related branches found
No related tags found
No related merge requests found
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<li><a href="/">Back to overview</a></li> <li><a href="/">Back to overview</a></li>
</ul> </ul>
<main> <main>
<monster-panel id="panel" style="border: 9px solid yellow;display: block"> <monster-panel id="panel" style="border: 9px solid yellow;display: block;">
<div style="background: red"> <div style="background: red">
<monster-panel style="border: 10px solid blue" id="inner" data-monster-option-heightadjustment="5"> <monster-panel style="border: 10px solid blue" id="inner" data-monster-option-heightadjustment="5">
sdfsdfsdf<br>asfdasdfasd<br> sdfsdfsdf<br>asfdasdfasd<br>
......
...@@ -84,7 +84,7 @@ class Panel extends CustomElement { ...@@ -84,7 +84,7 @@ class Panel extends CustomElement {
/** /**
* *
* @return {Monster.Components.Host.Viewer} * @return {Panel}
*/ */
[assembleMethodSymbol]() { [assembleMethodSymbol]() {
super[assembleMethodSymbol](); super[assembleMethodSymbol]();
......
...@@ -23,6 +23,7 @@ import { Observer } from "../../types/observer.mjs"; ...@@ -23,6 +23,7 @@ import { Observer } from "../../types/observer.mjs";
import { SplitPanelStyleSheet } from "./stylesheet/split-panel.mjs"; import { SplitPanelStyleSheet } from "./stylesheet/split-panel.mjs";
import { instanceSymbol } from "../../constants.mjs"; import { instanceSymbol } from "../../constants.mjs";
import { internalSymbol } from "../../constants.mjs"; import { internalSymbol } from "../../constants.mjs";
import {getDocument} from "../../dom/util.mjs";
export { SplitPanel, TYPE_VERTICAL, TYPE_HORIZONTAL }; export { SplitPanel, TYPE_VERTICAL, TYPE_HORIZONTAL };
...@@ -69,6 +70,8 @@ const TYPE_HORIZONTAL = "horizontal"; ...@@ -69,6 +70,8 @@ const TYPE_HORIZONTAL = "horizontal";
* *
* @fragments /fragments/components/layout/split-panel/ * @fragments /fragments/components/layout/split-panel/
* *
* @issue https://localhost.alvine.dev:8440/development/issues/closed/184.html
*
* @example /examples/components/layout/split-panel-simple * @example /examples/components/layout/split-panel-simple
* *
* @since 3.54.0 * @since 3.54.0
...@@ -294,6 +297,8 @@ function initEventHandler() { ...@@ -294,6 +297,8 @@ function initEventHandler() {
}); });
} }
let userSelectDefault = getDocument().body.style.userSelect;
this[draggerElementSymbol].addEventListener("mousedown", () => { this[draggerElementSymbol].addEventListener("mousedown", () => {
self[internalSymbol].getSubject().isDragging = true; self[internalSymbol].getSubject().isDragging = true;
...@@ -317,6 +322,8 @@ function initEventHandler() { ...@@ -317,6 +322,8 @@ function initEventHandler() {
return; return;
} }
getDocument().body.style.userSelect = "none";
if (self.getOption("splitType") === TYPE_HORIZONTAL) { if (self.getOption("splitType") === TYPE_HORIZONTAL) {
const containerOffsetTop = self[splitScreenElementSymbol].offsetTop; const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
const topPanel = self[startPanelElementSymbol]; const topPanel = self[startPanelElementSymbol];
...@@ -370,6 +377,10 @@ function initEventHandler() { ...@@ -370,6 +377,10 @@ function initEventHandler() {
const dragEventHandler = (e) => { const dragEventHandler = (e) => {
self[internalSymbol].getSubject().isDragging = false; self[internalSymbol].getSubject().isDragging = false;
document.body.style.userSelect = userSelectDefault;
document.removeEventListener("mousemove", eventListener); document.removeEventListener("mousemove", eventListener);
document.removeEventListener("mouseup", eventListener); document.removeEventListener("mouseup", eventListener);
}; };
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment