آموزش HTML 5 - drag & drop عناصر در صفحات وب
آموزش HTML 5 - drag & drop عناصر در صفحات وب
drag & drop عناصر در صفحات وب :
یکی از قابلیت های هیجان انگیز و جالب HTML 5 ، این است که شما می توانید کاری کنید عنصر مورد نظرتان در صفحه وب ، قابل جابه جا شدن باشد . به عبارت دیگر کاربر بتواند آن را از نقطه ای به نقطه دیگر drag & drop کند .
برای مثال شما می توانید کدی طراحی کنید تا کاربر بتواند یک عکس را از مکان اولیه آن به یک مکان دوم که تعیین نموده اید ، به وسیله موس بلند کرده و جابه جا کند .
این کار نیازمند کد نویسی و تعریف چند تابع است . برای اینکه درک بهتری از نحوه کار داشته باشید ، ابتدا نمونه کد لازم برای انجام این عملیات را به شما نشان می دهیم . سپس مرحله به مرحله اقدام به تشریح کد می کنیم .
کد لازم برای dargable ( قابل جابه جا بودن ) یک عکس و سپس انتقال آن در جدول زیر به شما نمایش داده شده است . به کد دقت کنید . در ادامه هر مرحله از کد را توضیح داده ایم :
| نمونه کد |
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data ));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</body> |
مرحله اول - عنصر مورد نظر را قابل جا به جا کردن کنید :
در مرحله اول باید کاری کنید تا عنصر مورد نظرتان برای drag & drop کردن ، قابل جا به جا شدن باشد .
برای این منظور بایر مقدار خاصیت drggable آن را بر روی مقدار true تنظیم نمایید .
| کد لازم |
< img draggable = " true " /> |
مرحله دوم - تعیین عنصری که می خواهید جا به جا شود :
در مرحله دوم باید عنصری را که می خواهید جا به جا شود و همچنین اتفاقی که پس از darg کردن آن قرار است بیفتد را تعیین می کنید .
کد مربوط به این قسمت ، قطعه کد زیر است :
| کد لازم |
function drag ( ev )
{
ev.dataTransfer.setData ( " Text " , ev.target.id ) ;
} |
متد ( ) dataTransfer.setData اطلاعات عنصری که قرار است darg شود ، یعنی id آن را دریافت کرده و در حافظه مرورگر قرار می د هد . این id از نوع " text " بوده و مقدار آن در این مثال drag1 است .
مرحله سوم - عنصر darg شده در کجا drop شود ؟ :
پس از اینکه عنصر مورد نظر را انتخاب کرده و آن را drag کردیم ، باید مکانی که فرود ( drop ) می آید را تعیین کنیم . این کار توسط کد زیر انجام می شود :
| کد لازم |
function drop(ev)
{
var data = ev.dataTransfer.getData( " Text " ) ;
ev.target.appendChild ( document.getElementById ( data ) );
ev.preventDefault( );
} |
مشاهده خروجی کد مثال :
خروجی اکتیو کد بالا در جدول زیر نمایش داده شده است عکس لوگوی HTML 5 را drag & drop کرده و در تگ div تعیین شده ، رها کنید :
