ในระหว่างการพัฒนาส่วนหน้ามีหลายสถานที่ที่ใช้เอฟเฟกต์การลากและปล่อย แน่นอน http://jqueryui.com/draggable/ เป็นตัวเลือกที่ดี แต่ฉันเป็นคนที่ทำลายหม้อตุ๋นและถามความจริง ฉันใช้เวลาพอสมควรในการใช้ปลั๊กอินที่คล้ายกันกับ JS ดังนั้นฉันจะไม่พูดอะไรมาก
ครั้งแรก: HTML และ CSS
การคัดลอกรหัสมีดังนี้:
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<style>
-
มาร์จิ้น: 0;
Padding: 0;
-
#div1 {
ตำแหน่ง: สัมบูรณ์;
ความกว้าง: 100px;
ความสูง: 100px;
เคอร์เซอร์: ย้าย;
พื้นหลังสี: สีแดง;
-
</style>
</head>
<body>
<div id = "div1">
</div>
</body>
</html>
ตอนนี้ใช้อัลกอริทึมหลักก่อน:
การคัดลอกรหัสมีดังนี้:
<script>
window.onload = function () {
// รับ div ที่ต้องลาก
var div1 = document.getElementById ("div1");
// เพิ่มเหตุการณ์การกดเมาส์
div1.onmousedown = function (evt) {
var oEvent = evt || เหตุการณ์;
// รับระยะห่างจากการกดเมาส์ไปที่ Div ด้านบนด้านบน
var distancex = oEvent.Clientx - div1.OffsetLeft;
var distancey = oEvent.Clientx - div1.offSettop;
// เพิ่ม Doc Sliding Time
document.onmousemove = function (evt) {
var oEvent = evt || เหตุการณ์;
// คำนวณค่าสูงสุดซ้ายของ div ใหม่
var left = oEvent.Clientx - distancex;
var top = oEvent.Clienty - ระยะทาง;
// ทิ้งไว้เมื่อน้อยกว่าหรือเท่ากับศูนย์ตั้งค่าเป็นศูนย์เพื่อป้องกัน DIV จากการลากออกจากเอกสาร
ถ้า (ซ้าย <= 0) {
ซ้าย = 0;
-
// เมื่อเหลือเกินขอบเขตที่ถูกต้องของเอกสารตั้งค่าเป็นขอบเขตขวา
อื่นถ้า (ซ้าย> = document.documentElement.ClientWidth - div1.offsetWidth) {
ซ้าย = document.documentElement.ClientWidth - div1.offsetWidth;
-
if (top <= 0) {
ด้านบน = 0;
-
อื่นถ้า (top> = document.documentelement.clientheight - div1.offsetheight) {
top = document.documentelement.clientheight - div1.offsetheight;
-
// กำหนด div อีกครั้ง
div1.style.top = top + "px";
div1.style.left = ซ้าย + "px";
-
// เพิ่มกิจกรรมลิฟท์เมาส์
div1.onmouseup = function () {
// ล้างเหตุการณ์
document.onmousemove = null;
div1.onmouseup = null;
-
-
-
</script>
ใช่ใช้การใช้งานเชิงวัตถุ
การคัดลอกรหัสมีดังนี้:
<style>
-
มาร์จิ้น: 0;
Padding: 0;
-
#div1 {
ความกว้าง: 100px;
ความสูง: 100px;
พื้นหลังสี: สีแดง;
-
#div2 {
พื้นหลังสี: สีเหลือง;
ความกว้าง: 100px;
ความสูง: 100px;
-
</style>
<div id = "div1"> </div>
<div id = "div2"> </div>
JS Draggle Class:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นลาก (id) {
this.div = document.getElementById (id);
if (this.div) {
this.div.style.cursor = "ย้าย";
this.div.style.position = "สัมบูรณ์";
-
this.disx = 0;
this.disy = 0;
var _this = this;
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 || เหตุการณ์;
this.disx = oevent.clientx - this.div.offsetleft;
this.disy = oevent.clienty - this.div.offsettop;
-
drag.prototype.setPosition = function (evt) {
var oEvent = evt || เหตุการณ์;
var l = oEvent.Clientx - this.disx;
var t = oEvent.Clienty - this.disy;
ถ้า (l <= 0) {
l = 0;
-
อื่นถ้า (l> = document.documentElement.ClientWidth - this.div.offsetWidth) {
l = document.documentElement.ClientWidth - this.div.offsetWidth;
-
ถ้า (t <= 0) {
t = 0;
-
อื่นถ้า (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;
-
ในที่สุด: การดำเนินการครั้งสุดท้าย:
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
การลากใหม่ ("div1");
การลากใหม่ ("div2");
-
ผลกระทบมีดังนี้:
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการควบคุม JavaScript อย่างเชี่ยวชาญมากขึ้น