drageble div verdwijnt uit beeld
Ik heb onderstaande code om een div element dragable te maken. echter het probleem is dat als ik het scherm scroll dat het element uit beeld verdwijnt. Heeft iemand een idee wat ik in de javscript code moet toevoegen om dit te voorkomen? Alvast bedankt voor de moeite.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!-- Draggable DIV -->
<div id="mydiv">
<!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
<div id="mydivheader">Click here to move</div>
<p>Move</p>
<p>this</p>
<p>DIV</p>
</div>
#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
text-align: center;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
<script>
// Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
<div id="mydiv">
<!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
<div id="mydivheader">Click here to move</div>
<p>Move</p>
<p>this</p>
<p>DIV</p>
</div>
#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
text-align: center;
}
#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
<script>
// Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
https://jsfiddle.net/3psf52rk/
Gewijzigd op 05/01/2024 15:59:54 door - Ariën -
Nogmaals dank voor de genomen moeite.
Gewijzigd op 06/01/2024 11:19:00 door Paul Weiss
Gewijzigd op 07/01/2024 12:34:40 door Paul Weiss
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<link rel="stylesheet" href="./style.css">
<div class="DraggableDiv" id="DraggableDiv1">
<div class="Header" id="DraggableDiv1_Header">
Header
</div>
<div class="Content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="DraggableDiv" id="DraggableDiv2">
<div class="Content">
<strong>No Header</strong>
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</script><script src="./script.js"></script>
<div class="DraggableDiv" id="DraggableDiv1">
<div class="Header" id="DraggableDiv1_Header">
Header
</div>
<div class="Content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="DraggableDiv" id="DraggableDiv2">
<div class="Content">
<strong>No Header</strong>
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</script><script src="./script.js"></script>
Onderstaande de javascript
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
var dragDivZindex = 100;
//which div's to drag
draggableDiv(document.getElementById("DraggableDiv1"));
draggableDiv(document.getElementById("DraggableDiv2"));
function draggableDiv(div) {
//some variables
var pos1 = 0
var pos2 = 0
var pos3 = 0
var pos4 = 0;
var margin = 10;
var extra_margin_right = 3;
var extra_margin_bottom = 3;
//set the inital z-index
div.style.zIndex = dragDivZindex;
//extra margin right when there is a vertical scrollbar
if (document.body.scrollHeight > window.innerHeight) {
extra_margin_right = 20;
}
//extra margin bottom when there is a horizontal scrollbar
if (document.body.scrollWidth > window.innerWidth) {
extra_margin_bottom = 20;
}
//use the Header for drag if there is one, if not drag on the whole div
var header = div.id + '_Header';
if (document.getElementById(header)) {
document.getElementById(header).onmousedown = dragDivMouseDown;
} else {
div.onmousedown = dragDivMouseDown;
}
//add a mouse enter event for the z-index
div.onmouseenter = dragDivMouseEnter;
//start dragging
function dragDivMouseDown(e) {
e = e || window.event;
e.preventDefault();
//track coordinates
pos3 = e.clientX;
pos4 = e.clientY;
//attach functions
document.onmouseup = dragDivMouseUp;
document.onmousemove = dragDivMouseMove;
}
//drag the div
function dragDivMouseMove(e) {
e = e || window.event;
e.preventDefault();
//track coordinates
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
var top = div.offsetTop - pos2;
var left = div.offsetLeft - pos1;
//check if the element does not exceed the viewport at the top of bottom
if (top < margin) {
top = margin;
} else if (top + div.clientHeight + margin + extra_margin_bottom > window.innerHeight) {
top = window.innerHeight - margin - div.clientHeight - extra_margin_bottom;
}
//check if the element does not exceed the viewport at the left of right
if (left < margin) {
left = margin;
} else if (left + div.clientWidth + margin + extra_margin_right > window.innerWidth) {
left = window.innerWidth - margin - div.clientWidth - extra_margin_right;
}
//set the css of the div
div.style.top = top + 'px';
div.style.left = left + 'px';
}
//stop dragging
function dragDivMouseUp() {
document.onmouseup = null;
document.onmousemove = null;
}
//if there are more than one, set the element being dragged on top with z-index
function dragDivMouseEnter() {
dragDivZindex++;
div.style.zIndex = dragDivZindex;
}
}
//which div's to drag
draggableDiv(document.getElementById("DraggableDiv1"));
draggableDiv(document.getElementById("DraggableDiv2"));
function draggableDiv(div) {
//some variables
var pos1 = 0
var pos2 = 0
var pos3 = 0
var pos4 = 0;
var margin = 10;
var extra_margin_right = 3;
var extra_margin_bottom = 3;
//set the inital z-index
div.style.zIndex = dragDivZindex;
//extra margin right when there is a vertical scrollbar
if (document.body.scrollHeight > window.innerHeight) {
extra_margin_right = 20;
}
//extra margin bottom when there is a horizontal scrollbar
if (document.body.scrollWidth > window.innerWidth) {
extra_margin_bottom = 20;
}
//use the Header for drag if there is one, if not drag on the whole div
var header = div.id + '_Header';
if (document.getElementById(header)) {
document.getElementById(header).onmousedown = dragDivMouseDown;
} else {
div.onmousedown = dragDivMouseDown;
}
//add a mouse enter event for the z-index
div.onmouseenter = dragDivMouseEnter;
//start dragging
function dragDivMouseDown(e) {
e = e || window.event;
e.preventDefault();
//track coordinates
pos3 = e.clientX;
pos4 = e.clientY;
//attach functions
document.onmouseup = dragDivMouseUp;
document.onmousemove = dragDivMouseMove;
}
//drag the div
function dragDivMouseMove(e) {
e = e || window.event;
e.preventDefault();
//track coordinates
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
var top = div.offsetTop - pos2;
var left = div.offsetLeft - pos1;
//check if the element does not exceed the viewport at the top of bottom
if (top < margin) {
top = margin;
} else if (top + div.clientHeight + margin + extra_margin_bottom > window.innerHeight) {
top = window.innerHeight - margin - div.clientHeight - extra_margin_bottom;
}
//check if the element does not exceed the viewport at the left of right
if (left < margin) {
left = margin;
} else if (left + div.clientWidth + margin + extra_margin_right > window.innerWidth) {
left = window.innerWidth - margin - div.clientWidth - extra_margin_right;
}
//set the css of the div
div.style.top = top + 'px';
div.style.left = left + 'px';
}
//stop dragging
function dragDivMouseUp() {
document.onmouseup = null;
document.onmousemove = null;
}
//if there are more than one, set the element being dragged on top with z-index
function dragDivMouseEnter() {
dragDivZindex++;
div.style.zIndex = dragDivZindex;
}
}
Onderstaande de styling
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.DraggableDiv {
/* to allow the draggable div's to scroll with the content make the position absolute */
position: fixed;
top: 30%;
left: 20%;
width: 250px;
border: 1px solid #000000;
background: #beccf3;
box-shadow: 5px 5px 3px 0px rgba(97,97,97,0.5);
}
.DraggableDiv div {
padding: 5px;
}
.DraggableDiv .Header {
cursor: move;
font-weight: bold;
color: #ffffff;
border-bottom: 1px solid #000000;
background-color: #566895;
}
#DraggableDiv2 {
cursor: move;
top: 40%;
left: 25%;
}
/* to allow the draggable div's to scroll with the content make the position absolute */
position: fixed;
top: 30%;
left: 20%;
width: 250px;
border: 1px solid #000000;
background: #beccf3;
box-shadow: 5px 5px 3px 0px rgba(97,97,97,0.5);
}
.DraggableDiv div {
padding: 5px;
}
.DraggableDiv .Header {
cursor: move;
font-weight: bold;
color: #ffffff;
border-bottom: 1px solid #000000;
background-color: #566895;
}
#DraggableDiv2 {
cursor: move;
top: 40%;
left: 25%;
}