Update DnD test.

sanketj · Sep 26, 2023 · 5daff1a · 5daff1a
1 parent a17fe7a
commit 5daff1a
Showing 1 changed file with 51 additions and 3 deletions.
diff --git a/drag-and-drop-sample.html b/drag-and-drop-sample.html
@@ -6,6 +6,9 @@
  border: 2px solid black;
  width: 100%;
  }
+ #draggable-div-with-pointer-events-none {
+ pointer-events: none;
+ }
  </style>
  </head> 
  <body>
@@ -16,6 +19,10 @@
  <br/>
  <div draggable="false">Non-draggable div</div>
  <br/>
+ <div title="Default draggable div" id="default-draggable-div">Default draggable div</div>
+ <br/>
+ <div draggable="true" title="Draggable div with pointer-events:none" id="draggable-div-with-pointer-events-none">Draggable div with pointer-events: none</div>
+ <br/>
  <b>Logs:</b>
  <div id="logs"></div>
  <script>
@@ -24,8 +31,6 @@
  dropZone.innerHTML = '<br/>';
  });
 
- let nonDraggableDiv = document.querySelector('div[draggable="false"]');
-
  let dropZone = document.getElementById('drop-zone');
  dropZone.addEventListener('dragenter', (e) => {
  let logs = document.getElementById('logs');
@@ -47,6 +52,8 @@
  let logs = document.getElementById('logs');
  logs.innerHTML += 'drop fired<br/>';
 
+ e.preventDefault();
+
  let data = e.dataTransfer.getData('text/plain');
  let dropZone = document.getElementById('drop-zone');
  dropZone.innerText = data;
@@ -58,7 +65,6 @@
  logs.innerHTML += 'draggableDivDragStart fired<br/>';
 
  e.dataTransfer.setData('text/plain', draggableDiv.innerText);
- e.dataTransfer.effectAllowed = 'copy';
  });
  draggableDiv.addEventListener('drag', (e) => {
  let logs = document.getElementById('logs');
@@ -68,6 +74,48 @@
  let logs = document.getElementById('logs');
  logs.innerHTML += 'draggableDivDragEnd fired<br/>';
  });
+
+ let nonDraggableDiv = document.querySelector('div[draggable="false"]');
+ nonDraggableDiv.addEventListener('dragstart', (e) => {
+ let logs = document.getElementById('logs');
+ logs.innerHTML += 'nonDraggableDivDragStart fired<br/>';
+ });
+ nonDraggableDiv.addEventListener('drag', (e) => {
+ let logs = document.getElementById('logs');
+ logs.innerHTML += 'nonDraggableDivDrag fired<br/>';
+ });
+ nonDraggableDiv.addEventListener('dragend', (e) => {
+ let logs = document.getElementById('logs');
+ logs.innerHTML += 'nonDraggableDivDragEnd fired<br/>';
+ });
+
+ let defaultDraggableDiv = document.getElementById('default-draggable-div');
+ defaultDraggableDiv.addEventListener('dragstart', (e) => {
+ let logs = document.getElementById('logs');
+ logs.innerHTML += 'defaultDraggableDivDragStart fired<br/>';
+ });
+ defaultDraggableDiv.addEventListener('drag', (e) => {
+ let logs = document.getElementById('logs');
+ logs.innerHTML += 'defaultDraggableDivDrag fired<br/>';
+ });
+ defaultDraggableDiv.addEventListener('dragend', (e) => {
+ let logs = document.getElementById('logs');
+ logs.innerHTML += 'defaultDraggableDivDragEnd fired<br/>';
+ });
+
+ let draggableDivWithPointerEventsNone = document.getElementById('draggable-div-with-pointer-events-none');
+ draggableDivWithPointerEventsNone.addEventListener('dragstart', (e) => {
+ let logs = document.getElementById('logs');
+ logs.innerHTML += 'draggableDivWithPointerEventsNoneDragStart fired<br/>';
+ });
+ draggableDivWithPointerEventsNone.addEventListener('drag', (e) => {
+ let logs = document.getElementById('logs');
+ logs.innerHTML += 'draggableDivWithPointerEventsNoneDrag fired<br/>';
+ });
+ draggableDivWithPointerEventsNone.addEventListener('dragend', (e) => {
+ let logs = document.getElementById('logs');
+ logs.innerHTML += 'draggableDivWithPointerEventsNoneDragEnd fired<br/>';
+ });
  </script>
  </body>
 </html>