لقد رأيت مؤخرًا بعض الأصدقاء على الإنترنت يبحثون عن تطبيقات السحب والإفلات المشابهة لصفحة Google الرئيسية المخصصة ومساحة MSN، وعثرت على مثال أدناه ولكن كان هناك العديد من المشكلات التي قمت بإعادة كتابتها وتحسينها وإنشاء عام تنفيذ الوظيفة المحددة كما يلي:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>عرض السحب والإفلات الخاص بـ BlackSoul</title. >
<!- -
______________________
|--------المؤلف بواسطة BlackSoul---------||
------------2006.03.30------ ---- ----|.
|[email protected] ------|
. ---- ------|.
|------http://blacksoul.cnblogs.cn---
| ==== ==============
-->
<style type="text/css">
body
{
هامش:0px
}
#aim /*ضبط نمط الطبقة المستهدفة*/
{
position:absolute;/*النمط
ضروري للتحكم في موضع الطبقة*/
width:200px
height:30px
;
}
#sourceLayer, #cloneLayer
{
position:
absolute;/*النمط
ضروري للتحكم في موضع الطبقة*/
width
:300px
height:50px;
border:1px Solid #666666;
.مثبت
{
العرض: لا شيء
مرشح: ألفا (التعتيم = 100 })
؛
.actived
{
Display:block;
filter
:alpha(opacity
=70)
;
<الجسم>
<div id="aim">نطاق المواضع</div>
<div id="sourceLayer" unselectable="off"><img src="
<div id="cloneLayer" class="docked" unselectable="off"> </div>
<script type="text/javascript" language="javascript">
<!--
/*
====================== =======
|--------المؤلف بواسطة BlackSoul---------||
------------2006.03.30----- ---------|.|[email protected]
------ |
. -----------||
------http://blacksoul.cnblogs.cn---
| ==================
var
sourceLayer
;
//
تحديد الموضع الأولي لكل طبقة
var
aimX
;
// المتغيرات أثناء السحب
var
Draging = false; // ما إذا كان يتم سحبها
var OffsetX = 0; // الإزاحة اليسرى واليمنى في الاتجاه X
var OffsetY = 0;
back; // إرجاع كائن الرسوم المتحركة
var
thisX; // موضع X لطبقة الاستنساخ الحالية
var
thisY
;
// تهيئة معلومات السحب
/*
تنسيق initAimX الهدف x
تنسيق initAimY الهدف y تنسيق
مصدر السحب initOrgnX x تنسيق
مصدر السحب initOrgnY y الإحداثي
*/
// احصل على كائن الطبقة
دالة getLayer(inAim,
inSource
,inClone)
{
aim = document.getElementById(inAim
)
;
function initDrag(initAimX,
initAimY
,initOrgnX,initOrgnY)
{
aimX
=
initAimX
;
aimY = initOrgnX
;
=
aimY
;
// تحضير
وظيفة السحب BeforeDrag()
{
if (event.button != 1)
{
return;
cloneLayer.innerHTML
= sourceLayer.innerHTML; // انسخ محتوى مصدر السحب
offsetX = document.body.scrollLeft + events.clientX - sourceLayer.style.pixelLeft;
OffsetY
= document.body.scrollTop + events.clientY -
sourceLayer.style.pixelTop
;
// وظيفة السحب
OnDrag()
{
if
(!dragg)
{
return;
}
// تحديث الموضع
events.returnValue = false
; = document.body.scrollTop + events.clientY - offsetY
}
// نهاية السحب
function EndDrag()
{
if (event.button != 1)
{
return
Draging = false
;
if (event.clientX >= aim.style.pixelLeft && events.clientX <= (aim.style.pixelLeft + aim.offsetWidth) &&
events.clientY >= aim.style.pixelTop && events.clientY <= (aim.style .pixelTop + aim.offsetHeight))
{
// توجد طبقة السحب في الهدف ويتم وضعها تلقائيًا في الموضع المستهدف
sourceLayer.style.pixelLeft = aim.style.pixelLeft;
sourceLayer.style.pixelTop = aim.style.pixelTop;
cloneLayer.className = "docked";
/*
** بعد الانتهاء من ذلك، يمكنك استخدام ملف xml لحفظ الموضع الحالي
** في المرة التالية التي يدخل فيها المستخدم
، ستتم تهيئة طبقة السحب المصدر للبيانات الموجودة في ملف xml
*/
}
else
{
// السحب والإسقاط الموجود خارج الطبقة المستهدفة، واستعادة موضع مصدر السحب
thisX = cloneLayer.style.pixelLeft;
thisY = cloneLayer.style.pixelTop;
offSetX = Math.abs(thisX - orgnX);
offSetY = Math.abs (thisY - orgnY);
time = 500;// ضبط وقت الرسوم المتحركة
stepX = Math.floor((offSetX/time)*20);
stepY = Math.floor((offSetY/time)*20)
; 0)
stepX = 2؛
إذا (stepY == 0)
stepY = 2؛
// ابدأ الرسوم المتحركة المرتجعة
moveStart();
}
}
دالة moveStart()
{
back = setInterval("MoveLayer();",15 })
;
// تعيين تأثير الرسوم المتحركة التي تم إرجاعها
function MoveLayer()
{
// يقع في الجانب الأيسر العلوي من الهدف
if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft + = stepX;
cloneLayer.style .pixelTop += stepY;
// إذا تجاوزت الإزاحة الهدف، فاضبط السرعة على البيكسل وانتقل إلى الخلف في الاتجاه المعاكس هنا، كما هو الحال في
if(cloneLayer.style. PixelLeft > orgnX)
{
stepX = 1
}
if(cloneLayer.style.pixelTop > orgnY)
{
stepY = 1
}
// إذا كانت الإحداثيات على المحور X أو Y هي نفسها، فلن يحدث أي إزاحة
if(cloneLayer.style) .pixelLeft == orgnX)
{
stepX = 0
}
if(cloneLayer .style.pixelTop == orgnY)
{
stepY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove();
}
}
// يقع في الجزء السفلي الأيسر من الهدف
else if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft +=
cloneLayer.style.pixelTop -= stepY;
if(cloneLayer.style .pixelLeft > orgnX)
{
stepX = 1
}
if(cloneLayer.style.pixelTop<
orgnY)
{
stepY = 1
}
if(cloneLayer.style.pixelLeft == orgnX)
{
stepX = 0
;
(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
}
}
;
// يقع في الجانب الأيمن العلوي من الهدف
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft -= stepX;
cloneLayer.style.pixelTop += stepY ;
if(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
}
};
// يقع في الجانب الأيمن العلوي من الهدف
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft -= stepX;
cloneLayer.style.pixelTop -= stepY ;
if(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
}
};
// الوصول إلى الهدف
else
{
EndMove()
}
}
// إيقاف إرجاع الرسوم المتحركة
function EndMove()
{
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop = orgnY
;
cloneLayer.style.pixelLeft = orgnX
;
ClearInterval
(back);
// وظيفة السحب الرئيسية
startDraging(inAim,inSource,inClone,initAimX,initAimY,initOrgnX,initOrgnY)
{
getLayer(inAim,inSource,inClone)
initDrag(initAimX,initAimY,initOrgnX,initOrgnY);
sourceLayer.onmousedown = BeforeDrag
document . onmousemove = OnDrag; // إذا تم استخدام cloneLayer هنا، فسيتم تحديد المحتوى الموجود في cloneLayer أثناء السحب، وستظهر بعض الأخطاء...
cloneLayer.onmouseup = EndDrag
}
// استدعاء
startDraging("aim"، "sourceLayer"، "cloneLayer"، 300،200،20،20)؛
//-->
</script>
</body>
</html>
تجدر الإشارة إلى ما يلي:
1. يجب أن يكون هناك ثلاثة تعريفات لـ div في HTML ويجب تحديد موضع النمط على أنه مطلق في الطبقات الثلاث للتحكم في الموضع.
1. الطبقة المستهدفة (الهدف)، وظيفتها الرئيسية هي تحديد الموضع الذي يسري فيه السحب.
2. اسحب المصدر (sourceLayer). انتبه إلى تعيين السمة غير قابلة للتحديد = "off" (هذا أمر غريب، فضبطها على النطاق سيحدد محتوى الطبقة أثناء عملية السحب)
3. الطبقة المستخدمة للنسخ (cloneLayer).
2. استدعاء الوظيفة
شرح معلمة startDraging:
اسم الطبقة المستهدفة initAim initSource اسم مصدر السحب initClone اسم الطبقة المستخدمة للنسخ
initAimX إحداثي المحور x للطبقة المستهدفة initAimY إحداثي المحور y للطبقة المستهدفة initOrgnX إحداثي x لمصدر السحب initOrgnY يتم اختبار إحداثي المحور Y لمصدر السحب
فقط في IE يمكنك إضافة عملية كتابة XML بعد وصول مصدر السحب إلى الهدف. ثم تسجيل بيانات تخطيط الصفحة المحددة من قبل المستخدم. أنا لست راضيًا جدًا عن خوارزمية إرجاع الرسوم المتحركة بعض الاقتراحات للتحسين أعمل حاليًا على تطوير مجموعة من عناصر التحكم الخاصة بـ ajax استنادًا إلى asp.net2.0. أتمنى أن يكون لديك المزيد من التواصل.
ملاحظة: المقالة الأولى في حديقة مدونتي .