Hướng dẫn và ví dụ Javascript DragEvent

Xem thêm các chuyên mục:

Các hướng dẫn ECMAScript, Javascript

DragEvent

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- DragEvent

DragEvent là một interface đại diện cho các sự kiện xẩy ra trong quá trình kéo & thả (drag & drop) một đối tượng từ nơi này tới một nơi khác. Người dùng khởi tạo một việc kéo (drag) bằng cách đặt thiết bị trỏ (pointer device) (Chẳng hạn như chuột) trên bề mặt một đối tượng, nhấn xuống (press down), và di chuyển thiết bị trỏ sang một nơi khác, sau đó nhả ra (release) khỏi thiết bị trỏ, để thả (drop) đối tượng vào vị trí mới.

DragEvent là một interface con của MouseEvent, vì vậy nó thừa kết tất cả các thuộc tính (property) và các phương thức của MouseEvent.

Dưới đây là danh sách các kiểu sự kiện sẽ xẩy ra trong quá trình kéo thả.

Event	Element Type	Description
dragstart	Dragged Element	Sự kiện xẩy ra khi người dùng bắt đầu kéo một phần tử.
drag		Sự kiện xẩy ra khi một phần tử đang được kéo.
dragend		Sự kiện xẩy ra khi người dùng hoàn thành việc kéo một phần tử.

dragenter	Drop Target	Sự kiện xẩy ra khi phần tử được kéo đi vào một mục tiêu thả (drop target).
dragover		Sự kiện xẩy ra khi phần tử được kéo ở trên (over) mục tiêu thả.
dragleave		Sự kiện xẩy ra khi phần tử được kéo rời khỏi một mục tiêu thả.
drop		Sự kiện xẩy ra khi phần tử được kéo, được thả (drop) xuống mục tiêu.

Hình minh họa các sự kiện xẩy ra trong quá trình kéo thả (drag drop).

Property	Mô tả
dataTransfer	Trả về dữ liệu được kéo thả.

Xem một ví dụ đơn giản:

dragevents-example.html


<!DOCTYPE html>
<html>
   <head>
      <title>DragEvent Example</title>

      <script src="dragevents-example.js"></script>
      <style>
      .droptarget-div {
        float: left;
        width: 100px;
        height: 55px;
        margin: 25px 25px 5px 5px;
        padding: 10px;
        border: 1px solid black;
      }
      #dragtarget-div {
         background: #eee;
         padding: 5px;
      }
      </style>
   </head>
   <body>

      <h3>DragEvent example</h3>

      <p id="log-div">..</p>

      <!-- Drop Target 1 -->
      <div class="droptarget-div"
            ondragenter= "ondragenterHandler(event)"
            ondragover="dragoverHandler(event)"
            ondrop="dropHandler(event)">

         <p id="dragtarget-div"
               ondragstart="dragstartHandler(event)"
               ondrag="dragHandler(event)"
               draggable="true">
            Drag me!
          </p>

      </div>

      <!-- Drop Target 2 -->
      <div class="droptarget-div"
           ondragenter= "ondragenterHandler(event)"
           ondragover="dragoverHandler(event)"
           ondrop="dropHandler(event)">

      </div>




   </body>
</html>

dragevents-example.js



// --------- Handlers for 'Dragged Element' ------------------
function dragstartHandler(evt) {
  evt.dataTransfer.setData("MyDraggedElementId", evt.target.id);
}

// dragging ...
function dragHandler(evt) {
   showLog("The p element is being dragged");
}


// --------- Handlers for 'Drop Target' ------------------

function ondragenterHandler()  {
   showLog("The p element enter drop-target");
}

// When 'over' you can 'release mouse' to 'drop'.
function dragoverHandler(evt) {
    evt.preventDefault(); // Important!!
}

function dropHandler(evt) {
   evt.preventDefault(); // Important!!

   var elementId = evt.dataTransfer.getData("MyDraggedElementId");
   evt.target.appendChild(document.getElementById(elementId));
   showLog("The p element was dropped");
}

// -------------------------------------------------------

function showLog(text)  {
   document.getElementById("log-div").innerHTML = text;
}

Ví dụ, người dùng kéo các tập tin trên máy tính của họ và thả vào một phần tử <div>, bạn có thể đọc các thông tin cơ bản, và nội dung của các tập tin mà người dùng đã kéo thả vào.

Khi sự kiện drop xẩy ra, event.dataTransfer.files trả về một đối tượng FileList, đối tượng này chứa danh sách các đối tượng File.

drop-files-example.html


<!DOCTYPE html>
<html>

<head>
    <title>DragEvent Example</title>
    <meta charset="UTF-8">

    <script src="drop-files-example.js"></script>

    <style>
        #drop-area {
            border: 1px solid blue;
            padding: 15px;
        }
    </style>

</head>

<body>

    <h3>Drop files example</h3>

    <div id="drop-area" ondragover="dragoverHandler(event)" ondrop="dropHandler(event)">
        Drop files here
    </div>

    <output id="log-div"></output>

</body>

</html>

drop-files-example.js


function dropHandler(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    // FileList object.
    var files = evt.dataTransfer.files;

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), //
            '</strong> (', f.type || 'n/a', ') - ', //
            f.size, ' bytes, last modified: ',
            f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
            '</li>');
    }
    document.getElementById('log-div').innerHTML = '<ul>' + output.join('') + '</ul>';
}

function dragoverHandler(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    // Explicitly show this is a copy.
    evt.dataTransfer.dropEffect = 'copy';
}

File (API)

Xem thêm các chuyên mục:

Các hướng dẫn ECMAScript, Javascript