حصــريا : و لاول مرة عربيا برمجة السحب و الافلات بالجافا سكريبت drag and drop ( البرمجة + الاستخدام)

zdbb · #1 03-01-2011, 06:09 PM

حصــريا : و لاول مرة عربيا برمجة السحب و الافلات بالجافا سكريبت drag and drop ( البرمجة + الاستخدام)

بشرى سارة لكل اعضاء مـطور ... الان و بعد ان انهيت برمجة نظام سحب و افلات اي انك تسيطيع ان تعير مكان اي جسم في الصفحة عن طريق سحبه و افلاته فقط و بدون تحديث للصفحة بالاضافة الى انني لم اكتفي بهذا القدر ... فقد قمت بشرح طريقة برمجته و طريقة تضمينه في ملف html و ارفقت مثالا عليه ....

و اليكم اهم خصائص و مميزات هذا النظام :

السحب و الافلات .
اضهار فأرة السحب .
الشفافية عند السحب .
اعادة الشفافية عند الاصل عند انتهاء السحب .

اليكم اهم الخطوات التي باذن الله سانهجها في النص ...

المتطلبات .
فتح النوت باد .
برمجة الدوال الاربعة .
تضمين ملف الجافا سكريبت في ملف HTML .
النتيجة .
التحميل .
اهداء .

1.المتطلبات

بسم الله لنبدا ...

النوت باد .. لتحميل من هنا :

2.فتح النوت باد

نضغط على ايقونة النوت باد كما في الصورة ...

عند الفتح تضهر لنا مثل هذه النافدة ....

نطبق الخطوات كما في الصورة لتلوين الكود ....

3.برمجة الدوال الاربعة

نكتب كما في الصورة

كود PHP:

  var ie=document.all;

var nn6=document.getElementById&&!document.all;

 
var isdrag=false;

var x,y;

var dobj;

نكتب كما في الصورة

كود PHP:

  function setOpacity(value,testObj) {

}

نكتب كما في الصورة

كود PHP:

      testObj.style.opacity = value/10;

    testObj.style.filter = 'alpha(opacity=' + value*10 + ')';

نكتب كما في الصورة

كود PHP:

  function movemouse(e)

{

}

نكتب كما في الصورة

كود PHP:

    if (isdrag)

  {

  }

  else{

  }

نكتب كما في الصورة

كود PHP:

      dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;

    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;

    setOpacity(5,dobj);

    return false;

كود PHP:

            setOpacity(10,dobj);

نكتب كما في الصورة

كود PHP:

  function selectmouse(e) 

{

}

نكتب كما في الصورة

كود PHP:

    var fobj       = nn6 ? e.target : event.srcElement;

  var topelement = nn6 ? "HTML" : "BODY";

 
  while (fobj.tagName != topelement && fobj.className != "icons")

  {

  }

 
  if (fobj.className=="icons")

  {

  }

نكتب كما في الصورة

كود PHP:

      fobj = nn6 ? fobj.parentNode : fobj.parentElement;

كود PHP:

      isdrag = true;

    dobj = fobj;

    tx = parseInt(dobj.style.left+0);

    ty = parseInt(dobj.style.top+0);

    x = nn6 ? e.clientX : event.clientX;

    y = nn6 ? e.clientY : event.clientY;

    document.onmousemove=movemouse;

    return false;

نكتب كما في الصورة

كود PHP:

  document.onmousedown=selectmouse;

document.onmouseup=new Function("isdrag=false");

4.تنسيق ملف الجافا سكريبت في ملف HTML

نكتب كما في الصورة

كود بلغة HTML:

<script src="drag.js"></script>

نكتب كما في الصورة

كود بلغة HTML:

<style type="text/css">
<!--
.icons {
    color: #333333;
    margin: 5px;
    padding: 5px;
    background-color: #CCCCCC;
    border: 1px solid #999999;
    cursor: move;
    position: relative;
    width: 300px;
}
-->
</style>

نكتب كما في الصورة

كود بلغة HTML:

 <div class="icons">
        <div>Zdbb PC</div>
      </div>
      <div class="icons">
      <div>Home</div>
      </div>
      <div class="icons">
      <div>Favorite</div>
      </div>
      <div class="icons">
        <div>USB</div>
      </div>

5.النتيجة

و الان مع النتيجة

6.التحميل

اقدم موضوعي الى جميع اعضاء منتدى مــطور و كل المراقبين و المشرفين فيه و الاداريين الساهرين على راحة اعضاء المنتدى و شكــــــرا ....

ارجو ان اكون وفقت في الشرح و غير مقصر
اخوان فضلا لا تنسو التقييم ...

و اخيرا مع التحميل ..

من هذا الرابط او من المرفقات ..

http://www.mtwer.com/vb/attachment.p...1&d=1294066461

7.اهداء

اقدم موضوعي الى جميع اعضاء منتدى مــطور و كل المراقبين و المشرفين فيه و الاداريين الساهرين على راحة اعضاء المنتدى و شكــــــرا ....

ارجو ان اكون وفقت في الشرح و غير مقصر
اخوان فضلا لا تنسو التقييم ...

أبو جنى · 03-01-2011, 07:19 PM

حائطي

سجل دخولك او إضغط هنا للتسجيل

يعطيك العافية يا زكريا

شرح مميز وحصري وتم التقييم يا بطل

zdbb · 03-01-2011, 09:47 PM

حائطي

سجل دخولك او إضغط هنا للتسجيل

اقتباس:

يعطيك العافية يا زكريا

شرح مميز وحصري وتم التقييم يا بطل

شــ.ـكرا جزيلا لك على التقييم الاروع .. الف شكر ..
ممكن تقييم هذا الموضوع الذي سبقه ..
http://www.mtwer.com/vb/t53963.html (حصــريا : و لاول مرة عربيا برمجة كلاس عرض الدوال الرياضية على الصور ( البرمجة + الاستخدام + دوال ))

imhere · 04-01-2011, 03:28 AM

حائطي

سجل دخولك او إضغط هنا للتسجيل

هده هي المواضيع اللتي تستحق التقيم و التنقيط مواضيع قوية وحصرية.
سات واعر

zdbb · 10-01-2011, 10:02 PM

حائطي

سجل دخولك او إضغط هنا للتسجيل

اقتباس:

المشاركة الأصلية كتبت بواسطة imhere

هده هي المواضيع اللتي تستحق التقيم و التنقيط مواضيع قوية وحصرية.
سات واعر

شكــرا على المرور ....

g-star_01 · 04-02-2011, 05:43 PM

حائطي

سجل دخولك او إضغط هنا للتسجيل

شكرا !!!!

الصيف احلى · 02-03-2011, 03:45 PM

حائطي

سجل دخولك او إضغط هنا للتسجيل

مآشآء آللهـ رووعه يالغالي مآشآء آللهـ رووعه يالغالي

واصل اخى والمزيد من مواضيعك الجميلة

haysem · 02-03-2011, 03:49 PM

حائطي

سجل دخولك او إضغط هنا للتسجيل

موضوع رائع يا اخى الله يوفقك

03-01-2011, 07:19 PM	رقم المشاركة : [2]
أبو جنى اداري بيانات موقعي : إسم الموقع : شركة توب لاين اصدار المنتدى : لا أملك منتدى	حائطي سجل دخولك او إضغط هنا للتسجيل يعطيك العافية يا زكريا شرح مميز وحصري وتم التقييم يا بطل
	التوقيع: مدير شركة توب لاين - فرع جدة http://www.tl4s.com.sa 00966-2-6527954

04-01-2011, 03:28 AM	رقم المشاركة : [4]
imhere مطور خبير بيانات موقعي : إسم الموقع : mtwer اصدار المنتدى : لا أملك منتدى	حائطي سجل دخولك او إضغط هنا للتسجيل هده هي المواضيع اللتي تستحق التقيم و التنقيط مواضيع قوية وحصرية. سات واعر
	التوقيع: عضو جديد في معهد مطور التطويري - Mtwer.com/vb يمكنك تعديل التوقيع من خلال لتوحة تحكمك الخاصة عبر الرابط التالي : لوحة التحكم

04-02-2011, 05:43 PM	رقم المشاركة : [6]
g-star_01 مطور نشيط بيانات موقعي : إسم الموقع : اصدار المنتدى :	حائطي سجل دخولك او إضغط هنا للتسجيل شكرا !!!!
	التوقيع: عضو جديد في معهد مطور التطويري - Mtwer.com/vb يمكنك تعديل التوقيع من خلال لتوحة تحكمك الخاصة عبر الرابط التالي : لوحة التحكم

02-03-2011, 03:45 PM	رقم المشاركة : [7]
الصيف احلى :: + مشرف قسم seo و أرشفة المواقع + :: بيانات موقعي : إسم الموقع : منتديات العالم عرب ا اصدار المنتدى : لا أملك منتدى	حائطي سجل دخولك او إضغط هنا للتسجيل مآشآء آللهـ رووعه يالغالي مآشآء آللهـ رووعه يالغالي واصل اخى والمزيد من مواضيعك الجميلة
	التوقيع: انتظرونا بدورة مطور للربح من النت قريبا ويوميا منتدى اسلامى يحتاج دعمكم http://www.worldarabnew.com http://www.worldarabnew.com

02-03-2011, 03:49 PM	رقم المشاركة : [8]
haysem مطور خبير بيانات موقعي : إسم الموقع : اصدار المنتدى :	حائطي سجل دخولك او إضغط هنا للتسجيل موضوع رائع يا اخى الله يوفقك
	التوقيع: عضو جديد في معهد مطور التطويري - Mtwer.com/vb يمكنك تعديل التوقيع من خلال لتوحة تحكمك الخاصة عبر الرابط التالي : لوحة التحكم

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

Powered by vBulletin® Version 3.8.7 Copyright ©2000 - 2012, Jelsoft Enterprises Ltd. Search Engine Friendly URLs by vBSEO 3.5.2 new notificatio by 9adq_ala7sas الحقوق محفوظة لكل المطورين والمواقع العربية Security team المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه التعليقات المنشورة لا تعبر عن رأي معهد مطور ولا نتحمل أي مسؤولية قانونية حيال ذلك ( ويتحمل كاتبها مسؤولية النشر ) روابط ننصح بزيارتها : العاب بنات جديدة \| العاب فلاش جديدة \| العاب فلاش \| استضافة \| تصميم موقع تصميم منتدى \| دعم فني \| مركز تحميل الصور \| مركز تحميل الملفات \| رسائل جوال \| ستايلات \| منتديات \| سكربتات \| هاكات جوجل ادسنس \| نطاقات و دومينات \| تطوير منتديات \| أرشفة المواقع \| وظائف \| توظيف \| برمجة مواقع \| رسائل sms \| حماية المواقع \| فقر الدم
جميع الأوقات بتوقيت GMT +3. الساعة الآن 06:24 AM.	- الأرشيف - الاتصال بنا - معهد مطور - الأعلى

حصــريا : و لاول مرة عربيا برمجة السحب و الافلات بالجافا سكريبت drag and drop ( البرمجة + الاستخدام)

لغات برمجة مواقع PHP, ASP, Java Script, Perl