I have a colour picker in a draggable div that can be opened up by clicking a photo. It can be dragged about the web page and also shut at any moment.
This is what it resembles:
Yet when you drag to also much to the sides, it heads out of sight.
Similar To This:
This is my code:
HTML:
<< div id=" universalPicker">
<> < switch onclick=" closePicker()" title=" Close"><> < period course=" material-symbols-outlined">
> close
< .
<< switch title=" Relocate" course=" relocation"><> < period course=" material-symbols-outlined">
> open_with.
< .
<< tag for=" shade" course=" shade">> Select any kind of colour from this web page:<.
<< input kind=" shade" id=" shade" name=" shade" worth=" # 19139D">
<> .
<< switch onclick=" openPicker()" course=" openColorButton"><> < img src="./ images/everett _ logo.png"
title=" Click to open up colour picker" alt=" logo design" course=" footer-logo"><> CSS:
#universalPicker {
screen: none;
background-color: # 575757;.
border-radius: 10px;.
size: 390px;.
cushioning: 10px;.
placement: outright;.
z-index: 99;.
}
. shade {
cushioning: 0px;.
vertical-align: center;.
}
. openColorButton {
margin: 10px;.
background-color: # 000000;.
boundary: none;.
}
. openColorButton: float {
overview: 2px strong # 272727;.
}
. relocation: float {
arrow: grab;.
}
JavaScript:
allow openColorPicker = document.getElementById(" universalPicker");.
feature openPicker() {
openColorPicker.style.display="block";.
}
allow closeColorPicker = document.getElementById(" universalPicker");.
feature closePicker() {
closeColorPicker.style.display="none";.
}
// Make the DIV aspect draggable:.
dragElement( document.getElementById(" universalPicker"));.
feature dragElement( elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;.
if (document.getElementById( elmnt.id + "header")) {
// if existing, the header is where you relocate the DIV from:.
document.getElementById( elmnt.id + "header"). onmousedown = dragMouseDown;.
} else {
// or else, relocate the DIV from anywhere inside the DIV:.
elmnt.onmousedown = dragMouseDown;.
}
feature dragMouseDown( e) window.event;.
e.preventDefault();.
// obtain the computer mouse arrow placement at start-up:.
pos3 = e.clientX;.
pos4 = e.clientY;.
document.onmouseup = closeDragElement;.
// call a feature whenever the arrow relocations:.
document.onmousemove = elementDrag;.
feature elementDrag( e) window.event;.
e.preventDefault();.
// determine the brand-new arrow placement:.
pos1 = pos3 - e.clientX;.
pos2 = pos4 - e.clientY;.
pos3 = e.clientX;.
pos4 = e.clientY;.
// established the aspect's brand-new placement:.
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";.
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";.
feature closeDragElement() {
// quit relocating when computer mouse switch is launched:.
document.onmouseup = null;.
document.onmousemove = null;.
}
}
I additionally require to be able to establish a beginning placement for the picker when ever before you click the open switch. Exists anyhow to do this? Many thanks beforehand
