利用js实现时尚的拖拽功能
我们在一些网站中都可以看到很时尚炫酷的图片拖拽，当然这些操作用JavaScript就可以实现，那么我们今天就来讲一下如何使用JavaScript实现拖拽功能的，没有了解过JavaScript实现拖拽功能的或者感兴趣的我们一起来看看吧！
需要看的问题：
1、怎样在网页中实现拖曳功能。
2、document.documentElement与document.body的区别。
document.documentElement.clientWidth指整个html文档的宽度，document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。
3、getBoundingClientRect().left与offsetLeft的区别。
（1）getBoundingClientRect()用于获取元素的left、top、right、bottom。
（2）offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。
4、e.clientX指的是鼠标点相对于窗口的坐标。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹窗</title>
<style type="text/css">
#mask {
position: fixed;
left:0;
top:0;
width:100%;
height: 100%;
background-color: hsla(250,100%,50%,0.6);
display: none;
}
#popBox {
position: absolute;
background-color: #fff;
width:200px;
height: 200px;
/*left:50%;
top:50%;*/
/*margin-top: -100px;
margin-left: -100px;*/
}
</style>
</head>
<body>
<button id="clickBtn">点击</button>
<p id="mask">
<p id="popBox"></p>
</p>
<script type="text/javascript">
var clickBtn = document.getElementById("clickBtn");
var popBox = document.getElementById("popBox")
var mask = document.getElementById("mask");
clickBtn.onclick = function() {
mask.style.display = "block";
popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px";
popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px";
}
popBox.onclick = function(e) {
var e = e || window.event;//e指所有代码的集合，通过它可以获取事件的各种属性。
e.cancelBubble = true;//阻止事件冒泡，即点击事件不会传递到mask这一层，意味着不会触发点击mask事件代码。
}
mask.onclick = function() {
mask.style.display = "none";
}
//拖拽 mousedown->mousemove->mouseup
popBox.onmousedown = function(e) {
var e = e || window.event;
var pos = popBox.getBoundingClientRect();//getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。
var oX = e.clientX - pos.left;//clientX指相对于窗口的坐标。
var oY = e.clientY - pos.top;
document.onmousemove = function(e) {
var e = e || window.event;
var oLeft = e.clientX - oX;
var oTop = e.clientY - oY;
popBox.style.left = oLeft + "px";
popBox.style.top = oTop + "px";
if (oLeft<0) {
popBox.style.left = 0 + "px";
};
if (oLeft>document.documentElement.clientWidth - popBox.offsetWidth) {
popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth指整个html文档的宽度，document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。
}
if (oTop<0) {
popBox.style.top = 0 + "px";
};
if (oTop > document.documentElement.clientHeight - popBox.offsetHeight) {
popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px";
}
}
popBox.onmouseup = function() {
document.onmousemove = null;
}
}
</script>
</body>
</html>结合代码分析，我感觉给了源码自己尝试的去删除、修改，这样的学习进步的很快而且还不会容易忘记。
相关推荐：
Atas ialah kandungan terperinci 利用js实现时尚的拖拽功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Apakah fungsi apl Doubao?
Mar 01, 2024 pm 10:04 PM
Akan terdapat banyak fungsi penciptaan AI dalam apl Doubao, jadi apakah fungsi apl Doubao? Pengguna boleh menggunakan perisian ini untuk membuat lukisan, berbual dengan AI, menjana artikel untuk pengguna, membantu semua orang mencari lagu, dsb. Pengenalan fungsi apl Doubao ini boleh memberitahu anda kaedah operasi khusus Kandungan khusus ada di bawah, jadi lihat! Apakah fungsi apl Doubao Jawapan: Anda boleh melukis, bersembang, menulis artikel dan mencari lagu. Pengenalan fungsi: 1. Pertanyaan soalan: Anda boleh menggunakan AI untuk mencari jawapan kepada soalan dengan lebih pantas, dan anda boleh bertanya apa-apa jenis soalan. 2. Penjanaan gambar: AI boleh digunakan untuk mencipta gambar yang berbeza untuk semua orang Anda hanya perlu memberitahu semua orang keperluan umum. 3. Sembang AI: boleh mencipta AI yang boleh berbual untuk pengguna,
Perbezaan antara vivox100s dan x100: perbandingan prestasi dan analisis fungsi
Mar 23, 2024 pm 10:27 PM
Kedua-dua telefon bimbit vivox100s dan x100 adalah model yang mewakili dalam barisan produk telefon mudah alih vivo, masing-masing mewakili tahap teknologi canggih vivo dalam tempoh masa yang berbeza. Artikel ini akan menjalankan perbandingan terperinci antara kedua-dua telefon mudah alih ini dari segi perbandingan prestasi dan analisis fungsi untuk membantu pengguna memilih telefon mudah alih yang sesuai dengan mereka dengan lebih baik. Mula-mula, mari kita lihat perbandingan prestasi antara vivox100s dan x100. vivox100s dilengkapi dengan yang terbaru
Apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya?
Mar 21, 2024 pm 08:21 PM
Dengan perkembangan pesat Internet, konsep media kendiri telah berakar umbi dalam hati orang ramai. Jadi, apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya? Seterusnya, kita akan meneroka isu-isu ini satu demi satu. 1. Apakah sebenarnya media kendiri? Kami-media, seperti namanya, bermakna anda adalah media. Ia merujuk kepada pembawa maklumat yang melaluinya individu atau pasukan boleh mencipta, mengedit, menerbitkan dan menyebarkan kandungan secara bebas melalui platform Internet. Berbeza dengan media tradisional, seperti akhbar, televisyen, radio, dan lain-lain, media kendiri lebih interaktif dan diperibadikan, membolehkan semua orang menjadi pengeluar dan penyebar maklumat. 2. Apakah ciri dan fungsi utama media kendiri? 1. Ambang rendah: Peningkatan media kendiri telah menurunkan ambang untuk memasuki industri media Peralatan yang rumit dan pasukan profesional tidak lagi diperlukan.
Apakah fungsi perisian pengurusan akaun Xiaohongshu? Bagaimana untuk mengendalikan akaun Xiaohongshu?
Mar 21, 2024 pm 04:16 PM
Memandangkan Xiaohongshu menjadi popular di kalangan golongan muda, semakin ramai orang mula menggunakan platform ini untuk berkongsi pelbagai aspek pengalaman dan pandangan hidup mereka. Cara mengurus berbilang akaun Xiaohongshu dengan berkesan telah menjadi isu utama. Dalam artikel ini, kami akan membincangkan beberapa ciri perisian pengurusan akaun Xiaohongshu dan meneroka cara mengurus akaun Xiaohongshu anda dengan lebih baik. Apabila media sosial berkembang, ramai orang mendapati diri mereka perlu mengurus berbilang akaun sosial. Ini juga merupakan satu cabaran untuk pengguna Xiaohongshu. Sesetengah perisian pengurusan akaun Xiaohongshu boleh membantu pengguna mengurus berbilang akaun dengan lebih mudah, termasuk penerbitan kandungan automatik, penerbitan berjadual, analisis data dan fungsi lain. Melalui alatan ini, pengguna boleh mengurus akaun mereka dengan lebih cekap dan meningkatkan pendedahan dan perhatian akaun mereka. Di samping itu, perisian pengurusan akaun Xiaohongshu mempunyai
Apa itu Discuz? Definisi dan pengenalan fungsi Discuz
Mar 03, 2024 am 10:33 AM
"Meneroka Discuz: Definisi, Fungsi dan Contoh Kod" Dengan perkembangan pesat Internet, forum komuniti telah menjadi platform penting untuk orang ramai mendapatkan maklumat dan bertukar pendapat. Di antara banyak sistem forum komuniti, Discuz, sebagai perisian forum sumber terbuka yang terkenal di China, digemari oleh majoriti pembangun dan pentadbir laman web. Jadi, apa itu Discuz? Apakah fungsi yang ada padanya, dan bagaimana ia boleh membantu tapak web kami? Artikel ini akan memperkenalkan Discuz secara terperinci dan melampirkan contoh kod khusus untuk membantu pembaca mengetahui lebih lanjut mengenainya.
Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya
Mar 09, 2024 am 08:21 AM
Tip PHP: Cepat melaksanakan fungsi kembali ke halaman sebelumnya Dalam pembangunan web, kita sering menghadapi keperluan untuk melaksanakan fungsi kembali ke halaman sebelumnya. Operasi sedemikian boleh meningkatkan pengalaman pengguna dan memudahkan pengguna menavigasi antara halaman web. Dalam PHP, kita boleh mencapai fungsi ini melalui beberapa kod mudah. Artikel ini akan memperkenalkan cara cepat melaksanakan fungsi kembali ke halaman sebelumnya dan memberikan contoh kod PHP tertentu. Dalam PHP, kita boleh menggunakan $_SERVER['HTTP_REFERER'] untuk mendapatkan URL halaman sebelumnya
Penjelasan terperinci tentang fungsi dan fungsi GDM di bawah Linux
Mar 01, 2024 pm 04:18 PM
Penjelasan terperinci tentang fungsi dan fungsi GDM di bawah Linux Dalam sistem pengendalian Linux, GDM (GNOMEDisplayManager) ialah pengurus log masuk grafik yang menyediakan antara muka untuk pengguna log masuk dan log keluar daripada sistem. GDM biasanya merupakan sebahagian daripada persekitaran desktop GNOME, tetapi boleh digunakan oleh persekitaran desktop lain juga. Peranan GDM bukan sahaja untuk menyediakan antara muka log masuk, tetapi juga termasuk pengurusan sesi pengguna, penyelamat skrin, log masuk automatik dan fungsi lain. Fungsi GDM terutamanya merangkumi aspek berikut:
PHP digunakan untuk apa? Terokai peranan dan fungsi PHP
Mar 24, 2024 am 11:39 AM
PHP ialah bahasa skrip bahagian pelayan yang digunakan secara meluas dalam pembangunan web Fungsi utamanya adalah untuk menjana kandungan web yang dinamik Apabila digabungkan dengan HTML, ia boleh mencipta halaman web yang kaya dan berwarna-warni. PHP berkuasa Ia boleh melaksanakan pelbagai operasi pangkalan data, operasi fail, pemprosesan borang dan tugas lain, menyediakan interaktiviti dan fungsi yang berkuasa untuk tapak web. Dalam artikel berikut, kami akan meneroka lebih lanjut peranan dan fungsi PHP, dengan contoh kod terperinci. Mula-mula, mari kita lihat penggunaan biasa PHP: penjanaan halaman web dinamik: P
