بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML المان های فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 المان های جدید HTML5 المان های معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

چندرسانه ای HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

API کشیدن و رها کردن HTML5


W3Schools

با موس تصویر farsiw3 را از یک مستطیل به سمت چپ بکشید


کشیدن و رها کردن - Drag and Drop

Drag and Drop کشیدن و رها کردن یک ویژگی بسیار رایج است. این زمانی است که شما یک شی را "بگیرید" و آن را به مکان دیگری بکشید.

در HTML5 کشیدن و رها کردن بخشی از استاندارد است: هر عنصری قابل کشیدن است. از JavaScript برای این کار استفاده می شود.


پشتیبانی از مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کند که از Drag and Drop به طور کامل پشتیبانی می کند.

API Chrome Edge Firefox Safari Opera
کشیدن و رها کردن 4.0 9.0 3.5 6.0 12.0

مثال کشیدن و رها کردن HTML

مثال زیر یک مثال کشیدن و رها کردن است:

مثال

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</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>
</html>
خودتان آزمایش کنید»

ممکن است پیچیده به نظر برسد ، اما اجازه می دهد تا تمام قسمتهای مختلف یک رویداد کشیدن و رها کردن را مرور کنید.


یک عنصر قابل کشیدن بسازید

اول از همه: برای کشیدن یک عنصر ، ویژگی قابل کشیدن draggable را روی true تنظیم کنید:

<img draggable="true">

چه چیزی را بکشیم - ()ondragstart و setData

سپس ، مشخص کنید هنگام کشیدن عنصر چه اتفاقی می افتد.

در مثال بالا ، ویژگی ondragstart یک تابع ، drag (event) را فراخوانی می کند که مشخص می کند چه داده هایی باید کشیده شوند.

روش ()dataTransfer.setData نوع داده و مقدار داده های کشیده شده را تنظیم می کند:

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

در این حالت ، نوع داده "متن" است و مقدار آن شناسه عنصر قابل کشیدن است ("drag1").


با کشیدن کجا رها شود - ondragover

رویداد ondragover مشخص می کند که داده های کشیده شده کجا می توانند رها شوند.

به طور پیش فرض ، داده ها / عناصر را نمی توان در عناصر دیگر رها کرد. برای اجازه دادن به یک رها سازی ، باید از کنترل پیش فرض عنصر جلوگیری کنیم.

این کار با فراخوانی متد () event.preventDefault برای رویداد ondragover انجام می شود:

event.preventDefault()

رها کردن را انجام دهید - ondrop

وقتی داده های کشیده شده رها می شوند ، یک رویداد رها شدن اتفاق می افتد.

در مثال بالا ، ویژگی ondrop یک تابع ، رها (event) را فراخوانی می کند:

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

توضیح کد :

  • برای جلوگیری از مدیریت پیش فرض داده ها در مرورگر ، از ()preventDefault استفاده بگیرید (پیش فرض بصورت پیوند افتاده باز است)
  • داده های کشیده شده را با روش () dataTransfer.getData دریافت کنید. این روش هر داده ای را که در روش ()setData به همان نوع تنظیم شده است ، برمی گرداند ;
  • داده های کشیده شده شناسه عنصر کشیده شده است ("drag1")
  • عنصر کشیده شده را به عنصر رها شده اضافه کنید

مثالهای بیشتر

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

چگونه یک تصویر را بین دو عنصر <div> به عقب و جلو بکشیم :

خودتان آزمایش کنید»





این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir