??? ? ?? API? ???? ??? ? ?? ??? ????? ??? ??????

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

1. Draggable? Draggable? ?????? . Draggable? ??? ???? draggable ??? true ? ??????. ?? ??, <div draggable="true">Drag me!</div> .

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

   • dragstart :? ???? ???? ??? ????? ???? ?????. ???? ???? ??? ?? ?? ??? ???? event.dataTransfer.setData() ? ??? ? ????. ?? ??:

      <code class="javascript">element.addEventListener('dragstart', (e) => { e.dataTransfer.setData('text/plain', element.id); });</code>

   • drag :? ???? ???? ??? ?????? ????? ?????. ????? ??? ??? ???? ?? ?? ??? ???? ??? ? ????.
   • dragend :? ???? ???? ??? ? ??? ?? ? ? ?????. ??? ?? ?? ??? ? ?? ??? ???? ? ??? ? ????.

3. ?? ??? ?? ??? ?? : ??? ? ??? ?? ?? ??? ???? ???????.

   • dragenter :? ???? ??? ? ??? ?? ???? ???? ?????. ?? ???? ?? ??? ???? ?? ?? ??? ???? ?? ? ? ????.

   • dragover :? ???? ??? ? ??? ?? ?? ???? ? ????? ?????. ????? ????? ??? ????? ??? ???? ?? ?? ??? ???????.

      <code class="javascript">dropTarget.addEventListener('dragover', (e) => { e.preventDefault(); });</code>

   • dragleave :? ???? ??? ? ??? ?? ??? ?? ? ?????. ??? ? ??? ?? ??? ???? ? ????? ???? ?? ??? ?? ??? ??? ? ????.

   • drop :? ???? ???? ?? ??? ??? ? ??? ?? ?? ? ?????. ??? ? ??? ?? ???? ????? ?? ? ???? ???? ? ?? ??? ???? ? ??? ? ????.

      <code class="javascript">dropTarget.addEventListener('drop', (e) => { e.preventDefault(); const data = e.dataTransfer.getData('text/plain'); // Handle the dropped data });</code>

??? ??? ???? ??? ???? ???? ??? ? ?? API? ???? ??? ? ?? ??? ??? ? ????.

??? ? ?? API? ?? ??? ? ?? ??? ??? ?? ???? ??????

??? ? ?? API? ???? ??? ? ?? ??? ???? ? ??? ?? ???? ??? ????.

1. ??? ??? : ???? ??? ????? ???? ???????. ? ???? ??? ?? ?? ???? ????? ???? ? ?????.
2. ??? : ???? ??? ?????? ????? ???????. ? ???? ??? ?? ?? ??? ???? ???? ? ??? ? ????.
3. ??? : ???? ??? ? ??? ?? ???????. ? ???? ??? ?? ?? ??? ? ??? ???? ? ??? ? ????.
4. DRAGENTER : ??? ? ??? ??? ?? ???? ???? ???????. ? ???? ?? ??? ???? ?? ?? ??? ???? ???? ? ??? ? ????.
5. ??? ?? : ??? ? ??? ??? ?? ??? ???? ?? ????? ???????. ????? ????? ??? ????? ?? ??? ???? ??? ???????.
6. ??? ?? : ??? ? ??? ??? ?? ??? ?? ? ???????. ? ???? ??? ? ??? ?? ??? ???? ?? ??? ??? ???? ? ??? ? ????.
7. ?? : ???? ??? ?? ???? ??? ? ??? ?? ?? ? ???????. ? ???? ??? ? ??? ?? ???? ????? ?? ? ???? ???? ?? ?? ?? ??? ???? ? ?????.

??? ???? ??? ? ?? API? ???? ??? ??? ? ?? ??? ???? ? ??????.

??? ? ?? API? ???? ?? ???????? ? ??? ???? ??? ? ?????

??? ? ?? API? ?? ?? ? ?????? ??? ???? ????? ???????. ??? ?? ???? ?? ???????? ? ??? ???? ???? ? ??? ? ????.

1. ??? ???? ??? : ??? ? ?? API? ???? ??? ????? ?? ??? ? ??? ???? ??? ? ????. ???? dataTransfer ??? ???? ???? ?? ?? ????? getData ???? ???? ???? ??? ? ? ????.
2. ?? ???????? : ??? ? ?? API? ???? ?? ??????? ??? ??? ??? ???? ?? ?? ?? ?????? ???? ??? ? ????. ?? ?? ? ????? ???? ??? ??? ?? ?????? ??? ? ? ????. ??? ?? ?? ????? setData ???? ??? ??? ??? ?? ? ? ????????.
3. ??? ??? ?? : ?? ?? (???) ??? ???? ??? ? ?? ??? ??? ?? ??????. ??? ? ?? API? ??? ??? ??? ????. ?, ?? ???? Access-Control-Allow-Origin ??? ???? ?? ??? ???? ?? ? ??? ??? ?? ????? ? ???? ??? ? ??? ?????.

????, ??? ? ?? API? ?? ?? ? ?????? ??? ????? ??????, ?? ??????? ??? ??? ??? ??? ?? ?? ?? ???? ?? ?????? ?? ? ??? ???? ???? ? ??? ? ???, ?? ??? ??? ???? ?????.

??? ? ?? ??? ??? ? ?? API? ??? ? ?? ??? ???? ??? ??????

??? ? ?? API? ??? ??? ???? ????? dataTransfer ??? ???? ??? ???? ???? ???? ???? ?? ?????. ??? ??? ??? ???? ?? ? ??? ?????.

1. ??? ?? : ??? ??? ??? ? dataTransfer ??? setData ???? ???? ?? ??? ???? ??? ? ????. ?? ??:

    <code class="javascript">element.addEventListener('dragstart', (e) => { e.dataTransfer.setData('text/plain', 'Hello, World!'); e.dataTransfer.setData('text/html', '<p>Hello, World!</p>'); e.dataTransfer.setData('application/json', JSON.stringify({ message: 'Hello, World!' })); });</code>

   ? ???? Plain Text, HTML ? JSON? ? ?? ??? ???? ?????.

2. ??? ?? : Drop ???? ?? ? ? dataTransfer ??? getData ???? ???? ??? ???? ???? ?? ? ? ????. ?? ??:

    <code class="javascript">dropTarget.addEventListener('drop', (e) => { e.preventDefault(); const plainText = e.dataTransfer.getData('text/plain'); const html = e.dataTransfer.getData('text/html'); const json = e.dataTransfer.getData('application/json'); // Handle the retrieved data });</code>

   ? ???? ???? ? ?? ???? ????? : ?? ???, HTML ? JSON.

3. ?? ??? ?? ?? : dataTransfer ??? types ??? ???? ??? ??? ??? ???? ??? ? ????. ?? ??:

    <code class="javascript">dropTarget.addEventListener('drop', (e) => { e.preventDefault(); const types = e.dataTransfer.types; if (types.includes('text/plain')) { const plainText = e.dataTransfer.getData('text/plain'); // Handle plain text data } if (types.includes('text/html')) { const html = e.dataTransfer.getData('text/html'); // Handle HTML data } if (types.includes('application/json')) { const json = e.dataTransfer.getData('application/json'); // Handle JSON data } });</code>

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

dataTransfer ??? ? ??? ???? ??? ? ?? API? ???? ??? ? ?? ?? ?? ??? ??? ???? ?? ? ? ??????.

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