Selama pengembangan front-end, ada banyak tempat di mana efek drag dan drop digunakan. Tentu saja, http://jqueryui.com/draggable/ adalah pilihan yang baik, tapi saya adalah orang yang memecahkan casserole dan bertanya yang sebenarnya. Saya meluangkan waktu untuk mengimplementasikan plug-in serupa dengan JS, jadi saya tidak akan banyak bicara.
Pertama: HTML dan CSS
Salinan kode adalah sebagai berikut:
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> </title>
<tyle>
* {
Margin: 0;
Padding: 0;
}
#Div1 {
Posisi: Absolute;
Lebar: 100px;
Tinggi: 100px;
Kursor: Pindah;
Latar Belakang: Merah;
}
</tyle>
</head>
<body>
<Div id = "Div1">
</div>
</body>
</html>
Sekarang, pertama -tama terapkan algoritma utama:
Salinan kode adalah sebagai berikut:
<script>
window.onload = function () {
// Dapatkan div yang perlu diseret
var div1 = document.geteLementById ("div1");
// Tambahkan acara pers mouse
Div1.onmousedown = function (evt) {
var oevent = evt || peristiwa;
// Dapatkan jarak dari menekan mouse ke bagian kiri div
var distarx = oevent.clientx - div1.offsetleft;
var jarak = oevent.clientx - div1.offsettop;
// Tambahkan waktu geser dok
document.onmouseMove = function (evt) {
var oevent = evt || peristiwa;
// Hitung ulang nilai atas div kiri
var left = oevent.clientx - jarakx;
var top = oevent.clienty - jarak;
// Tinggalkan saat kurang dari atau sama dengan nol, atur ke nol untuk mencegah div dari menyeret keluar dari dokumen
if (kiri <= 0) {
kiri = 0;
}
// Saat kiri melebihi batas kanan dokumen, atur ke batas kanan
lain if (left> = document.documentelement.clientwidth - div1.offsetWidth) {
left = document.documentelement.clientwidth - div1.offsetWidth;
}
if (top <= 0) {
atas = 0;
}
lain if (top> = document.documentelement.clientHeight - div1.offsetHeight) {
top = document.documentelement.clientHeight - div1.offsetheight;
}
// Tetapkan div lagi
div1.style.top = top + "px";
div1.style.left = kiri + "px";
}
// Tambahkan acara lift mouse
Div1.onMouseUp = function () {
// Bersihkan acara
document.onmouseMove = null;
Div1.onmouseUp = null;
}
}
}
</script>
Ya, gunakan implementasi yang berorientasi objek
Salinan kode adalah sebagai berikut:
<tyle>
* {
Margin: 0;
Padding: 0;
}
#Div1 {
Lebar: 100px;
Tinggi: 100px;
Latar Belakang: Merah;
}
#Div2 {
Latar Belakang-Color: Kuning;
Lebar: 100px;
Tinggi: 100px;
}
</tyle>
<Div ID = "Div1"> </div>
<Div ID = "Div2"> </div>
Kelas JS Draggle:
Salinan kode adalah sebagai berikut:
function drag (id) {
this.div = document.getElementById (id);
if (this.div) {
this.div.style.cursor = "move";
this.div.style.position = "absolute";
}
this.disx = 0;
this.disy = 0;
var _pis = ini;
this.div.onmousedown = function (evt) {
_this.getDistance (EVT);
document.onmouseMove = function (evt) {
_This.setPosition (EVT);
}
_this.div.onmouseUp = function () {
_this.clearevent ();
}
}
}
Drag.prototype.getDistance = function (evt) {
var oevent = evt || peristiwa;
this.disx = oevent.clientx - this.div.offsetleft;
this.disy = oevent.clienty - this.div.offsettop;
}
Drag.prototype.setPosition = function (evt) {
var oevent = evt || peristiwa;
var l = oevent.clientx - this.disx;
var t = oevent.clienty - this.disy;
if (l <= 0) {
l = 0;
}
lain if (l> = document.documentelement.clientwidth - this.div.offsetWidth) {
l = document.documentelement.clientwidth - this.div.offsetWidth;
}
if (t <= 0) {
t = 0;
}
lain if (t> = document.documentelement.clientHeight - this.div.offsetHeight) {
t = document.documentelement.clientHeight - this.div.offsetheight;
}
this.div.style.left = l + "px";
this.div.style.top = t + "px";
}
Drag.prototype.clearevent = function () {
this.div.onmouseup = null;
document.onmouseMove = null;
}
Akhirnya: Implementasi Akhir:
Salinan kode adalah sebagai berikut:
window.onload = function () {
Drag baru ("Div1");
Drag baru ("Div2");
}
Efeknya adalah sebagai berikut:
Di atas adalah semua tentang artikel ini. Saya berharap akan membantu semua orang untuk menguasai JavaScript lebih mahir.