dragdrop-text-elements-input-event-manual.html (7741B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML5 Drag and Drop: insertFromDrop Input Event Test</title> 5 <meta 6 content="text/html; charset=UTF-8" 7 http-equiv="Content-Type" 8 /> 9 <link 10 rel="author" 11 title="Microsoft" 12 href="http://www.microsoft.com/" 13 /> 14 <link 15 rel="help" 16 href="https://w3c.github.io/input-events/#overview" 17 /> 18 <meta 19 name="assert" 20 content="Test insertFromDrop input events and dataTransfer objects" 21 /> 22 <style> 23 .drag-source { 24 border: 2px solid blue; 25 width: 200px; 26 height: 60px; 27 margin: 10px; 28 padding: 10px; 29 cursor: move; 30 } 31 .drop-target { 32 border: 2px dashed red; 33 width: 200px; 34 height: 60px; 35 margin: 10px; 36 padding: 10px; 37 } 38 .test-container { 39 display: flex; 40 flex-wrap: wrap; 41 gap: 20px; 42 margin: 20px 0; 43 } 44 .result { 45 margin: 5px 0; 46 padding: 5px; 47 border: 1px solid #ccc; 48 font-family: monospace; 49 font-size: 12px; 50 } 51 textarea, 52 input { 53 width: 180px; 54 height: 40px; 55 } 56 </style> 57 <script type="text/javascript"> 58 function logResult(test, pass, details) { 59 const div = document.getElementById("results"); 60 const resultDiv = document.createElement("div"); 61 resultDiv.className = "result"; 62 resultDiv.style.color = pass ? "green" : "red"; 63 resultDiv.innerHTML = `<strong>${test}:</strong> ${ 64 pass ? "PASS" : "FAIL" 65 } - ${details}`; 66 div.appendChild(resultDiv); 67 } 68 function setupDropTarget(element, testName, isContentEditable) { 69 element.addEventListener("input", function (e) { 70 if (e.inputType === "insertFromDrop") { 71 if (isContentEditable) { 72 // For contenteditable div: expect dataTransfer populated, data as null 73 const hasDataTransfer = 74 e.dataTransfer !== null && e.dataTransfer !== undefined; 75 const dataIsNull = e.data === null; 76 77 if (hasDataTransfer && dataIsNull) { 78 logResult( 79 testName, 80 true, 81 `DataTransfer: ${ 82 e.dataTransfer.types 83 ? Array.from(e.dataTransfer.types).join(", ") 84 : "none" 85 }, Data: null (correct)` 86 ); 87 } else { 88 logResult( 89 testName, 90 false, 91 `Expected dataTransfer populated and data null. Got dataTransfer: ${hasDataTransfer}, data: ${e.data}` 92 ); 93 } 94 } else { 95 // For input/textarea: expect dataTransfer null, data as text 96 const dataTransferIsNull = e.dataTransfer === null; 97 const hasData = e.data !== null && e.data !== undefined; 98 99 if (dataTransferIsNull && hasData) { 100 logResult( 101 testName, 102 true, 103 `Data: "${e.data}", DataTransfer: null (correct)` 104 ); 105 } else { 106 logResult( 107 testName, 108 false, 109 `Expected dataTransfer null and data populated. Got dataTransfer: ${e.dataTransfer}, data: ${e.data}` 110 ); 111 } 112 } 113 } 114 }); 115 } 116 window.onload = function () { 117 // Make all divs contenteditable 118 document 119 .querySelectorAll("div.drag-source, div.drop-target") 120 .forEach((el) => (el.contentEditable = true)); 121 122 // Setup input event listeners 123 setupDropTarget( 124 document.getElementById("div-target1"), 125 "Div to ContentEditable Div", 126 true 127 ); 128 setupDropTarget( 129 document.getElementById("textarea-target1"), 130 "Div to Textarea", 131 false 132 ); 133 setupDropTarget( 134 document.getElementById("input-target1"), 135 "Div to Input", 136 false 137 ); 138 setupDropTarget( 139 document.getElementById("div-target2"), 140 "Textarea to ContentEditable Div", 141 true 142 ); 143 setupDropTarget( 144 document.getElementById("textarea-target2"), 145 "Textarea to Textarea", 146 false 147 ); 148 setupDropTarget( 149 document.getElementById("input-target2"), 150 "Textarea to Input", 151 false 152 ); 153 setupDropTarget( 154 document.getElementById("input-target3"), 155 "Input to Input", 156 false 157 ); 158 setupDropTarget( 159 document.getElementById("textarea-target3"), 160 "Input to Textarea", 161 false 162 ); 163 }; 164 </script> 165 </head> 166 <body> 167 <h1>insertFromDrop Input Event Test</h1> 168 <p> 169 Test insertFromDrop input events and their dataTransfer objects 170 during drag and drop operations. 171 </p> 172 173 <div class="test-container"> 174 <!-- Div to ContentEditable Div --> 175 <div> 176 <h4>Div to ContentEditable Div</h4> 177 <div id="div1" class="drag-source">Drag this div text</div> 178 <div id="div-target1" class="drop-target"> 179 Drop here (contenteditable) 180 </div> 181 </div> 182 183 <!-- Div to Textarea --> 184 <div> 185 <h4>Div to Textarea</h4> 186 <div id="div2" class="drag-source">Drag this div text</div> 187 <textarea 188 id="textarea-target1" 189 class="drop-target" 190 placeholder="Drop here" 191 ></textarea> 192 </div> 193 194 <!-- Div to Input --> 195 <div> 196 <h4>Div to Input</h4> 197 <div id="div3" class="drag-source">Drag this div text</div> 198 <input 199 id="input-target1" 200 class="drop-target" 201 placeholder="Drop here" 202 /> 203 </div> 204 205 <!-- Textarea to ContentEditable Div --> 206 <div> 207 <h4>Textarea to ContentEditable Div</h4> 208 <textarea id="textarea1" class="drag-source"> 209 Drag this textarea</textarea 210 > 211 <div id="div-target2" class="drop-target"> 212 Drop here (contenteditable) 213 </div> 214 </div> 215 216 <!-- Textarea to Textarea --> 217 <div> 218 <h4>Textarea to Textarea</h4> 219 <textarea id="textarea2" class="drag-source"> 220 Drag this textarea</textarea 221 > 222 <textarea 223 id="textarea-target2" 224 class="drop-target" 225 placeholder="Drop here" 226 ></textarea> 227 </div> 228 229 <!-- Textarea to Input --> 230 <div> 231 <h4>Textarea to Input</h4> 232 <textarea id="textarea3" class="drag-source"> 233 Drag this textarea</textarea 234 > 235 <input 236 id="input-target2" 237 class="drop-target" 238 placeholder="Drop here" 239 /> 240 </div> 241 242 <!-- Input to Input --> 243 <div> 244 <h4>Input to Input</h4> 245 <input 246 id="input1" 247 class="drag-source" 248 value="Drag this input" 249 /> 250 <input 251 id="input-target3" 252 class="drop-target" 253 placeholder="Drop here" 254 /> 255 </div> 256 257 <!-- Input to Textarea --> 258 <div> 259 <h4>Input to Textarea</h4> 260 <input 261 id="input2" 262 class="drag-source" 263 value="Drag this input" 264 /> 265 <textarea 266 id="textarea-target3" 267 class="drop-target" 268 placeholder="Drop here" 269 ></textarea> 270 </div> 271 </div> 272 <h3>insertFromDrop Results:</h3> 273 <div id="results"> 274 Perform drag and drop operations above to see PASS/FAIL results... 275 </div> 276 </body> 277 </html>