บทความนี้อธิบายถึงวิธีการของ JavaScript ในการใช้เอฟเฟกต์การลากข้อความและรูปภาพ แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <html>
<head>
<title> JavaScript ตระหนักถึงเอฟเฟกต์การลากและวางของข้อความและรูปภาพ </title>
<style type = "text/css">
*{padding: 0; margin: 0;}
.TIPS {ตำแหน่ง: สัมบูรณ์; พื้นหลัง: #EEE;}
</style>
</head>
<body>
<div id = "tips1" onmouseover = "dragf.drag ('tips1');">
<img src = "/images/skinslogo.gif"> <br> สามารถลากภาพ </div>
<div id = "tips2" onMouseOver = "dragf.drag ('tips2');"> <a href = "// www.vevb.com" target = "_ blank"> wulin.com </a> <br/> ลิงก์ลากก็โอเค
</div>
</body>
<script type = "text/javascript">
var $ id = function (id) {return document.getElementById (id);}
var dragf = {
ล็อค: เท็จ
Lastobj: ไม่ได้กำหนด
ลาก: ฟังก์ชั่น (obj) {
$ id (obj) .onmousedown = function (e) {
var e = e? E: window.event;
if (! window.event) {e.preventDefault ();}/* ป้องกันเหตุการณ์เริ่มต้นของ a, img ในคำอธิบายประกอบ <a href = '/site/js-5791-1.html' target = '_ blank'> <u> ลาก A
dragf.locked = true;
$ id (obj) .style.position = "สัมบูรณ์";
$ id (obj) .style.zindex = "100";
if (dragf.lastobj && dragf.lastobj! = $ id (obj)) {/* การลากหลายองค์ประกอบต้องมีการฟื้นฟูสถานะองค์ประกอบสุดท้าย*//
dragf.lastobj.style.zindex = "1";
-
dragf.lastobj = $ id (obj);
var tempx = $ id (obj) .offsetleft;
var tempy = $ 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 = tempy+e.clienty-dragf.y+"px";
if (window.event) {e.returnValue = false;}/* บล็อกเหตุการณ์เริ่มต้นของ a, img ภายใต้ IE*/
-
document.onmouseup = function () {
dragf.locked = false;
-
-
-
-
</script>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน