۲۰
مهر

جلسه ۵۲ : قابلیت درگ کردن در HTML

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در آخرین مباحث ارائه شده در دوره آموزش کامل HTML ، در پی وی لرن، موضوعات مهم و کاربردی گرافیک در HTML5 و مبحث چند رسانه ای در HTML5 ، پرداختیم. اکنون به تازگی وارد مباحث آموزشی کار با API در HTML شده ایم. و همچنین موضوع موقعیت جغرافیای در html5 ،را بررسی کردیم. در ادامه این فصل ، در این بخش از آموزش به موضوع کار با قابلیت درگ کردن در HTML یا کد درگ در صفحه وب ، می پردازیم.

fig9-1

کار با قابلیت درگ کردن در HTML

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

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

مثال:این یک مثال ساده از قابلیت درگ است:

مثال : تست درگ کردن

<!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>

<!DOCTYPE HTML>

<html>

<head>

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>

<img id="drag1" src="img_logo.gif" draggable="true"

ondragstart="drag(event)" width="336" height="69">

</body>

</html>

خودتان امتحان کنید »

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

اعمال ویژگی draggable روی عناصر مختلف

ابتدا برای تمام عناصر ، قابلیت draggable ، را با ارزش TRUE برابر کنید:

مثال :

<img draggable="true">

1	<img draggable="true">

مشخص کردن عمل درگ

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

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

مثال:

مثال :

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

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

عنصر به کجا درگ شود

رویداد ondragover ، جایی که عنصر قرار است به آنجا درگ شود را مشخص می کند.

در حالت عادی عنصر نمی تواند به عنصر دیگری درگ شود. برای اینکار باید ابتدا از ویژگی پیش فرض prevent ، استفاده کنید:

مثال :

event.preventDefault()

1	event.preventDefault()

دستور کامل درگ

هنگامی عنصری کشیده و رها شود. تابع drop ، فراخوانی می شود.

مثال:

مثال :

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

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

تشریح کد فوق :

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

یک مثال دیگر :

مثال : مثال دوم درگ کردن

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
</style>
<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>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<style>

#div1, #div2 {

float: left;

width: 100px;

height: 35px;

margin: 10px;

padding: 10px;

border: 1px solid black;

}

</style>

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>

<p>Drag the image back and forth between the two div elements.</p>

</div>

</body>

</html>

خودتان امتحان کنید »

کلام آخر

یکی دیگر از ویژگی ها و قابلیت های جالبی که در html5 ارائه شده و به کمک کدهای جاوا اسکریپت قابل پیاده سازی است، قابلیت درگ کردن در HTML می باشد که برای مواقعی که نیاز دارید آبجکتی مانند یک تصویر در html قابل درگ توسط کاربر باشد، کاربرد دارد.

به اشتراک بگذارید

درگ در html ,کد جاوااسکریپت برای درگ در صفحه وب ,کد درگ در صفحه وب

دیدگاه کاربران

تعداد دیدگاه : 3

rahil
بهمن ۷, ۱۳۹۷
سلام
ممنون از آموزش هایی که گذاشتید.
با آرزوی موفقیت برای شما
پاسخ دادن
داود
مهر ۱۶, ۱۳۹۸
خیلی ممنون که مطلب w3school رو ترجمه کردید.
پاسخ دادن
- پی وی لرن
  مهر ۱۶, ۱۳۹۸
  خواهش می کنم نظر لطف شماست.
  می توانید برای پیشرفت بیشتر و سرعت بیشتر در یادگیری در دوره طراحی وب در بخش فیلم های آموزشی شرکت نمایید.
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۵۲ : قابلیت درگ کردن در HTML

مقدمه

کار با قابلیت درگ کردن در HTML

اعمال ویژگی draggable روی عناصر مختلف

مشخص کردن عمل درگ

عنصر به کجا درگ شود

دستور کامل درگ

کلام آخر

لیست مطالب دوره

آموزش HTML

فرم در HTML

HTML5

گرافیک در HTML

چند رسانه ای در html

APIs در HTML

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ