ondragstart ایوینٹ

DOM ایوینٹ DragEvent

تعریف و استفاده

رویداد ondragstart وقتی که کاربر شروع به کشیدن عنصر یا انتخاب متن می‌کند، رخ می‌دهد.

کشیدن و رها کردن یکی از ویژگی‌های بسیار رایج HTML5 است. یعنی وقتی که یک شیء را "گرفتید" و آن را به مکان دیگری می‌کشید. برای یادگیری بیشتر، لطفاً مطالب ما را درباره HTML5 ڈرگ اینڈ ڈرپآموزش HTML کلی استفاده کنید.

توضیح:برای اینکه عنصر قابل کشیدن باشد، از ویژگی draggable HTML5\u3002

توضیح:به طور پیش‌فرض، لینک‌ها و تصاویر قابل کشیدن هستند و نیازی به ویژگی draggable نیست.

در مراحل مختلف عمل کشیدن و رها کردن، بسیاری از رویدادها استفاده می‌شوند و ممکن است رخ دهند:

رویدادهایی که روی عنصر قابل کشیدن (عنصر منبع) قرار می‌گیرند:

  • ondragstart - وقتی که کاربر شروع به کشیدن عنصر می‌کند، رخ می‌دهد
  • ondrag - وقتی که عنصر کشیده می‌شود، رخ می‌دهد
  • ondragend - وقتی که کاربر عمل کشیدن عنصر را تمام می‌کند، رخ می‌دهد

رویدادهایی که روی هدف قرار می‌گیرند:

  • ondragenter - وقتی که عنصر کشیده شده به داخل هدف وارد می‌شود، رخ می‌دهد
  • ondragover - وقتی که عنصر کشیده شده روی هدف قرار دارد، رخ می‌دهد
  • ondragleave - وقتی که عنصر کشیده شده از هدف خارج می‌شود، رخ می‌دهد
  • ondrop - وقتی که عنصر کشیده شده روی هدف قرار می‌گیرد، رخ می‌دهد

مثال‌ها

وقتی که کاربر شروع به کشیدن عنصر <p> می‌کند، JavaScript اجرا می‌شود:

<p draggable="true" ondragstart="myFunction(event)">Drag me!</p>

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

در پایین صفحه، مثال‌های بیشتری از TIY وجود دارد.

نحوه‌ی نوشتن

در HTML:

<عنصر ondragstart="myScript">

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

در JavaScript:

آبجکت.ondragstart = function(){myScript};

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

در JavaScript، از روش addEventListener() استفاده می‌کنید:

آبجکت.addEventListener("dragstart", myScript);

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

توضیح:Internet Explorer 8 یا قدیمی تر نسخه‌ها پشتیبانی نمی‌کنند addEventListener() \u65b9\u6cd5\u3002

\u6280\u672f\u8be6\u7ec6

\u6d6e\u6298 \u652f\u6301
\u53ef\u53d6\u6d88 \u652f\u6301
\u4e8b\u4ef6\u7c7b\u578b\uff1a DragEvent
\u652f\u6301\u7684 HTML \u6807\u7b7e\u5217\u8868\uff1a \u6240\u6709\u5e38\u89c4\u7684 HTML \u5143\u7d20
DOM \u7248\u672c\uff1a Level 3 Events

\u6d4f\u8bfb\u5668\u652f\u6301

\u8868\u4e2d\u7684\u6570\u5b57\u660e\u660e\u4e86\u5171\u6709\u652f\u6301\u8be5\u4e8b\u4ef6\u7684\u9884\u65ad\u6b21\u6d4f\u8bfb\u5668\u7248\u672c。

\u4e8b\u4ef6 Chrome IE Firefox Safari Opera
ondragstart 4.0 9.0 3.5 6.0 12.0

更多\u5b9e\u4f8b

\u5bf9\u6240\u6709\u53ef\u80fd\u7684\u622a\u62df\u4e8b\u4ef6\u7684\u6f14\u793a:

<p draggable="true" id="dragtarget">\u622a\u6211\u3002!</p>
<div class="droptarget">\u6b63\u5907\u622a\u52a8\u3002!</div>
<script>
/* ----------------- \u5728\u622a\u52a8\u76ee\u6807\u4e0a\u89e6\u53d1\u7684\u4e8b\u4ef6 ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData()\u65b9\u6cd5\u8bbe\u7f6e\u88ab\u622a\u52a8\u6570\u636e\u7684\u6570\u636e\u7c7b\u578b\u548c\u503c
  event.dataTransfer.setData("Text", event.target.id);
  // \u5f00\u59cb\u622a\u52a8\u5b57\u7b26\u4ee3\u5e93\u65f6\u8f93\u51fa\u4e00\u4e9b\u6587\u672c
  document.getElementById("demo").innerHTML = "/\u5f00\u59cb\u622a\u52a8\u5b57\u7b26\u4ee3\u5e93\u3002";
  // \u4fee\u6539\u53ef\u622a\u52a8\u5143\u7d20\u7684\u4e0d\u901a\u6982\u5ea6
  event.target.style.opacity = "0.4";
});
// \u622a\u52a8\u5b57\u7b26\u4ee3\u5e93\u65f6\u4fee\u6539\u8f93\u51fa\u6587\u672c\u7684\u989c\u8272
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// \u5b8c\u6210\u622a\u52a8\u5b57\u7b26\u4ee3\u5e93\u540e\u8f93\u51fa\u4e00\u4e9b\u6587\u672c\u5e76\u91cd\u7f6e\u4e0d\u901a\u6982\u5ea6
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "/\u6b63\u5907\u622a\u52a8\u4e86\u5b57\u7b26\u4ee3\u5e93\u3002";
  event.target.style.opacity = "1";
});
/* ----------------- ਪਾਠ ਟੀਚੇ 'ਤੇ ਟ੍ਰਿਗਰ ਹੋਣ ਵਾਲੇ ਈਵੈਂਟ ----------------- */
// ਜਦੋਂ ਟ੍ਰੈਕਬਲ ਪੰਨੇ droptarget ਵਿੱਚ ਆਉਂਦਾ ਹੈ, DIV ਦੀ ਬਾਰੀਕੀ ਸਟਾਈਲ ਬਦਲੋ
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// ਮੂਲ ਰੂਪ ਵਿੱਚ, ਕਿਸੇ ਹੋਰ ਤੱਤ ਵਿੱਚ ਡਾਟਾ/ਤੱਤ ਨੂੰ ਪਾਠਣ ਦੀ ਇਜਾਜਤ ਨਹੀਂ ਹੈ। ਪਾਠਣ ਨੂੰ ਇਜਾਜਤ ਦੇਣ ਲਈ, ਅਸੀਂ ਤੱਤ ਦੀ ਮੂਲ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਰੋਕਣਾ ਹੋਵੇਗਾ
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// ਜਦੋਂ ਟ੍ਰੈਕਬਲ ਪੰਨੇ droptarget ਤੋਂ ਬਾਹਰ ਜਾਂਦਾ ਹੈ, DIV ਦੀ ਬਾਰੀਕੀ ਸਟਾਈਲ ਮੁੜ ਸੈਟ ਕਰੋ
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* ਪਾਠ ਉੱਤੇ ਪਿੱਛੇ - ਬਰਾਉਜ਼ਰ ਨੂੰ ਡਾਟਾ ਦੀ ਮੂਲ ਪ੍ਰਕਿਰਿਆ ਤੋਂ ਰੋਕੋ (ਮੂਲ ਪਾਠ ਨੂੰ ਲਿੰਕ ਵਜੋਂ ਖੋਲ੍ਹੋ) */
ਆਉਟਪੁੱਟ ਟੈਕਸਟ ਦੀ ਰੰਗ ਅਤੇ DIV ਦੀ ਬਾਰੀਕੀ ਰੰਗ ਮੁੜ ਸੈਟ ਕਰੋ
dataTransfer.getData() ਮੱਥਕ ਦੀ ਮੰਗ ਨਾਲ ਖਿੜ੍ਹਾ ਵਾਲੇ ਤੱਤ ਦਾ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰੋ
ਖਿੜ੍ਹਾ ਵਾਲੇ ਤੱਤ ਦਾ ਡਾਟਾ ਉਸ ਦਾ id ਹੈ ("drag1")
ਖਿੜ੍ਹੀ ਵਾਲੇ ਤੱਤ ਨੂੰ ਪਾਠਤੱਤ ਵਿੱਚ ਜੋੜੋ
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});
</script>

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਬੰਧਤ ਪੰਨੇ

HTML ਸਿੱਖਿਆ: HTML5 ਖਿੜ੍ਹਾ ਫੰਕਸਨ

HTML ਪੁਸਤਕਾਂ: HTML draggable ਵਿਸ਼ੇਸ਼ਤਾ

DOM ایوینٹ DragEvent