طراحی سایت در کرج|شرکت طراحی سایت|سئو در کرج|طراحی اپلیکشن موبایل

برای مشاهده بخش خدمات طراحی سایت به سمت پایین اسکرول کنید

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

قابلیت drag&drop با html5Reviewed by مهدی اخوان on Aug 26Rating:

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

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

Source code قابلیت drag&drop با html5 قابلیت drag&drop با html5 قابلیت drag&drop با html5 
<a id=”drag1” href=#” draggable="true">MyDesign</a>

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

Source code قابلیت drag&#038;drop با html5 قابلیت drag&#038;drop با html5 قابلیت drag&#038;drop با html5 
<a id=”drag1” href=#” draggable="true" ondragstart="dragUser(this,event)">MyDesign</a>

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

Source code قابلیت drag&#038;drop با html5 قابلیت drag&#038;drop با html5 قابلیت drag&#038;drop با html5 
function dragUser(user,event){
    event.dataTransfer.setData('User',user.id);
}

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

Source code قابلیت drag&#038;drop با html5 قابلیت drag&#038;drop با html5 قابلیت drag&#038;drop با html5 
<div class="dr" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false"></div>

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

Source code قابلیت drag&#038;drop با html5 قابلیت drag&#038;drop با html5 قابلیت drag&#038;drop با html5 
function dropUser(target,event){
    var user=event.dataTransfer.getData('User');
    target.appendChild(document.getElementById(user));
}

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

Source code قابلیت drag&#038;drop با html5 قابلیت drag&#038;drop با html5 قابلیت drag&#038;drop با html5 
<!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>

 

مطالب مرتبط

FOLLOW US