كيفية إجراء عملية السحب والإفلات Drag And Drop

هل تعلم ان في هذه المقالة سوف نتناول ليس طعاما وانما موضوعا هاما، ألا هو إمكانية السحب والافلات في الادوات، ربما لم تفهم شيئا لذلك دعني أطرح عليك السؤال التالي:

اريد تصميم واجهة تحتوي على قائمة ببعض الاسماء (ربما الاصدقاء أو ما شابه)، وايضا إمكانية كتابة نص ما!!

اي بمعنى آخر اريد ListBox كما قلت تحتوي على قائمة من اسماء الاصدقاء وايضا الاداة RichTextBox التي تسمح لي بكتابة نص معين، والان كل ما اريده أن أقوم بسحب أحد الاسماء من ListBox ووضعه في RichTextBox، ولتحقيق ذلك فنحن نحتاج إلى ما يعرف بتقنية Drag And Drop.

دعنا من خلال تنفيذ المثال السابق ذكره التعرف على سهولة تحقيق ذلك، بعد أن تقوم بإنشاء مشروع جديد من نوع Windows Application وضع العناصر السالف ذكرها لتصبح الفورم على الشكل التالي:

والان قم من خلال الحدث Load الخاصة بالفورم بإضافة بعض اسماء اصدقاءك، و من خلال نفس الحدث أعطي الخاصة AllowDrop الخاصة بالاداة richTextBox1 القيمة true ليصبح الكود على الشكل التالي: مثلا:

private void Form1_Load(object sender, EventArgs e)
{
   richTextBox1.AllowDrop = true; 

   listBox1.Items.Add("Abdulkarim Kanaan");
   listBox1.Items.Add("Fadi");
   listBox1.Items.Add("Rami");
   listBox1.Items.Add("Turki");
   listBox1.Items.Add("Ismaeel");
}

والان بعد ذلك اختر الحدث MouseDown الخاص بالاداة listBox1، وقم بكتابة ما يلي:

private void listBox1_MouseDown(object sender, MouseEventArgs e)
{
   listBox1.DoDragDrop(listBox1.SelectedItem, DragDropEffects.All);
}

حيث قمنا باستدعاء التابع DoDragDrop التابع للاداة listBox1، مع تحديد القيمة التي اجرينا عليها عملية السحب، بالاضافة إلى نوع عملية السحب هل هي عملية نقل Move أم نسخ Copy أم كافة العمليات All، طبعا هنا يظهر من الكود اننا قد اخترنا عملية النسخ Copy.

والان هناك حدثان هامان للاداة richTextBox1 سوف نقوم باستخدامهما والا وهما DragEnter و DragDrop.

حيث ان الحدث DragEnter: يقع عندما عندما يدخل مؤشر الفارة إلى الاداة richTextBox1 طبعا بعد إجراء عملية السحب

أما الحدث الثاني DragDrop: يقع هذا الحدث عندما نقوم بعملية الافلات على العنصر richTextBox1.

الكود التالي من اجل الحث DragEnter:

void richTextBox1_DragEnter(object sender, DragEventArgs e)
{
   if (e.Data.GetDataPresent(DataFormats.Text))
   {
	   e.Effect = DragDropEffects.Copy;
   }
   else
   {
	   e.Effect = DragDropEffects.None;
   }
}

طبعا من خلال التابع GetDataPresent يمكننا من فحص نوع البيانات المسحوبه هل هي نص أم صورة أم ....

اما الكود المطبق على الحدث DragDrop فهو:

void richTextBox1_DragDrop(object sender, DragEventArgs e){
   int i;
   String s;

   // Get start position to drop the text.
   i = richTextBox1.SelectionStart;
   s = richTextBox1.Text.Substring(i);
   richTextBox1.Text = richTextBox1.Text.Substring(0, i);

   // Drop the text on to the RichTextBox.
   richTextBox1.Text = richTextBox1.Text +
	   e.Data.GetData(DataFormats.Text).ToString();

   richTextBox1.Text = richTextBox1.Text + s;
}

طبعا ما فعلناه هنا عمايات بسيطة من اجل كتابة ما تم افلاته في المكان المحدد من النص أي ما قمنا به في المختصر المفيد هو عملية حشر الاسم المسحوب من قائمة الاسماء في المكان المجدد من النص الموجود داخل الاداة richTextBox1.

طبعا بقي شيء واحد واخير أحب التنويه علي أن الاحداث آنفة الذكر DragEnter و DragEnter لن تظهر لك في قائمة أحدث الاداة richTextBox1، لذلك يجب عليك كتابتها يدويا وسوف أقوم بكتابتها في الحدث الخاص بالفورم ليصبح الكود السابق على النحو التالي:

private void Form1_Load(object sender, EventArgs e)
{
	richTextBox1.AllowDrop = true;

	listBox1.Items.Add("Abdulkarim Kanaan");
	listBox1.Items.Add("Fadi");
	listBox1.Items.Add("Rami");
	listBox1.Items.Add("Turki");
	listBox1.Items.Add("Ismaeel");

	richTextBox1.DragEnter += new
		DragEventHandler(richTextBox1_DragEnter);
	richTextBox1.DragDrop += new
		DragEventHandler(richTextBox1_DragDrop);
}

وشكرا

السورس كود في المرفقات

DragAndDrop.zip