HTMlL组件拖放功能如何实现

　　在本文中，我们将了解HTML拖放，并借助示例了解其实现。
　　拖放是一个非常交互式和用户友好的概念，它可以通过抓住对象更轻松地将对象移动到其他位置。这允许用户在元素上单击并按住鼠标按钮，将其拖动到其他位置，然后释放鼠标按钮以将元素放到该位置。在HTML5中，拖放更容易编码，其中的任何元素都是可拖动的。
　　拖放事件：有各种拖放事件，其中一些在下面列出：ondrag：它用于在HTML中拖动元素或文本选择时使用。ondragstart：它用于调用一个函数drag（event），该函数指定要拖动的数据。ondragenter：它用于确定丢弃目标是否接受丢弃。如果要接受丢弃，则必须取消此事件。ondragleave：当鼠标在拖动发生时将元素留在有效放置目标之前时，就会发生这种情况。ondragover：它指定可以放置拖动数据的位置。ondrop：它指定在拖动操作结束时发生丢弃的位置。ondragend：当用户完成拖动元素时，就会发生这种情况。
　　拖放DragandDrop实现步骤：步骤1：使对象可拖动首先将可拖动属性设置为true，以使该元素可拖动然后，指定拖动元素时应发生的情况。ondragstart属性调用一个函数drag（event），该函数指定要拖动的数据。dataTransfer。setData（）方法设置数据类型和拖动数据的值事件侦听器ondragstart将设置允许的效果（复制、移动、链接或某种组合）。步骤2：放下对象ondragover事件指定可以放下拖动数据的位置。默认情况下，不能将数据元素放在其他元素中。若要允许删除，它必须阻止元素的默认处理。这是通过调用event。preventDefault（）方法最后，drop事件来完成的，它允许执行实际的丢弃
　　例1：！DOCTYPEHTMLhtmlheadstylegetData｛width：250px；height：200px；padding：10px；border：1pxsolid4f4d4d；｝styleheadbodyh3DragtheGeekforGeeksimageintotherectangle：h3
　　imgiddragDatasrca2020imgdataimg。jpgdatasrcimg02。bs178。combkghb8ca86669938a58c。jpgdraggabletrueondragstartdrag（event）width250height200bodyhtml
　　Output：
　　Draggingtheimageintothebox
　　拖放过程的数据传递：当拖放的整个过程发生时，将使用数据传输属性。它用于保存从源拖放到所需位置的数据。这些是与之关联的属性：dataTransfer。setData（format，data）：它用于设置要拖动的数据。dataTransfer。clearData（format）：它用于调用此函数，没有清除所有数据的参数。使用format参数调用它仅删除该特定数据。dataTransfer。getData（format）：它返回指定格式的数据。如果没有此类数据，则返回空字符串。dataTransfer。types：此属性返回在dragstart事件中设置的所有格式的数组。dataTransfer。files：它用于返回要删除的所有文件。dataTransfer。setDragImage（element，x，y）：它用于将现有图像显示为拖动图像，而不是光标旁边的默认图像。坐标指定放置位置。dataTransfer。addElement（element）：它用于添加要绘制的指定元素作为拖动反馈图像。dataTransfer。effectAllowed（value）：它将告诉浏览器只允许用户使用列出的操作类型。该属性可以设置为以下值：none、copy、copyLink、copyMove、link、linkMove、move、all和未初始化。dataTransfer。dropEffect（value）：它用于控制在拖动和拖动事件期间向用户提供的反馈。当用户将鼠标悬停在目标元素上时，浏览器的光标将指示将要发生的操作类型（例如复制、移动等）。效果可以采用以下值之一：无、复制、链接、移动。
　　例2：！DOCTYPEHTMLhtmlheadtitleDragandDropboxtitlestylebox｛margin：auto；width：50；height：200px；border：3pxsolidgreen；padding：10px；｝box1，box2，box3｛float：left；margin：5px；padding：10px；｝box1｛width：50px；height：50px；backgroundcolor：F5B5C5；｝box2｛width：100px；height：100px；backgroundcolor：B5D5F5；｝box3｛width：150px；height：150px；backgroundcolor：BEA7CC；｝p｛fontsize：20px；fontweight：bold；textalign：center；｝。gfg｛fontsize：40px；color：009900；fontweight：bold；textalign：center；｝styleheadbodyGeeksforGeekspDraganddropofboxesbodyhtml
　　说明：通过将要拖动的元素的可拖动属性draggable设置为true来开始拖动。使用dataTransfer。getData（）方法获取拖动的数据。此方法将返回在setData（）方法中设置为相同类型的任何数据。调用event。preventDefault（）方法，通过阻止元素的默认处理来允许删除其他元素中的元素。该元素存储在我们附加到放置元素中的变量数据中。
　　效果：
　　例3：图像的拖放
　　！DOCTYPEHTMLhtmlheadstyle。p1｛width：240px；height：75px；padding：10px；border：1pxsolidblack；backgroundcolor：F5F5F5；｝p｛fontsize：20px；fontweight：bold；｝。gfg｛fontsize：40px；color：009900；fontweight：bold；｝styleheadbodyGeeksforGeekspImageDragandDropinboxesimgiddrag1srchttps：media。geeksforgeeks。orgwpcontentcdnuploadsGeeklogilowres。pngdraggabletrueondragstartdragStart（event）width220height70
　　bodyhtml
　　效果：
　　Draggingtheimageintoanotherbox
　　例4：文本拖放到方框中HTML
　　！DOCTYPEHTMLhtmlheadtitleDraggableTexttitlestyle。dropbox｛width：350px；height：40px；padding：15px；border：1pxsolid292828；｝h1｛color：green；｝styleheadbodycenterh1GeeksforGeeksh1h3Dragthetextintherectangleh3piddrag1draggabletrueondragstartdragpoint（event）GeeksforGeeks：Acomputerscienceportalforgeeks。centerbodyhtml
　　效果：