آموزش های حرفه ای
مای دیزاین به عنوان یکی از تولید کنندگان محتوای آموزشی در زمینه طراحی وب و گرافیک به صورت تصویری، با کیفیت و اختصاصی در خدمت شما کاربران عزیز می باشد!
نرم افزار آندروید
طراحی و ساخت نرم افزار آندروید خدمت جدیدی است که در مای دیزاین ارائه میشود. داشتن نرم افزار برای گوشی های هوشمند امری جدید و هیجان انگیز می باشد!
طراحی وب و گرافیک
یکی از خدمات ما طراحی سایت های ایستا و پویا با جدید ترین متد های روز دنیاست. ساخت قالب هایی سبک و در عین حال زیبا، با استفاده از وردپرس، تخصص ماست!
قابلیت گرفتن و انداختن (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 (بخش دوم)
نهایت کیفیت و حداقل حجم تصاویر
استایل نویسی حالت های مختلف لینک ها
مجموعه عظیم آیکون های کاربردی (سری چهارم)
عدم نمایش مطالب دسته ای خاص در صفحه اصلی وردپرس