IPiky - إٍستخدام Drag & Drop فى HTML 5 و CSS3

[magic4host.com]

قمت ببرمجة هذا البرنامج بإستخدام الجافاسكريبت بالإعتماد على JQuery و خواص HTML5 الجديدة Local Storage , Drag & Drop , Content Editable
و بعض تأثيرات ال CSS3 تحديدا خاصية Transform - rotate

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

السورس كود مرفق بالكامل - وهو مفتوح المصدر بالكامل

و يمكن إستخدام الكود كplugin بسهولة

$('#divID').IPiky()

أنا مستعد لمناقشة الكود بشكل كامل من أجل فهم أعمق لخواص HTML5 و أى مناقشة فى ال HTML5 apis أرحب بها بشكل دائم

[M. Al-Dhafeeri]

ممتاز جدا حمّلت التطبيق وقاعد أقرأه وافهمه

ممكن تعطينا شرح مفصل عن هذا السطر

<div id="pic_container" ondragenter="event.stopPropagation(); event.preventDefault();"
     		ondragover="event.stopPropagation(); event.preventDefault();"
     		ondrop="event.stopPropagation(); event.preventDefault();">
			
		</div>

عشان افهمه اكثر ومافائدته وهل هو ثابت عند عمل اي مشروع يعتمد على ال drag and drop ام لا؟
كل ماتعطينا معلومات اكثر عن الhtml 5 اللي استخدمتها كلما كان أفضل..

كوني قاعد اقرى عن الhtml 5 مؤخراً وودي افهمها بأسرع وقت

جزيت خيراً

[magic4host.com]

تحت أمرك أخي

<div id="pic_container" ondragenter="event.stopPropagation(); event.preventDefault();"
     		ondragover="event.stopPropagation(); event.preventDefault();"
     		ondrop="event.stopPropagation(); event.preventDefault();">
			
		</div>

html5 أضافت 3 أحداث جديدة وهم
ondragenter
و ينفذ عند دخول أى شئ إلى ال div فى حالة drag
ondragover
ينفذ عند تحريك أى شئ على div
ondrop
ينفذ عند إفلات ما تم تحريكه

لكل متصفح طريقته الخاصة فى التعامل مع هذه الأحداث فهناك من يتيح مثلا عمل drag لأى شئ من tab إلى tab أخرى مثل firefox و هناك من لا يتيح هذا
كذلك عند عمل drag لأى عنصر سيتم تنفيذ رد الفعل التلقائي للمتصفح المقابل لهذا العنصر

مثال : عند عمل drag لصورة على div , رد الفعل للمتصفح أنه سيقول بتحويل الصفحة بالكامل لهذه الصورة

و لهذا لتعطيل الخيارات الإفتراضية للمتصفح بالنسبة لهذا الحدث إستخدمت

event.stopPropagation();
event.preventDefault();

حتى يمكنني التعامل مع الأحداث بحرية , أرجو أن أكون أوصلت النقطة بوضوح

أنا سعيد جدا لمناقشة الكود معك أخي أو مع أى شخص من الأعضاء أرجوكم لا تترددوا فى مناقشة أى جزء من الكود فالغرض هنا الإستفادة للجميع

[M. Al-Dhafeeri]

جزيت خيرا معلومات وشرح كافي ووافي ما شاء الله عليك

هل توجد functions غير اللي وضعتها لعملية الdrag and drop؟ أم فقط هذه الثلاث functions المتوافره؟
ondragenter
ondragover
ondrop

[magic4host.com]

آسف على التأخير بالرد

لا توجد أحداث أضيفت غير dragover و dragenter و drop

و لكن لإتمام عملية الdrag و ال drop
يجب إضافة ال attribute التالي للعنصر المراد سحبه

draggable="true"

ليعرف المتصفح أنه قابل لل drag

ملحوظه : فى البرنامج الخاص بي IPiky قمت بالإعتماد على أن ال firefox يتيح ال global drag أو ما يسمى ب drag anything بمعنى أن أى عنصر فى ال firefox إفتراضيا قابل للسحب على عكس opera مثلا

أنا سعيد جدا بالمناقشة و منتظرين باقي الأخوة أيضا يشاركوننا

[khashabawy]

و كيف أحدد مكان العنصر الذى سيستقر فيه بعد سحبه و إفلاته لل div ؟

شكراً جزيلاً أخى

[ahmad sadiq]

و كيف أحدد مكان العنصر الذى سيستقر فيه بعد سحبه و إفلاته لل div ؟

شكراً جزيلاً أخى

لست مبرمج html5
لكن اتوقع انه شيء في event.target
event.target.x
event.target.y

[M. Al-Dhafeeri]

و كيف أحدد مكان العنصر الذى سيستقر فيه بعد سحبه و إفلاته لل div ؟

شكراً جزيلاً أخى

عدل سؤال حلو!
شلون نحدد هالشي؟


ومشكور على اجابة السؤال الثاني اللي وضعته

[magic4host.com]

آسف للتأخير فى الرد أنشغلت ببعض الأعمال و شكرا للتفاعل يا جماعه

و كيف أحدد مكان العنصر الذى سيستقر فيه بعد سحبه و إفلاته لل div ؟

شكراً جزيلاً أخى

يمكنك الحصول على الإحداثيات بشئ مشابه لما ذكره أخونا أحمد صديق

ev.pageX
ev.pageY

حيث أن ev هو ال event

إستخدمت نفس الموضوع فى برنامجي لأعرف المكان الذى قام المستخدم بأفلات العنصر إليه كالآتي

Obj.bind('drop',function(ev){
			  
			  ev.stopPropagation();
			  ev.preventDefault();
			  var dt = ev.originalEvent.dataTransfer;
			  alert( dt.getData('Text'));
			  var format = ev.originalEvent.dataTransfer.types ? 'text/html' : "Text";
	          var newDrop = dt.getData(format);	
	          if(format == 'text/html'){
	        	  var newIMg = newDrop.match(/src=(.+?[\.jpg|\.gif]")/)[1];
	          }else{
	        	  var newIMg = newDrop;
	          }
	          var params = {
	        		id  : 'IP'+new Date().getTime(),
					src : newIMg,
					top : ev.pageY,
					left: ev.pageX,
					rotate: 'rotate('+core.randDegree()+'deg)',
					title: 'Title Here'
	          }
	          ;
	          core.AddPik(params);
		  });

حيث لو لاحظت ستجد أنني أخزن ال top و ال left للعنصر مع بعض البيانات الأخرى فى مصفوفة params و أمررها للfunction التى إسمها AddPik و التي تضيف العنصر

متابع معكم و أسئلة ممتازة يا جماعه