آموزش های حرفه ای
مای دیزاین به عنوان یکی از تولید کنندگان محتوای آموزشی در زمینه طراحی وب و گرافیک به صورت تصویری، با کیفیت و اختصاصی در خدمت شما کاربران عزیز می باشد!
نرم افزار آندروید
طراحی و ساخت نرم افزار آندروید خدمت جدیدی است که در مای دیزاین ارائه میشود. داشتن نرم افزار برای گوشی های هوشمند امری جدید و هیجان انگیز می باشد!
طراحی وب و گرافیک
یکی از خدمات ما طراحی سایت های ایستا و پویا با جدید ترین متد های روز دنیاست. ساخت قالب هایی سبک و در عین حال زیبا، با استفاده از وردپرس، تخصص ماست!
قابلیت گرفتن و انداختن (Drag and Drop) در HMTL5

قابلیت گرفتن و انداختن (Drag and Drop) در HMTL5
سلام. امروز با یک آموزش جالب از HTML5 اومدم! یکی از قابلیت هایی که میتوانید از آن در طراحی های خودتون ازش استفاده کنید گرفتن و انداختن (Drag and Drop) توسط کاربر است. فرض کنید قالب سایت شما به صورت کاشی های ویندوز ۸ باشد و شما بخواهید این حق را به کاربر خود دهید که کاشی ها را جابجا کند. و یا یک بازی ساده با استفاده از HTML5 بسازید! خوب برای این کار آموزش رو دنبال کنید:
ابتدا برای این که یک شی این قابلیت رو داشته باشه باید کد draggable=”true” رو داخل تگ اون وارد کنیم؛ برای مثال من برای یک لینک این خاصیت را فعال میکنم:

<a id=”drag1” href=”#” draggable="true">MyDesign</a>

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

<a id=”drag1” href=”#” draggable="true" ondragstart="dragUser(this,event)">MyDesign</a>

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

 function dragUser(user,event){
	event.dataTransfer.setData('User',user.id);
}

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

<div class="dr" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false"></div>

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

 function dropUser(target,event){
	var user=event.dataTransfer.getData('User');
	target.appendChild(document.getElementById(user));
}

کار تمام شد!
راستی شما میتونید شی های خودتون رو در جایی غیر DIV ای که برای Drop ساختید بنویسید و همچنین میتونید داخل خود DIV بنویسید و شی ها را جابجا کنید.
اینم تمام کد ها یکجا:

 <!DOCTYPE HTML>
<html>
<head>
<style>
.dr {
	width: 300px;
	height: 150px;
	background: #ccc;
	margin: 5px;
	float: left;
}
a {
	color: #7a102b;
	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>

در این نمونه شما میتونید جای لینک ها رو توی خود کادر تغییر بدید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
مجموعه عظیم آیکون های کاربردی (سری پنجم)
ایجاد انیمشین با استفاده از CSS
آموزش ساخت و تبدیل پترن به پترن قابل استفاده فتوشاپ
آموزش ساخت اسلایدر با سی اس اس
حذف علامت سوال از پایان آدرس در وردپرس
کاربرد و آموزش کار با گراواتار (Gravatar)