أثناء التطوير الأمامي ، هناك العديد من الأماكن التي يتم فيها استخدام تأثيرات السحب والإسقاط. بالطبع ، http://jqueryui.com/draggable/ هو خيار جيد ، لكنني شخص يكسر خزفي ويسأل الحقيقة. لقد استغرقت بعض الوقت لتنفيذ المكونات الإضافية المماثلة مع JS ، لذلك لن أقول الكثير.
أولاً: HTML و CSS
نسخة الكود كما يلي:
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> </title>
<style>
* {
الهامش: 0 ؛
الحشو: 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 Left Top
var quatex = oevent.clientx - div1.OffSetLeft ؛
var distatey = oevent.clientx - div1.offsettop ؛
// أضف وقت الانزلاق المستند
document.onmousemove = function (evt) {
var oevent = evt || حدث؛
// إعادة حساب القيمة العلوية اليسرى من DIV
var left = oevent.clientx - المسافة ؛
var top = oevent.clienty - المسافة ؛
// غادر عندما أقل من أو يساوي الصفر ، قم بالتعيين على الصفر لمنع Div من الخروج من المستند
إذا (اليسار <= 0) {
اليسار = 0 ؛
}
// عندما يتجاوز اليسار الحدود اليمنى للوثيقة ، تم ضبطها على الحدود اليمنى
آخر إذا (left> = document.documentElement.ClientWidth - div1.OffsetWidth) {
left = document.documentElement.ClientWidth - div1.OffSetWidth ؛
}
إذا (أعلى <= 0) {
أعلى = 0 ؛
}
آخر if (top> = document.documentElement.clientheight - div1.offsetheight) {
TOP = document.documentElement.clientheight - div1.OffSetheight ؛
}
// تعيين DIV مرة أخرى
div1.style.top = top + "px" ؛
div1.style.left = left + "px" ؛
}
// أضف حدث رفع الماوس
div1.onmouseup = function () {
// مسح الحدث
document.onmousemove = null ؛
div1.onmouseup = null ؛
}
}
}
</script>
نعم ، استخدم التنفيذ الموجهة للكائنات
نسخة الكود كما يلي:
<style>
* {
الهامش: 0 ؛
الحشو: 0 ؛
}
#div1 {
العرض: 100px ؛
الارتفاع: 100px ؛
لون الخلفية: أحمر.
}
#div2 {
لون الخلفية: أصفر.
العرض: 100px ؛
الارتفاع: 100px ؛
}
</style>
<div id = "div1"> </viv>
<div id = "div2"> </viv>
فئة JS Draggle:
نسخة الكود كما يلي:
وظيفة السحب (معرف) {
this.div = document.getElementById (id) ؛
إذا (this.div) {
this.div.style.cursor = "move" ؛
this.div.style.position = "absolute" ؛
}
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 ؛
if (l <= 0) {
L = 0 ؛
}
آخر إذا (l> = document.documentElement.ClientWidth - this.div.offsetwidth) {
l = document.documentElement.clientwidth - this.div.offsetWidth ؛
}
if (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 بشكل أكثر كفاءة.