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

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

 26 آگوست 2015

خوب همانطور که میدانید 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: 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>

[/codesyntax]