Cách THỰC HIỆN - Tạo phần tử HTML có thể kéo
Tìm hiểu cách tạo phần tử HTML có thể kéo bằng JavaScript và CSS.
Phần tử DIV có thể kéo
Bấm vào đây để di chuyển
Di chuyển
điều này
DIV
Tạo phần tử DIV có thể kéo
Bước 1) Thêm HTML:
Thí dụ
<!-- 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>
Bước 2) Thêm CSS:
Phong cách quan trọng duy nhất là position: absolute
, phần còn lại là tùy thuộc vào bạn:
Thí dụ
#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;
}
Bước 3) Thêm JavaScript:
Thí dụ
// 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;
}
}