Artikel ini menjelaskan metode JavaScript untuk mengimplementasikan efek drag dan drop teks dan gambar. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <Html>
<head>
<title> JavaScript menyadari efek drag and drop dari teks dan gambar </iteme>
<type style = "text/css">
*{padding: 0; margin: 0;}
.tips {position: absolute; latar belakang: #eee;}
</tyle>
</head>
<body>
<Div id = "Tips1" onMouseOver = "dragf.drag ('Tips1');">
<img src = "/gambar/skinslogo.gif"> <br> gambar dapat diseret </div>
<Div id = "Tips2" onMouseOver = "dragf.drag ('Tips2');"> <a href = "// www.vevb.com" target = "_ blank"> wulin.com </a> <BR/> tautan seret juga ok
</div>
</body>
<type skrip = "Teks/JavaScript">
var $ id = function (id) {return document.geteLementById (id);}
var dragf = {
Terkunci: Salah,
lasobj: tidak terdefinisi,
seret: function (obj) {
$ id (obj) .onmousedown = function (e) {
var e = e? E: Window.event;
if (! window.event) {e.preventDefault ();}/* mencegah peristiwa default a, img dalam anotasi <a href = '/situs/js-5791-1.html' target = '_ blank'> <u> seret a, img di bawah browser </u> </a>
dragf.locked = true;
$ id (obj) .style.position = "absolute";
$ id (obj) .style.zindex = "100";
if (dragf.lastobj && dragf.lastobj! = $ id (obj)) {/* drag multi-elemen membutuhkan pemulihan status elemen terakhir*//
dragf.lastobj.style.zindex = "1";
}
dragf.lastobj = $ id (obj);
var tempx = $ id (obj) .offsetleft;
var temppy = $ id (obj) .offsettop;
dragf.x = e.clientx;
dragf.y = e.clienty;
document.onmouseMove = function (e) {
var e = e? E: Window.event;
if (dragf.locked == false) return false;
$ id (obj) .style.left = tempx+e.clientx-dragf.x+"px";
$ id (obj) .style.top = temppy+e.clienty-dragf.y+"px";
if (window.event) {e.returnValue = false;}/* Blokir peristiwa default a, img di bawah IE*/
}
document.onmouseup = function () {
dragf.locked = false;
}
}
}
}
</script>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.