جستجو برای:
  • خانه
  • دوره‌ها
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • ویدیوها
  • پادکست‌ها
  • از من بپرس
  • حساب کاربری
 
بهترین ایده
  • خانه
  • دوره‌ها
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • ویدیوها
  • پادکست‌ها
  • از من بپرس
  • حساب کاربری
0
ورود / عضویت

وبلاگ

بهترین ایده / طراحی سایت / کشیدن و رها کردن

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

23 آبان 1396
اسماعیلی
طراحی سایت
11 بازدید
کشیدن و رها کردن

کشیدن و رها کردن  در  html چیست؟

آموزش APIs درس دوم

کشیدن و انداختن

کشیدن و رها کردن یک ویژگی بسیار رایج است. این زمانی اتفاق می افتد  که شما “شیء” را جابجا کنید و آن را به مکان دیگری بکشید.

در HTML5، کشیدن و رها  کردن بخشی از استاندارد است: هر عنصر می تواند draggable (یعنی قابلیت کشیدن داشته باشد ) باشد.

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

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

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

API کروم  اینترنت اکسپلورر فایرفاکس  سافاری آپرا
Drag and Drop 4.0 9.0 3.5 6.0 12.0

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

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

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

[php] <!DOCTYPE HTML>
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Afunction%20allowDrop(ev)%20%7B%0A%20%20%20%20ev.preventDefault()%3B%0A%7D%0A%0Afunction%20drag(ev)%20%7B%0A%20%20%20%20ev.dataTransfer.setData(%22text%22%2C%20ev.target.id)%3B%0A%7D%0A%0Afunction%20drop(ev)%20%7B%0A%20%20%20%20ev.preventDefault()%3B%0A%20%20%20%20var%20data%20%3D%20ev.dataTransfer.getData(%22text%22)%3B%0A%20%20%20%20ev.target.appendChild(document.getElementById(data))%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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>
[/php]

 

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


عنصر Draggable را ایجاد کنید


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

[php] <img draggable="true">

[/php]

 

چه عنصری برای کشیدن است  – ondragstart و setData ()

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

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

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

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

در این مورد، نوع داده “text” است و مقدار شناسه عنصر draggable ، مقدار (“drag1”) می باشد.

 

عمل انداختن چطور انجام می شود – ondragover

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

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

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

[php] event.preventDefault()
[/php]

عمل کشیدن و انداختن را انجام دهید.

هنگامی که داده های کشیدن  را رها می کنیم ، عمل رها کردن اتفاق می افتد.

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

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

توضیح کد:

call preventDefault ()  را فراخوانی کنید تا مانع از این شود که مرورگر به صورت پیش فرض به داده ها دسترسی داشته باشد   (به طور پیش فرض به عنوان لینک برای انداختن باز است)
داده های کشیده  شده را با روش dataTransfer.getData () دریافت کنید. این روش هر نوع اطلاعاتی را که در روش setData () برای همان نوع تنظیم شده  را بازمی گرداند.
داده کشيده شده، شناسه عنصر کشيده شده است (drag1)
عنصر کشیده  شده را به عنصر رها  شده اضافه کنید.

اشتراک گذاری:
برچسب ها: HTML
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!
مطالب زیر را حتما بخوانید
  • طراحی واکنش گرا
    چرا طراحی سایت واکنش گرا مهم است؟

    13 بازدید

  • طراحی سایت
    طراحی سایت و رازهای فروش بیشتر

    58 بازدید

  • پوسته فرزند
    پوسته فرزند چیست و چگونه پوسته فرزند ایجاد کنیم؟

    17 بازدید

  • شروع کار css
    شروع کار css

    12 بازدید

  • سینتکس و انتخابگرهای css
    سینتکس و انتخابگرهای css

    13 بازدید

  • معرفی css
    معرفی css

    13 بازدید

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
جدیدترین مطالب
  • ۷۰ ایده کسب و کار با سرمایه کم
  • پولسازی با اینستاگرام
  • ۱۲ روش افزایش فالوور اینستاگرام
  • کسب درآمد از اینستاگرام و معرفی ۳ روش کسب درآمد
  • ۳ ایده کار در منزل پولساز با سرمایه کم
آموزش رایگان
  • کسب و کار اینترنتی
  • اصول مقدماتی سئو
  • بازاریابی اینترنتی
  • ایمیل مارکتینگ
  • افزایش فالوور اینستاگرام
  • کسب درآمد از اینستاگرام
  • افزایش ترافیک سایت
  • افزایش سرعت سایت
پربازدید
  • درباره ما
  • تماس با ما
  • همکاری در فروش
  • هفته نامه
بهترین ایده
کسب و کار شما می‌تواند رشد کند. درآمد شما می‌تواند چند برابر شود. فقط کافی است مسیر درست را بشناسید. کافی است یاد بگیرید تا مشتریان خود را در زمان درست، مکان درست و به روش درست هدف قرار دهید. ما در این مسیر همراه شما هستیم.
بهترین ایده : کسب و کار اینترنتی برای همه
ورود ×
کد تایید
لطفاً کد تأیید ارسال شده را تایپ کنید
ثبت
رمز عبور را فراموش کرده اید؟
ورود با کد یکبارمصرف
ارسال مجدد کد یکبار مصرف(00:30)
آیا حساب کاربری ندارید؟
ثبت نام
ارسال مجدد کد یکبار مصرف(00:30)
برگشت به ورود

ارسال مجدد کد یکبار مصرف (00:30)
برگشت به ورود
  • (+93) افغانستان
  • (+355) آلبانى
  • (+213) الجزيره
  • (+1) آمریکن ساموا
  • (+376) آندورا
  • (+244) آنگولا
  • (+1) آنگویلا
  • (+1) Antigua
  • (+54) آرژانتين
  • (+374) ارمنستان
  • (+297) آروبا
  • (+61) استرالیا
  • (+43) اتریش
  • (+994) آذربایجان
  • (+973) بحرين
  • (+880) بنگلادش
  • (+1) باربادوس
  • (+375) بلاروس
  • (+32) بلژيك
  • (+501) بلیز
  • (+229) بنین
  • (+1) برمودا
  • (+975) بوتان
  • (+591) بوليوي
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) بوسني و هرزگوين
  • (+267) بوتسوانا
  • (+55) برزيل
  • (+246) محدوده اقیانوس هند تحت سیطره بریتانیا
  • (+1) British Virgin Islands
  • (+673) برونئی
  • (+359) بلغارستان
  • (+226) بورکینافاسو
  • (+257) بوروندی
  • (+855) کامبوج
  • (+237) كامرون
  • (+1) كانادا
  • (+238) کیپ ورد
  • (+1) جزابر کیمن
  • (+236) جمهوری آفریقای مرکزی
  • (+235) چاد
  • (+56) شيلي
  • (+86) چين
  • (+57) كلمبيا
  • (+269) کومور
  • (+682) جزایر کوک
  • (+225) Côte d'Ivoire
  • (+506) كاستا ريكا
  • (+385) كرواسي
  • (+53) كوبا
  • (+599) Curaçao
  • (+357) قبرس
  • (+420) جمهوري چك
  • (+243) Democratic Republic of the Congo
  • (+45) دانمارك
  • (+253) جیبوتی
  • (+1) دومنيكا
  • (+1) جمهوري دومنيكا
  • (+593) اكوادر
  • (+20) مصر
  • (+503) الساوادر
  • (+240) گینه استوایی
  • (+291) اریتره
  • (+372) استوني
  • (+251) اتيوپي
  • (+500) جزایر فالکلند
  • (+298) جزایر فارو
  • (+691) Federated States of Micronesia
  • (+679) فیجی
  • (+358) فنلاند
  • (+33) فرانسه
  • (+594) گویان فرانسه
  • (+689) پلی نزی فرانسه
  • (+241) گابون
  • (+995) Georgia
  • (+49) آلمان
  • (+233) غنا
  • (+350) جبل الطارق
  • (+30) يونان
  • (+299) گرینلند
  • (+1) گرانادا
  • (+590) گوادولوپ
  • (+1) گوام
  • (+502) گواتمالا
  • (+44) گرنزی
  • (+224) گينه
  • (+245) گينه بي سائو
  • (+592) گویان
  • (+509) هائيتي
  • (+504) هندوراس
  • (+852) هنگ كنگ
  • (+36) مجارستان
  • (+354) ایسلند
  • (+91) هند
  • (+62) اندونزي
  • (+98) ایران
  • (+964) عراق
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) رژيم صهيونيستي
  • (+39) ايتاليا
  • (+1) جامائيكا
  • (+81) ژاپن
  • (+44) جرسي
  • (+962) اردن
  • (+7) قزاقستان
  • (+254) كنيا
  • (+686) كيريبيتي
  • (+965) كويت
  • (+996) قرقیزستان
  • (+856) لائوس
  • (+371) لتونی
  • (+961) لبنان
  • (+266) لسوتو
  • (+231) لیبریا
  • (+218) ليبي
  • (+423) لیختن اشتاین
  • (+370) ليتواني
  • (+352) لوكسامبورگ
  • (+853) Macau
  • (+389) Macedonia
  • (+261) ماداگاسكار
  • (+265) مالاوی
  • (+60) مالزي
  • (+960) مالديو
  • (+223) مالي
  • (+356) مالتا
  • (+692) جزایر مارشال
  • (+596) مارتینیک
  • (+222) موریتانی
  • (+230) موریس
  • (+262) مایوت
  • (+52) مكزيك
  • (+373) مالديو
  • (+377) موناکو
  • (+976) مغولستان
  • (+382) مونته نگرو
  • (+1) مونتسرات
  • (+212) مراكش
  • (+258) موزامبيك
  • (+95) ميانمار
  • (+264) نامیبیا
  • (+674) نائورو
  • (+977) نپال
  • (+31) هلند
  • (+687) کالدونیای جدید
  • (+64) نيوزلند
  • (+505) نیکاراگوئه
  • (+227) نیجر
  • (+234) نيجريه
  • (+683) نیوئه
  • (+672) جزیره نورفولک
  • (+850) كره ي شمالي
  • (+1) جزایر ماریانای شمالی
  • (+47) نروژ
  • (+968) عمان
  • (+92) پاكستان
  • (+680) Palau
  • (+970) فلسطین
  • (+507) پاناما
  • (+675) پاپوا گينه ي نو
  • (+595) پاراگوئه
  • (+51) پرو
  • (+63) فيليپين
  • (+48) لهستان
  • (+351) پرتغال
  • (+1) پورتوریکو
  • (+974) قطر
  • (+242) کنگو
  • (+40) روماني
  • (+262) Runion
  • (+7) روسيه
  • (+250) رواندا
  • (+290) سنت هلن
  • (+1) سنت کیتس و نویس
  • (+508) سنت پیر و میکلون
  • (+1) سنت وینسنت و گرنادین
  • (+685) ساموا
  • (+378) سن مارینو
  • (+239) Sao Tome and Principe
  • (+966) عربستان سعودی
  • (+221) سنگال
  • (+381) صربستان
  • (+248) سیشل
  • (+232) سیرالئون
  • (+65) سنگاپور
  • (+1) Sint Maarten
  • (+421) اسلواکی
  • (+386) اسلونی
  • (+677) جزاير سليمان
  • (+252) سومالی
  • (+27) آفريقای جنوبي
  • (+82) كره ی جنوبي
  • (+211) سودان جنوبی
  • (+34) اسپانيا
  • (+94) سريلانكا
  • (+1) St. Lucia
  • (+249) سودان
  • (+597) سورینام
  • (+268) سوازیلند
  • (+46) سوئد
  • (+41) سوييس
  • (+963) سوريه
  • (+886) تايوان
  • (+992) تاجيكستان
  • (+255) تانزانيا
  • (+66) تايلند
  • (+1) The Bahamas
  • (+220) گامبیا
  • (+670) تیمور
  • (+228) توگو
  • (+690) توکلائو
  • (+676) تونگا
  • (+1) ترینیداد و توباگو
  • (+216) تونس
  • (+90) تركيه
  • (+993) تركمنستان
  • (+1) جزایر تورکس و کایکوس
  • (+688) تووالو
  • (+1) U.S. Virgin Islands
  • (+256) اوگاندا
  • (+380) اوكراين
  • (+971) امارات متحده ي عربي
  • (+44) انگلیس
  • (+1) امریکا
  • (+598) اوروگوئه
  • (+998) ازبكستان
  • (+678) وانواتو
  • (+58) ونزوئلا
  • (+84) ويتنام
  • (+681) والیس و فوتونا
  • (+212) صحرای غربی
  • (+967) يمن
  • (+260) زامبیا
  • (+263) زیمباوه

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت