รหัส CSS
การคัดลอกรหัสมีดังนี้:
<style type = "text/css">
-
มาร์จิ้น: 0px;
Padding: 0px;
Font-Family: "Micsoft Yahei", "Microsoft Yahei";
ขนาดตัวอักษร: 15px;
-
Div {
ความกว้าง: 50px;
ความสูง: 50px;
ความเป็นมา: #f00;
แนวชายแดน: 5px;
-moz-Border-Radius: 5px;
-webkit-Border-Radius: 5px;
เคอร์เซอร์: ตัวชี้;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 60px;
ซ้าย: 30px;
-
ป้อนข้อมูล{
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 10px;
ซ้าย: 10px;
Padding: 3px;
เคอร์เซอร์: ตัวชี้;
-
</style>
รหัส HTML
การคัดลอกรหัสมีดังนี้:
<body>
<input type = "button" value = "กลับมาเป็นวิธีดั้งเดิม"/>
<div> </div>
</body>
รหัส JavaScript
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
// 1. เริ่มต้นด้วยการคลิกที่ div ด้วยเมาส์เป็นทริกเกอร์
// 2. เมื่อคลิกที่เมาส์เพื่อเคลื่อนที่ให้ทริกเกอร์เหตุการณ์การเคลื่อนไหวของเมาส์เพื่อฉีดข้อมูลลงในอาร์เรย์ (ย้ายพิกัด)
// 3. จบลงด้วยเมาส์ที่เคลื่อนห่างจาก Div เป็น
// 4. คลิกปุ่ม "กลับมาดั้งเดิม" เพื่อสำรวจอาร์เรย์ (การย้ายพิกัด) และเรียกการเคลื่อนไหวพิกัดของ DIV ในอาร์เรย์เพื่อให้ได้ฟังก์ชัน "return"
window.onload = function () {
var odiv = document.getElementsByTagname ("div") [0];
var obtn = document.getElementsByTagname ("อินพุต") [0];
var time = null, arrtop = [], arrleft = [];
odiv.onmousedown = function (ev) {
var event = ev || window.event;
// รับพิกัดของเมาส์ใน div
var disx = event.clientx-odiv.offsetleft;
var disy = event.clienty-odiv.offSettop;
arrtop = [60];
arrleft = [30];
document.onmousemove = function (ev) {
var event = ev || window.event;
// รับตำแหน่งเมาส์หลังจากลาก
var l = event.clientx;
var t = event.clienty;
// บันทึกตำแหน่งที่ถูกลากลงในอาร์เรย์และใช้ตำแหน่งเมาส์ที่ลากเพื่อลบตำแหน่งเมาส์บนวัตถุซึ่งเป็นตำแหน่งวัตถุที่ลาก
arrleft.push (l-disx);
arrtop.push (t-disy);
odiv.style.left = l-disx +"px";
odiv.style.top = t-disy +"px";
-
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
-
กลับเท็จ;
-
// แกนกลางของผลตอบแทนดั้งเดิมคือการบันทึกพิกัดเมื่อย้ายจากนั้นจัดลำดับอาร์เรย์ใหม่และตั้งค่าตัวจับเวลาเพื่อกำหนดค่ากว้างในอาร์เรย์ให้กับวัตถุ
obtn.onclick = function () {
arrtop.Reverse (); // reorder
arrleft.reverse (); // reorder
var i = 0;
obtn.time = setInterval (function () {
odiv.style.top = arrtop [i]+"px";
odiv.style.left = arrleft [i]+"px";
i ++;
if (i == arrtop.length) {
ClearInterval (obtn.time);
arrtop = [];
arrleft = [];
-
}, 20);
-
-
</script>