{"id":5032,"date":"2016-07-21T13:48:19","date_gmt":"2016-07-21T13:48:19","guid":{"rendered":"https:\/\/www.techopedia.com\/definition\/drag-and-drop\/"},"modified":"2024-05-16T14:28:19","modified_gmt":"2024-05-16T14:28:19","slug":"drag-and-drop","status":"publish","type":"definition","link":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop","title":{"rendered":"Drag and Drop"},"content":{"rendered":"<h2><span id=\"what_is_drag_and_drop\">What is Drag And Drop?<\/span><\/h2>\n<p>Drag and drop is a <a href=\"https:\/\/www.techopedia.com\/definition\/5435\/graphical-user-interface-gui\">graphical user interface<\/a> (GUI) function that allows users to move a digital object from one location to another with a simple pointer gesture.<\/p>\n<p>Drag and drop is commonly used for tasks like rearranging desktop <a href=\"https:\/\/www.techopedia.com\/definition\/7661\/icon-ico-graphical-user-interfaces\">icons<\/a>, moving <a href=\"https:\/\/www.techopedia.com\/definition\/7199\/file\">files<\/a>, and designing <a href=\"https:\/\/www.techopedia.com\/definition\/4774\/web-page-page\">web pages<\/a>.<\/p>\n<p>Drag and drop is natively supported by <a href=\"https:\/\/www.techopedia.com\/definition\/1891\/html5\">HTML5<\/a> and most <a href=\"https:\/\/www.techopedia.com\/definition\/3515\/operating-system-os\">operating systems<\/a> (OS), but it needs to be deliberately programmed into <a href=\"https:\/\/www.techopedia.com\/definition\/4356\/software\">software<\/a> applications.<\/p>\n<p>In some use cases, drag and drop functionality can also be used to resize images and manipulate their orientation.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Drag-And-Drop.jpeg\" alt=\"Image explaining the meaning of drag and drop\" width=\"1200\" height=\"760\" class=\"aligncenter size-full wp-image-242027\" srcset=\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Drag-And-Drop.jpeg 1200w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Drag-And-Drop-300x190.jpeg 300w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Drag-And-Drop-1024x649.jpeg 1024w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Drag-And-Drop-768x486.jpeg 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<div class=\"su-note\"  style=\"border-color:#dddddd;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\"><div class=\"su-note-inner su-u-clearfix su-u-trim\" style=\"background-color:#f7f7f7;border-color:#ffffff;color:#333333;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\">\n<h2><span id=\"key_takeaways\">Key Takeaways<\/span><\/h2>\n<ul>\n<li>Drag and drop allows you to virtually grab a digital object and slide it over to a new location.<\/li>\n<li>Drag and drop is natively supported by HTML5 and most operating systems.<\/li>\n<li>Software applications do not support drag and drop natively. The functionality needs to be programmed by developers.<\/li>\n<li>Drag and drop operations typically have visual cues such as ghost images or highlighted drop zones to help users position the dragged object accurately.<\/li>\n<li>Low-code\/no-code (LCNC) software platforms allow non-programmers to design software and websites visually by dragging and dropping prewritten software modules.<\/li>\n<\/ul>\n<\/div><\/div>\n<h2><span id=\"history_of_drag_and_drop\">History of Drag And Drop<\/span><\/h2>\n<p>Drag and drop definitions are tightly coupled with the development of graphical user interfaces. The Xerox <a href=\"https:\/\/www.techopedia.com\/definition\/28430\/palo-alto-research-center-parc\">PARC<\/a> Alto computer, which was developed in the 1970s, is often credited with pioneering drag and drop.<\/p>\n<p>In 1984, Apple introduced drag and drop interactions in the Macintosh operating system (<a href=\"https:\/\/www.techopedia.com\/definition\/2639\/macintosh-operating-system-mac-os\">Mac OS<\/a>), and by the early 1990s, <a href=\"https:\/\/www.techopedia.com\/definition\/3390\/microsoft-windows\">Microsoft Windows<\/a> also included drag and drop functionality.<\/p>\n<p>Since then, drag and drop has been incorporated into a wide variety of software tools, productivity applications, and <a href=\"https:\/\/www.techopedia.com\/definition\/23889\/web-development\">web development<\/a> frameworks. Today, most <a href=\"https:\/\/www.techopedia.com\/windows-10-vs-windows-11\">Windows<\/a>, macOS, <a href=\"https:\/\/www.techopedia.com\/news\/apple-releases-ios-17-5-with-cross-platform-tracking-detection\">iOS<\/a>, <a href=\"https:\/\/www.techopedia.com\/android-15-release-date\">Android<\/a>, <a href=\"https:\/\/www.techopedia.com\/definition\/3512\/linux\">Linux<\/a> operating systems, and <a href=\"https:\/\/www.techopedia.com\/definition\/288\/web-browser\">web browsers<\/a> support drag and drop functionality to varying degrees.<\/p>\n<h2><span id=\"how_drag_and_drop_works\">How Drag And Drop Works<\/span><\/h2>\n<p>Here&#8217;s how to drag and drop a file on a <strong>Mac computer or Windows desktop<\/strong>:<\/p>\n<ul>\n<li>Move the pointer (mouse, stylus, or finger) to the file you want to move.<\/li>\n<li>Press and hold the pointer to grab the file.<\/li>\n<li>Drag the file to the new location.<\/li>\n<li>Release the pointer to drop the file in the new location.<\/li>\n<\/ul>\n<h3>Does Drag and Drop Work on All Devices?<\/h3>\n<p>While the functionality is widely supported by operating systems and browsers, drag and drop&#8217;s meaning is not consistent across all <a href=\"https:\/\/www.techopedia.com\/definition\/2185\/device\">devices<\/a> and applications.<\/p>\n<p>The specific implementation of drag and drop within custom-built applications can vary widely depending on the <a href=\"https:\/\/www.techopedia.com\/definition\/17095\/developer\">developer<\/a>&#8216;s choices. For example, <a href=\"https:\/\/react.dev\/\" target=\"_blank\">React<\/a> developers might leverage libraries like react-beautiful-dnd or react-dnd to simplify the implementation and provide a consistent experience across different browsers.<\/p>\n<h2><span id=\"key_components_of_drag_and_drop\">Key Components of Drag And Drop<\/span><\/h2>\n<p>Drag and drop is made up of several key components that work together.<\/p>\n<p>The main components are <strong>object components<\/strong> (elements that can be moved or manipulated), <strong>target components<\/strong> (places where objects can be dropped), <strong>gesture components<\/strong> (user actions for picking up and releasing an object), <strong>visual clues<\/strong> (ghost images that indicate an object is being dragged), and <strong>drop logic<\/strong> (underlying code that determines whether an object can be dragged and where it can be dropped).<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Key-Components-of-Drag-and-Drop.jpeg\" alt=\"Image highlighting the key components of drag and drop\" width=\"1200\" height=\"2430\" class=\"aligncenter size-full wp-image-242026\" srcset=\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Key-Components-of-Drag-and-Drop.jpeg 1200w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Key-Components-of-Drag-and-Drop-148x300.jpeg 148w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Key-Components-of-Drag-and-Drop-506x1024.jpeg 506w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Key-Components-of-Drag-and-Drop-768x1555.jpeg 768w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Key-Components-of-Drag-and-Drop-759x1536.jpeg 759w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Key-Components-of-Drag-and-Drop-1011x2048.jpeg 1011w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h2><span id=\"drag_and_drop_applications\">Drag And Drop Applications<\/span><\/h2>\n<p>Drag and drop applications are software programs that allow users to drag and drop elements within the GUI.<\/p>\n<p>Examples include:<\/p>\n<div class=\"su-accordion su-u-trim\"><div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-arrow-circle-1\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span><strong>Graphic Design Software<\/strong><\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n<p>Programs like <a href=\"https:\/\/www.techopedia.com\/definition\/32364\/adobe-photoshop\">Adobe Photoshop<\/a>, <a href=\"https:\/\/www.adobe.com\/products\/illustrator.html\" target=\"_blank\">Adobe Illustrator<\/a>, and <a href=\"https:\/\/www.techopedia.com\/news\/canva-acquires-affinity-to-confront-adobes-creative-dominance\">Canva<\/a> allow users to drag and drop images, shapes, and text to create and arrange designs.<\/div><\/div>\n<div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-arrow-circle-1 su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span><strong>Website Builders<\/strong><\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n<p>Platforms such as <a href=\"https:\/\/www.techopedia.com\/website-builders\/wix-review\">Wix<\/a>, <a href=\"https:\/\/www.techopedia.com\/website-builders\/squarespace-review\">Squarespace<\/a>, and <a href=\"https:\/\/www.techopedia.com\/website-builders\/best-wordpress-page-builder\">WordPress<\/a> offer drag and drop interfaces for building and customizing web pages without needing to write code. Drag and drop website builders are a popular choice for non-technical users who want to <a href=\"https:\/\/www.techopedia.com\/website-builders\/best-website-builder-for-small-business\">create websites<\/a> and populate web pages without needing to know how to code.<\/div><\/div>\n<div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-arrow-circle-1 su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span><strong>Email Clients<\/strong><\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n<p><a href=\"https:\/\/www.techopedia.com\/definition\/24803\/electronic-mail-e-mail\">Email<\/a> services like <a href=\"https:\/\/www.techopedia.com\/definition\/gmail\">Gmail<\/a> and <a href=\"https:\/\/www.techopedia.com\/definition\/355\/microsoft-outlook\">Outlook<\/a> allow users to drag and drop emails into folders or onto calendars.<\/div><\/div>\n<div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-arrow-circle-1 su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span><strong>Project Management Tools<\/strong><\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n<p>Applications like <a href=\"https:\/\/www.techopedia.com\/project-management\/trello-review\">Trello<\/a> and <a href=\"https:\/\/www.techopedia.com\/project-management\/asana-review\">Asana<\/a> use drag and drop to move tasks between <a href=\"https:\/\/www.techopedia.com\/definition\/13980\/kanban\">Kanban<\/a> columns.<\/div><\/div>\n<div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-arrow-circle-1 su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span><strong>Low-Code\/No-Code Platforms<\/strong><\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n<p><a href=\"https:\/\/www.techopedia.com\/definition\/33512\/low-codeno-code-development-lcnc-development\">LCNC<\/a> software development tools like <a href=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/products\/power-apps\/free\" target=\"_blank\">Microsoft Power Apps<\/a>, <a href=\"https:\/\/www.outsystems.com\/\" target=\"_blank\">OutSystems<\/a>, and <a href=\"https:\/\/bubble.io\/\" target=\"_blank\">Bubble<\/a> allow users with varying technical expertise to drag and drop pre-built software modules instead of writing code.<\/div><\/div>\n<div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-arrow-circle-1 su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span><strong>Game Development Engines<\/strong><\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n<p>Software like <a href=\"https:\/\/unity.com\/solutions\/gaming-services\" target=\"_blank\">Unity<\/a> and <a href=\"https:\/\/www.unrealengine.com\/en-US\" target=\"_blank\">Unreal Engine<\/a> allow software developers to drag and drop game objects and assets within the game development environment.<\/div><\/div><\/div>\n<h2><span id=\"how_is_drag_and_drop_implemented_in_programming\">How is Drag and Drop Implemented in Programming?<\/span><\/h2>\n<p>Sometimes, developers have to add drag and drop functionality manually by writing it into <a href=\"https:\/\/www.techopedia.com\/definition\/589\/code\">code<\/a>.<\/p>\n<p>This requires developers to:<\/p>\n<ol>\n<li>Identify what elements will be draggable.<\/li>\n<li>Use event listeners (also called <a href=\"https:\/\/www.techopedia.com\/definition\/3220\/event-handler-c\">event handlers<\/a>) to specify the dragging process and provide visual clues.<\/li>\n<li>Identify the targets where elements can be dropped.<\/li>\n<li>Add event listeners to manage the drop process.<\/li>\n<li>Implement logic for what action(s) should be performed when an element is dropped.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Implementing-Drag-and-Drop-in-Programming.jpeg\" alt=\"Image detailing steps to implement drag and drop\" width=\"1200\" height=\"1850\" class=\"aligncenter size-full wp-image-242025\" srcset=\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Implementing-Drag-and-Drop-in-Programming.jpeg 1200w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Implementing-Drag-and-Drop-in-Programming-195x300.jpeg 195w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Implementing-Drag-and-Drop-in-Programming-664x1024.jpeg 664w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Implementing-Drag-and-Drop-in-Programming-768x1184.jpeg 768w, https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/Implementing-Drag-and-Drop-in-Programming-996x1536.jpeg 996w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><strong>Web Development<\/strong><\/p>\n<ul>\n<li>Add the <strong>draggable=&#8221;true&#8221;<\/strong> attribute to HTML elements that can be dragged.<\/li>\n<li>Attach JavaScript event listeners for <strong>dragstart<\/strong>, <strong>drag<\/strong>, <strong>dragover<\/strong>, <strong>dragenter<\/strong>, <strong>dragleave<\/strong>, <strong>drop<\/strong>, and <strong>dragend<\/strong><\/li>\n<li>Use the <strong>dataTransfer<\/strong> object to manage data being dragged and dropped.<\/li>\n<li>Update the cascading style sheet to show visual clues.<\/li>\n<li>Write JavaScript functions to handle the drop event, validate the drop target and perform designated actions like moving or copying elements.<\/li>\n<\/ul>\n<p><strong>Mobile Applications<\/strong><\/p>\n<p>iOS (Swift\/Objective-C):<\/p>\n<ul>\n<li>Use the <strong>UIDragInteraction<\/strong> and <strong>UIDropInteraction<\/strong> classes to enable drag and drop on views.<\/li>\n<li>Conform to the <strong>UIDragInteractionDelegate<\/strong> protocol to handle the start of a drag.<\/li>\n<li>Conform to the <strong>UIDropInteractionDelegate<\/strong> protocol to handle the drop operation.<\/li>\n<\/ul>\n<p>Android (Java\/Kotlin)<\/p>\n<ul>\n<li>Attach a <strong>OnDragListener<\/strong> to elements that will accept drops.<\/li>\n<li>Use <strong>startDragAndDrop()<\/strong> to initiate a drag.<\/li>\n<li>Override <strong>onDrag()<\/strong> method to handle drag and drop events.<\/li>\n<\/ul>\n<p>Low Code\/No Code Platforms<\/p>\n<ul>\n<li>Use prebuilt drag-and-drop components provided by the platform.<\/li>\n<li>If necessary, configure interactions to define what happens when an item is dragged and dropped.<\/li>\n<\/ul>\n<h2><span id=\"best_practices_for_using_drag_and_drop\">Best Practices for Using Drag and Drop<\/span><\/h2>\n<p>Ideally, drag and drop operations should mimic the physical movement and the functionality providing users with a visual clue (also referred to as visual feedback) for each step in the drag\/drop process.<\/p>\n<p>Best practices include providing <a href=\"https:\/\/www.techopedia.com\/definition\/2584\/keyboard\">keyboard<\/a> alternatives, giving the user the ability to undo or cancel a drag and drop operation, and thoroughly testing the functionality across different devices and browsers.<\/p>\n<h2><span id=\"drag_and_drop_pros_and_cons\">Drag And Drop Pros and Cons<\/span><\/h2>\n<p>Drag and drop is an intuitive, visual way for users to interact with <a href=\"https:\/\/www.techopedia.com\/definition\/604\/digital-definition\">digital<\/a> objects, but its implementation can be challenging for <a href=\"https:\/\/www.techopedia.com\/definition\/23586\/mobile-device\">mobile device<\/a> users who use their fingers or a stylus as their pointing device.<\/p>\n<p>Different mobile browsers have varying levels of support for the HTML5 drag and drop <a href=\"https:\/\/www.techopedia.com\/definition\/24407\/application-programming-interface-api\">application programming interfaces<\/a> (APIs), which can create inconsistencies in how drag and drop behaves across different platforms and devices.<\/p>\n<h2><span id=\"the_bottom_line\">The Bottom Line<\/span><\/h2>\n<p>Drag and drop allows users to virtually grab a digital element and slide it to a new location without needing to know how to code the interaction or use a <a href=\"https:\/\/www.techopedia.com\/definition\/2828\/contextual-menu\">contextual menu<\/a>. It is a useful feature in operating systems, web browsers, and a wide variety of software applications.<\/p>\n<h2><span id=\"faqs\">FAQs<\/span><\/h2>\n<div class=\"man_faq_sec\" itemscope itemtype=\"https:\/\/schema.org\/FAQPage\"><\/time><section class=\"ms_faq ms_card \" ><div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"accordionButton\"><h3 itemprop=\"name\">What is Drag And Drop in simple terms?<\/h3> <\/div>\n<div class=\"accordionContent\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" style=\"display:none;\"><p itemprop=\"text\">Drag and drop is a graphical user interface interaction that allows the user to grab a digital object and move it to a different location.<\/p>\r\n                <\/div><\/div><\/section>\n<section class=\"ms_faq ms_card \" ><div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"accordionButton\"><h3 itemprop=\"name\">What is the purpose of the drag and drop?<\/h3> <\/div>\n<div class=\"accordionContent\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" style=\"display:none;\"><p itemprop=\"text\">The purpose of drag and drop is to provide users with an easy way to move and manipulate digital objects within a graphical user interface.<\/p>\r\n                <\/div><\/div><\/section>\n<section class=\"ms_faq ms_card \" ><div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"accordionButton\"><h3 itemprop=\"name\">What is the difference between drag and drag and drop?<\/h3> <\/div>\n<div class=\"accordionContent\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" style=\"display:none;\"><p itemprop=\"text\">Drag involves clicking and holding a digital object with a pointer to move it. Drag and drop involves moving the object to a different pre-approved location and releasing it there.<\/p>\r\n                <\/div><\/div><\/section>\n<section class=\"ms_faq ms_card \" ><div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"accordionButton\"><h3 itemprop=\"name\">What is an example of a drag and drop?<\/h3> <\/div>\n<div class=\"accordionContent\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" style=\"display:none;\"><p itemprop=\"text\">An example of drag and drop is moving a folder on a computer desktop into the desktop recycle bin.<\/p>\r\n                <\/div><\/div><\/section>\n<section class=\"ms_faq ms_card \" ><div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"accordionButton\"><h3 itemprop=\"name\">What is drag and drop on a computer?<\/h3> <\/div>\n<div class=\"accordionContent\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" style=\"display:none;\"><p itemprop=\"text\">Drag and drop is an OS feature that allows users to move files from one location to another without using a contextual menu.<\/p>\r\n                <\/div><\/div><\/section>\n<section class=\"ms_faq ms_card \" ><div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"accordionButton\"><h3 itemprop=\"name\">How do I drag and drop a file?<\/h3> <\/div>\n<div class=\"accordionContent\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" style=\"display:none;\"><p itemprop=\"text\">To drag and drop a file, click on it, hold the mouse button down, and slide the file over to the desired location. Release the mouse button to drop the file.<\/p>\r\n                <\/div><\/div><\/section>\n<div class=\"reference-content\">\n<div class=\"reference-heading reference-content-collapsible-heading\">\n<h2><span id=\"references\">References<\/span><\/h2>\n<\/div>\n<div class=\"reference-content-body\">\n<ul>\n<li><a href=\"https:\/\/react.dev\/\" rel=\"noopener\" target=\"_blank\">React Official Website<\/a> (React)<\/li>\n<li><a href=\"https:\/\/www.adobe.com\/products\/illustrator.html\" rel=\"noopener\" target=\"_blank\">Adobe Illustrator<\/a> (Adobe)<\/li>\n<li><a href=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/products\/power-apps\/free\" rel=\"noopener\" target=\"_blank\">Power Apps Developer Plan<\/a> (Microsoft)<\/li>\n<li><a href=\"https:\/\/www.outsystems.com\/\" rel=\"noopener\" target=\"_blank\">OutSystems Official Website<\/a> (OutSystems)<\/li>\n<li><a href=\"https:\/\/bubble.io\/\" rel=\"noopener\" target=\"_blank\">Bubble Offcial Website<\/a> (Bubble)<\/li>\n<li><a href=\"https:\/\/unity.com\/solutions\/gaming-services\" rel=\"noopener\" target=\"_blank\">Unity Gaming Services<\/a> (Unity)<\/li>\n<li><a href=\"https:\/\/www.unrealengine.com\/en-US\" rel=\"noopener\" target=\"_blank\">Unreal Engine Official Website<\/a> (Unreal Engine)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>What is Drag And Drop? Drag and drop is a graphical user interface (GUI) function that allows users to move a digital object from one location to another with a simple pointer gesture. Drag and drop is commonly used for tasks like rearranging desktop icons, moving files, and designing web pages. Drag and drop is [&hellip;]<\/p>\n","protected":false},"author":7813,"featured_media":242024,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"","_lmt_disable":"","om_disable_all_campaigns":false,"footnotes":""},"definitioncat":[242,266],"class_list":["post-5032","definition","type-definition","status-publish","format-standard","has-post-thumbnail","hentry","definitioncat-general-computing","definitioncat-tech-101"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v24.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is Drag and Drop? Definition, How it Works &amp; Use Cases<\/title>\n<meta name=\"description\" content=\"Drag and drop a GUI function that allows users to grab a digital element and slide it over to a new location. Learn the full meaning here.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Drag and Drop\" \/>\n<meta property=\"og:description\" content=\"Drag and drop a GUI function that allows users to grab a digital element and slide it over to a new location. Learn the full meaning here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop\" \/>\n<meta property=\"og:site_name\" content=\"Techopedia\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/techopedia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-16T14:28:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/What-is-Drag-And-Drop.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@techopedia\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop\"},\"author\":{\"name\":\"Margaret Rouse\",\"@id\":\"https:\/\/www.techopedia.com\/#\/schema\/person\/f5dd538e31ee352d105b8af36c4268a5\"},\"headline\":\"Drag and Drop\",\"datePublished\":\"2016-07-21T13:48:19+00:00\",\"dateModified\":\"2024-05-16T14:28:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop\"},\"wordCount\":1497,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.techopedia.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/What-is-Drag-And-Drop.jpeg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#respond\"]}],\"articleSection\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop\",\"url\":\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop\",\"name\":\"What is Drag and Drop? Definition, How it Works & Use Cases\",\"isPartOf\":{\"@id\":\"https:\/\/www.techopedia.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/What-is-Drag-And-Drop.jpeg\",\"datePublished\":\"2016-07-21T13:48:19+00:00\",\"dateModified\":\"2024-05-16T14:28:19+00:00\",\"description\":\"Drag and drop a GUI function that allows users to grab a digital element and slide it over to a new location. Learn the full meaning here.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#primaryimage\",\"url\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/What-is-Drag-And-Drop.jpeg\",\"contentUrl\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/What-is-Drag-And-Drop.jpeg\",\"width\":1200,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.techopedia.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tech 101\",\"item\":\"https:\/\/www.techopedia.com\/topic\/248\/tech-101\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"General Computing\",\"item\":\"https:\/\/www.techopedia.com\/topic\/84\/general-computing\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Term\",\"item\":\"https:\/\/www.techopedia.com\/definition\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Drag and Drop\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.techopedia.com\/#website\",\"url\":\"https:\/\/www.techopedia.com\/\",\"name\":\"Techopedia\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.techopedia.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.techopedia.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.techopedia.com\/#organization\",\"name\":\"Techopedia\",\"url\":\"https:\/\/www.techopedia.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.techopedia.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2025\/02\/techopedia-light-logo.svg\",\"contentUrl\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2025\/02\/techopedia-light-logo.svg\",\"caption\":\"Techopedia\"},\"image\":{\"@id\":\"https:\/\/www.techopedia.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/techopedia\/\",\"https:\/\/x.com\/techopedia\",\"https:\/\/www.linkedin.com\/company\/techopedia\/\",\"https:\/\/www.youtube.com\/c\/Techopedia\"],\"publishingPrinciples\":\"https:\/\/www.techopedia.com\/about\/editorial-policy\",\"ownershipFundingInfo\":\"https:\/\/www.techopedia.com\/about\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.techopedia.com\/#\/schema\/person\/f5dd538e31ee352d105b8af36c4268a5\",\"name\":\"Margaret Rouse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.techopedia.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2023\/02\/margaret-rouse-headshot.jpeg\",\"contentUrl\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2023\/02\/margaret-rouse-headshot.jpeg\",\"caption\":\"Margaret Rouse\"},\"description\":\"Margaret is an award-winning technical writer and teacher known for her ability to explain complex technical subjects to a non-technical business audience. Over the past twenty years, her IT definitions have been published by Que in an encyclopedia of technology terms and cited in articles by the New York Times, Time Magazine, USA Today, ZDNet, PC Magazine, and Discovery Magazine. She joined Techopedia in 2011. Margaret's idea of a fun day is helping IT and business professionals learn to speak each other\u2019s highly specialized languages.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/margaretrouse\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/@techdefinitions\"],\"knowsAbout\":[\"Technology Expert\"],\"url\":\"https:\/\/www.techopedia.com\/contributors\/margaret-rouse\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is Drag and Drop? Definition, How it Works & Use Cases","description":"Drag and drop a GUI function that allows users to grab a digital element and slide it over to a new location. Learn the full meaning here.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Drag and Drop","og_description":"Drag and drop a GUI function that allows users to grab a digital element and slide it over to a new location. Learn the full meaning here.","og_url":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop","og_site_name":"Techopedia","article_publisher":"https:\/\/www.facebook.com\/techopedia\/","article_modified_time":"2024-05-16T14:28:19+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/What-is-Drag-And-Drop.jpeg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@techopedia","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#article","isPartOf":{"@id":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop"},"author":{"name":"Margaret Rouse","@id":"https:\/\/www.techopedia.com\/#\/schema\/person\/f5dd538e31ee352d105b8af36c4268a5"},"headline":"Drag and Drop","datePublished":"2016-07-21T13:48:19+00:00","dateModified":"2024-05-16T14:28:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop"},"wordCount":1497,"commentCount":0,"publisher":{"@id":"https:\/\/www.techopedia.com\/#organization"},"image":{"@id":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#primaryimage"},"thumbnailUrl":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/What-is-Drag-And-Drop.jpeg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#respond"]}],"articleSection":""},{"@type":"WebPage","@id":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop","url":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop","name":"What is Drag and Drop? Definition, How it Works & Use Cases","isPartOf":{"@id":"https:\/\/www.techopedia.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#primaryimage"},"image":{"@id":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#primaryimage"},"thumbnailUrl":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/What-is-Drag-And-Drop.jpeg","datePublished":"2016-07-21T13:48:19+00:00","dateModified":"2024-05-16T14:28:19+00:00","description":"Drag and drop a GUI function that allows users to grab a digital element and slide it over to a new location. Learn the full meaning here.","breadcrumb":{"@id":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#primaryimage","url":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/What-is-Drag-And-Drop.jpeg","contentUrl":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2016\/07\/What-is-Drag-And-Drop.jpeg","width":1200,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/www.techopedia.com\/definition\/6918\/drag-and-drop#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.techopedia.com\/"},{"@type":"ListItem","position":2,"name":"Tech 101","item":"https:\/\/www.techopedia.com\/topic\/248\/tech-101"},{"@type":"ListItem","position":3,"name":"General Computing","item":"https:\/\/www.techopedia.com\/topic\/84\/general-computing"},{"@type":"ListItem","position":4,"name":"Term","item":"https:\/\/www.techopedia.com\/definition"},{"@type":"ListItem","position":5,"name":"Drag and Drop"}]},{"@type":"WebSite","@id":"https:\/\/www.techopedia.com\/#website","url":"https:\/\/www.techopedia.com\/","name":"Techopedia","description":"","publisher":{"@id":"https:\/\/www.techopedia.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.techopedia.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.techopedia.com\/#organization","name":"Techopedia","url":"https:\/\/www.techopedia.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.techopedia.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2025\/02\/techopedia-light-logo.svg","contentUrl":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2025\/02\/techopedia-light-logo.svg","caption":"Techopedia"},"image":{"@id":"https:\/\/www.techopedia.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/techopedia\/","https:\/\/x.com\/techopedia","https:\/\/www.linkedin.com\/company\/techopedia\/","https:\/\/www.youtube.com\/c\/Techopedia"],"publishingPrinciples":"https:\/\/www.techopedia.com\/about\/editorial-policy","ownershipFundingInfo":"https:\/\/www.techopedia.com\/about"},{"@type":"Person","@id":"https:\/\/www.techopedia.com\/#\/schema\/person\/f5dd538e31ee352d105b8af36c4268a5","name":"Margaret Rouse","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.techopedia.com\/#\/schema\/person\/image\/","url":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2023\/02\/margaret-rouse-headshot.jpeg","contentUrl":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2023\/02\/margaret-rouse-headshot.jpeg","caption":"Margaret Rouse"},"description":"Margaret is an award-winning technical writer and teacher known for her ability to explain complex technical subjects to a non-technical business audience. Over the past twenty years, her IT definitions have been published by Que in an encyclopedia of technology terms and cited in articles by the New York Times, Time Magazine, USA Today, ZDNet, PC Magazine, and Discovery Magazine. She joined Techopedia in 2011. Margaret's idea of a fun day is helping IT and business professionals learn to speak each other\u2019s highly specialized languages.","sameAs":["https:\/\/www.linkedin.com\/in\/margaretrouse\/","https:\/\/x.com\/https:\/\/twitter.com\/@techdefinitions"],"knowsAbout":["Technology Expert"],"url":"https:\/\/www.techopedia.com\/contributors\/margaret-rouse"}]}},"_links":{"self":[{"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/definition\/5032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/definition"}],"about":[{"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/types\/definition"}],"author":[{"embeddable":true,"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/users\/7813"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/comments?post=5032"}],"version-history":[{"count":0,"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/definition\/5032\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/media\/242024"}],"wp:attachment":[{"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/media?parent=5032"}],"wp:term":[{"taxonomy":"definitioncat","embeddable":true,"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/definitioncat?post=5032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}