HTML5 ??? ? ?? API? ???? ??? ? ?? ?????? ???? ??? ??????

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

1. ??? ??? ???? ??? : ??? HTML ??? draggable ??? true ? ???? ?????. ? : <div id="myElement" draggable="true">Drag me!</div> . ?? ??? ????? ??? ????? ???? (? : <input> , <textarea></textarea> ).

2. ??? ??? ?? : ??? ?? ???? ??? ????.

   • dragstart : ??? ??? ??? ??? ???? ???? ???????. ???? ????? event.dataTransfer.setData() ???? ???? ????? ?????. event.dataTransfer.setDragImage() ? ???? ??? ?? ??? ???? ??? ?? ????.
   • drag : ??? ????? ?? ????? ?????. ??? ?? ??? ???? ?? ???? ?????.
   • dragend : ??? ??? ???? (????? ?? ??) ???????. ??? ????? ?? ????.

3. ?? ??? ?? : ?? ?? (??? ? ??? ?? ?? ??)? ??? ???? ???????.

   • dragover : ??? ??? ??? ?? ?? ???? ?? ????? ?????. ?????, dragover ????? event.preventDefault() ???? ??? ??????????. ??? ??? ??? ????? ?????.
   • drop : ??? ??? ??? ?? ??? ??? ? ???????. ???? event.dataTransfer.getData() ???? ?? ? ???? ???? ??? ?? (? : ?? ??, DOM ????)? ?????.
4. ??? ?? : event.dataTransfer ??? ??? ??? ?????. setData() MIME ?? (? : "Text/Plain", "Text/Html", "Application/JSON") ? ???? ??? ?????. getData() MIME ??? ???? ???? ?????.

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

 <code class="html"><div id="draggable" draggable="true">Drag me</div> <div id="droppable">Drop here</div> <script> const draggable = document.getElementById(&#39;draggable&#39;); const droppable = document.getElementById(&#39;droppable&#39;); draggable.addEventListener(&#39;dragstart&#39;, (event) => { event.dataTransfer.setData(&#39;text/plain&#39;, &#39;Dragged text&#39;); }); droppable.addEventListener(&#39;dragover&#39;, (event) => { event.preventDefault(); }); droppable.addEventListener(&#39;drop&#39;, (event) => { event.preventDefault(); const data = event.dataTransfer.getData(&#39;text/plain&#39;); droppable.innerText = data; }); </script></code>

HTML5? ??? ? ?? ??? ??? ? ??? ? ???? ??? ??????

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

• dragover ?? ?? ?? event.preventDefault() : ??? ?? ??? ?????. ?? ??? ????? ?? ??? ?????.
• ??? ?? ?? ?? : setData() ? getData() ? ???? ?? ?? ??? ???? ??????.
• ???? ??? : ??? ? ???? ??? ?????? ??? ??? ????? ? ????. ??? ???? ?????.
• ??? DOM ?? : ??? ?? ?? DOM? ?? ???? ?? ?? ? ??? ?? ??? ??? ? ????. ? ???? ??? ? ??? ?? ??? ????? ?? ?? ??? ??????.
• ??? ??? ?? : ???? ?? ?? ???? ??? ???? ?? ??? ??? ??? ?????. CSS? ???? ??? ???, ?? ?? ? ??? ???? ????????.
• ?? ?? : ?? ??? ???? ??? ? ?? ??? ???? ??? ???? ?????.

HTML5 API? ???? ??? ? ?? ?? ?? ??? ??? (? : ??, ?? ??)? ??? ?? ? ? ?????

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

• ??? ?? : ??? ? ?? ??? ??? ??? ?? ??? ?? ??? CSS? ???? dragover ???? ???? ?? ??? ??? ??? ???? ? ? ????. ?? ??, ?? ???? ??? ??? ? ? ??? move ? ????.
• ?? ?? ??? : CSS? ???? ??? ??? ??? ???? ? ?? ??? ????? ?? ??????. ???? ???, ???? ????? ???? ???? ?? ??? ? ????. ????? dragover ? dragleave ??? ??? ??? ?? ??? ??? CSS ???? ?????.
• ??? ??? : dragstart ????? event.dataTransfer.setDragImage() ???? ??? ? ??? ??? ??? ??? ?????. ?? ?? ?? ?? ??? ?? ? ?? ???? ???? ?? ? ????.

HTML5 ??? ? ?? API? ???? ??? ? ?? ?? ?? ?? ??? ??? ??? ?? ? ? ???????

??? ??? event.dataTransfer ?? ?????. Datatransfer ??. ?? ??? ??? ????.

• setData(format, data) : ? ???? ???? ????? ?????. format MIME ?? (? : "Text/Plain", "Text/Html", "Application/JSON")? ???? data ?? ??????. ??? ?? ?? ??? ??? ??? ? ????.
• getData(format) : ??? MIME ??? ??? ???? ?????. ?? ??? ???? ?? ??? ? ???? ?????.

?? ??? ??? ?????. ??? ???? ?? "Text/Plain"?? ?????. ?? ??? ???? ?? ??? ? ???? "Application/JSON"?? HTML ?? ????? "Text/HTML"? ??????. ?? setData() ? getData() ??? ??? MIME ??? ????? ??????.

JSON ?? ? :

 <code class="javascript">// In dragstart: event.dataTransfer.setData('application/json', JSON.stringify({id: 123, name: 'My Item'})); // In drop: const data = JSON.parse(event.dataTransfer.getData('application/json')); console.log(data.id, data.name);</code>

getData() ? ???? ?? ? ?? ?? ??? ??? ???? ?? ?? ???? ?? ? ??? ??? ???? ?? ?? ?????. ??? ?? ??? ?? ??? ? ?? ????? ??? ? ????.

? ??? HTML5 ??? ? ?? API? ???? ??? ? ?? ?????? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!