? ???? ??? ? ?? ??? ???? ??? ?? ??????? ????? ???? HTML5? ??? ? ?? API? ???? ????. ?? ??? ??? ????. 1. ???? ?????? ?? draggable = "true"? ?????. 2. ??? ???? ??, ???, ?? ? ??? ?? ???? ????. 3. DragStart?? ???? ???? Dragover?? ?? ??? ???? ??? ?????. ??, AppendChild? ?? ?? ??? ?? ? ? ??? e.datatransfer.files? ?? ?? ???? ?? ? ? ????. ?? : ??? ?????? ??? ???????. ??? ??? ??? ???? ????. ??? ??? ?? ?? ?????? ???? ?? ????.

??? ? ???? ??? ? ?? ??? ???? ?? ??? ??? HTML5? ??? ? ?? API? ???? ?? ? ? ????. ??? ????? ???? ?? ?????? ??? ???? ????. ?? ??? ? ?? ??? ?? ?? ??? ?????.

?? : ??? ??? ??? ??????

??? ????? ?? ?? draggable="true" ??? ??????. ?? ??, <div> ?? ???? ????? ??? ? ? ???? ??? ?? ? ?? ??? ???? ??? ? ? ????. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165462390139.jpeg" class="lazy" alt="HTML5 ??? ? ?? API? ???? ??? ? ?? ?? ??."><pre class='brush:php;toolbar:false;'> &lt;div draggable = &quot;true&quot;&gt; ???? ?????? &lt;/div&gt;</pre><p> ?? ?? <code>dragstart , dragover , drop and dragend ? ? ?? ?? ???? ??????. ??? ???? ??? ??, ?? ???? ???, ???? ???? ?? ????? ??? ?????.

??? ? ?? ??? ?? ????

??? ? ?? ??? ?? ? ??? ????.

• ??? ?? : dragstart ????? ??? ??? ? ??? ??????.
• ?? ???? ??? : dragover ?? ?? ??? ???? drop ??? ? ? ????.
• ?? ?? : drop ? ??? ??? ???? ?????.

?? ??, ??? ?? ???? ?????????.

 const dragel = document.querySelector ( '#drag');
const dropzone = document.querySelector ( '#drop-zone');

dragel.addeventListener ( 'dragstart', (e) => {
  e.datatransfer.setData ( 'text/plain', '??? ??? ??? ???');
});

dropzone.addeventListener ( 'dragover', (e) => {
  e.preventDefault (); // ??? ?????? ?? ??? ???????.
});

dropzone.addeventListener ( 'drop', (e) => {
  const data = e.datatransfer.getData ( 'text/plain');
  Console.log ( '?? ??? :', ???);
});

??? ?? ???? ??? ? ?? ?? ??? ?????.

?? ??? ? ?? : ?? ?? ?? ???? ?????

??? ???? ???? ? ??? ??? ? ??? ???? DOM ??? ????? ??? ??? ? ?? ????.

?? ??, ? ?????? ?? ????? ??? ?????? drop ? ??? ? ??? ?? ? ? ????.

 dropzone.addeventListener ( 'drop', (e) => {
  const id = e.datatransfer.getData ( 'text/plain');
  const draggedel = document.getElementById (id);
  Dropzone.appendChild (Draggedel);
});

?? ???? ???? ????? ?? ?? ?? ??? ???? ? ?? e.dataTransfer.files ? ?? ?? ??? ??? ? ????.

 dropzone.addeventListener ( 'drop', (e) => {
  const files = e.datatransfer.files;
  for (??? ??? ??) {
    if (file.type.startSwith ( 'image/')) {
      const reader = new Filereader ();
      reader.onload = () => {
        const img = document.createElement ( 'IMG');
        img.src = reader.result;
        Dropzone.appendChild (IMG);
      };
      reader.readasdataurl (??);
    }
  }
});

?? ?? ??? ????? ??? ? ?? ?? ? ? ????.

??? FAQ

HTML5 ??? ? ?? API? ??? ? ?? ?? ??? ?? ?????.

• dragover preventDefault() ???????. ??? ??? drop ????? ????.
• ????? ??? ? ??? ?? ??? ? ?? ???? ??? ? ????.
• ?? ??? ? ??? ?? ??? ??? ?? ?? ??? ?? ?? ???? ?????.
• ??? ??? ? ?? ????? ??? ?? ????? (SortableJS)? ???? ?? ??? ? ????.

????? ? ?? ????. HTML5? ??? ? ?? ??? ????? ?? ? ?? ?? ?? ??? ?? ? ?? ????.