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 ) ; } |
در کد بالا ، خاصیت ondragstart عنصر عکس تگ ( < img > ) ، رویداد ( drag ( event را فراخوانی می کند . این رویداد تعیین می کند چه عنصری می خواهد drag شود . این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عکس کلیک کرده و سعی می کنید آن را بکشید .
متد ( ) 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( ); } |
هنگامی که عکس را در مکان تعیین شده رها می کنید ، رویداد ondrop تگ < div > رخ داده و تابع drop را فراخوانی می کند ..تابع drop توسط متد ( ) ev.dataTransfer.getData ، شناسه یا همان id عنصر drag شده را دریافت کرده و با متد ev.target.appendChild آن را به تگ div مرتبط می سازد .
ارسال کردن دیدگاه جدید