یکی از قابلیت های هیجان انگیز و جالب 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 مرتبط می سازد .

مشاهده خروجی کد مثال :

خروجی اکتیو کد بالا در جدول زیر نمایش داده شده است عکس لوگوی HTML 5 را drag & drop کرده و در تگ div تعیین شده ، رها  کنید :

Example

خروجی

طراحی قالب وردپرس اصلی ترین حرفه در شرکت فناوی اطلاعات آنفایو است. مهمترین دستاوردطراحی قالب وردپرس باید شناساندن نام تجاری ، معرفی خدمات و محصولات شما باشد که رسیدن به این مهم با رعایت استانداردهای جهانی طراحی سایت که شامل بهینه سازی وب سایت بر اساس الگوریتم موتورهای جستجو ، در کنار داشتن ظاهری زیبا فراهم می شود. در دنیای مجازی امروز و عصر پیشرفته ارتباطات برای صاحبان سازمان ها ، نهادهای دولتی و صاحبان مشاغل وکسب وکار آزاد داشتن یک وب سایت امری ضروری است .از مزایای داشتن سایت معرفی ، اطلاع رسانی ، بازاریابی و قابلیت های نوین تبلیغاتی میباشد .کاربران میتوانند از هر نقطه دنیا فقط با یک کلیک به شما دسترسی داشته باشند.

شرکت آنفایو خدمات طراحی سایت (طراحی وب) خود را، با توجه به نیازهای کارفرمایان، نوع فعالیت و متناسب با بودجه در نظر گرفته شده برای طراحی سایت (طراحی وب) در نظر می گیرد. آنفایو با بهره گیری از بهتریت متخصصین حرفه ای برنامه نویسی ، داشتن تیم تخصصی طراحی سایت ، تسلط به علوم روز دنیای کامپیوتر و اینترنت و مشاوره رایگان وپشتیبانی ۲۴ ساعته آمادگی خود را برای طراحی وب سایت های دولتی ، سازمانی ، شرکتی وشخصی با تلفیق هنر گرافیک دیجیتالی و جدیدترین تکنیک های برنامه ویسی اعلام میدارد .افزایش آمار ، دسترسی ساده کاربران و سرعت وب سایت خود را به شرکت طراحی سایت و طراحی قالب وردپرس آنفایو بسپارید.

 

نظر خود را بگذارید

-- بارگیری کد امنیتی --