گروپ دیزاین | ارائه دهنده خدمات نوین

قابلیت drag&drop با html5

 4 شهریور 1394
قابلیت drag&drop با html5
لطفا به این مطلب رای بدهید.

خوب همانطور که میدانید Html 5 امکاناتی بسیار جدید و پر کاربرد دارد و یکی از این امکانات خاصیت drag&drop است.

ابتدا برای این که یک شی این قابلیت رو داشته باشه باید کد draggable=”true” رو داخل تگ اون وارد کنیم؛ برای مثال من برای یک لینک این خاصیت را فعال میکنم:

[codesyntax lang=”php”]

[/codesyntax]

حالا با استفاده از کد ondragstart=”dragUser(this,event)” به مرورگر اطلاع میدهیم که Drag انجام شده است:

[codesyntax lang=”php”]

[/codesyntax]

حال با استفاده از جاوا به مرورگر میگوییم که ID شی گرفته شده را ذخیره کند:

[codesyntax lang=”php”]

[/codesyntax]

خوب شی گرفته شده باید مکانی داشته باشه که توش انداخته بشه. برای این کار یک DIV میسازیم که شی را در آن بیندازیم:

[codesyntax lang=”php”]

[/codesyntax]

حال دوباره با استفاده از جاوا میگوییم که شی رها شده در این ناحیه را با اسفاده از ID ای که از آن ذخیره کردیم انتقال دهد:

[codesyntax lang=”php”]

[/codesyntax]

راستی شما میتونید شی های خودتون رو در جایی غیر DIV ای که برای Drop ساختید بنویسید و همچنین میتونید داخل خود DIV بنویسید و شی ها را جابجا کنید.
اینم تمام کد ها یکجا:[codesyntax lang=”php”]

[/codesyntax]

 

دیدگاه بگذارید

avatar
  Subscribe  
Notify of