လုပ်နည်း - Draggable HTML Element တစ်ခုကို ဖန်တီးပါ။
JavaScript နှင့် CSS ဖြင့် ဆွဲယူနိုင်သော HTML အစိတ်အပိုင်းတစ်ခုကို ဖန်တီးနည်းကို လေ့လာပါ။
ဆွဲယူနိုင်သော DIV Element
ရွှေ့ရန် ဤနေရာကိုနှိပ်ပါ။
ရွှေ့ပါ။
ဒီ
DIV
ဆွဲယူနိုင်သော DIV Element တစ်ခုကို ဖန်တီးပါ။
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<!-- 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>
အဆင့် 2) CSS ကိုထည့်ပါ
တစ်ခုတည်းသောအရေးကြီးသောပုံစံမှာ position: absolute
၊ ကျန်သည်သင့်အတွက်ဖြစ်သည်-
ဥပမာ
#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;
}
အဆင့် 3) JavaScript ကိုထည့်ပါ။
ဥပမာ
// 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;
}
}