خوب همانطور که میدانید Html 5 امکاناتی بسیار جدید و پر کاربرد دارد و یکی از این امکانات خاصیت drag&drop است.
ابتدا برای این که یک شی این قابلیت رو داشته باشه باید کد draggable=”true” رو داخل تگ اون وارد کنیم؛ برای مثال من برای یک لینک این خاصیت را فعال میکنم:
[codesyntax lang=”php”]
| <a id=”drag1” href=”#” draggable="true">MyDesign</a> |
[/codesyntax]
حالا با استفاده از کد ondragstart=”dragUser(this,event)” به مرورگر اطلاع میدهیم که Drag انجام شده است:
[codesyntax lang=”php”]
| <a id=”drag1” href=”#” draggable="true" ondragstart="dragUser(this,event)">MyDesign</a> |
[/codesyntax]
حال با استفاده از جاوا به مرورگر میگوییم که ID شی گرفته شده را ذخیره کند:
[codesyntax lang=”php”]
| function dragUser(user,event){ event.dataTransfer.setData('User',user.id); } |
[/codesyntax]
خوب شی گرفته شده باید مکانی داشته باشه که توش انداخته بشه. برای این کار یک DIV میسازیم که شی را در آن بیندازیم:
[codesyntax lang=”php”]
| <div class="dr" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false"></div> |
[/codesyntax]
حال دوباره با استفاده از جاوا میگوییم که شی رها شده در این ناحیه را با اسفاده از ID ای که از آن ذخیره کردیم انتقال دهد:
[codesyntax lang=”php”]
| function dropUser(target,event){ var user=event.dataTransfer.getData('User'); target.appendChild(document.getElementById(user)); } |
[/codesyntax]
راستی شما میتونید شی های خودتون رو در جایی غیر DIV ای که برای Drop ساختید بنویسید و همچنین میتونید داخل خود DIV بنویسید و شی ها را جابجا کنید.
اینم تمام کد ها یکجا:[codesyntax lang=”php”]
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ | <!DOCTYPE HTML> <html> <head> <style> .dr { width: ۳۰۰px; height: ۱۵۰px; background: #ccc; margin: ۵px; float: left; } a { color: #۷a102b; float: left; clear:both; } </style> <script type="text/javascript"> function dragUser(user,event){ event.dataTransfer.setData('User',user.id); } function dropUser(target,event){ var user=event.dataTransfer.getData('User'); target.appendChild(document.getElementById(user)); } </script> </head> <body> <div class="dr" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false"> <a draggable="true" ondragstart="dragUser(this,event)" id="drag1">MyDesign1</a> <a draggable="true" ondragstart="dragUser(this,event)" id="drag2">MyDesign2</a> <a draggable="true" ondragstart="dragUser(this,event)" id="drag3">MyDesign3</a> </div> </body> </html> |
[/codesyntax]
