{"id":65,"date":"2012-03-19T13:08:32","date_gmt":"2012-03-19T07:38:32","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=65"},"modified":"2012-03-19T13:08:32","modified_gmt":"2012-03-19T07:38:32","slug":"simple-dragdrop-with-javascript-jquery","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/simple-dragdrop-with-javascript-jquery\/","title":{"rendered":"Simple Drag&amp;Drop with JavaScript, JQuery"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2012-03-19\/blog_js_script.js\"><\/script><br \/>\n<script type=\"text\/javascript\">\/\/ <![CDATA[\nstartScript();\n\/\/ ]]><\/script><br \/>\nI am working on an application that requires Drag &amp; Drop functionality in a web page with images. First I thought I would implement this using JQuery UI, because I had used it earlier and it makes DnD very easy. But then I thought it may not be too difficult to implement it myself. As it turned out, it is not really very difficult. Here is a simple demo of that implementation.<\/p>\n<p>There are two Divs in this demo, one containing image thumbnails and the other is a drop target for images. Drag and drop image thumbnails on the target Div. The original image would be added to the Div.You can then move images within this Div. If you drag and drop it anywhere outside the div, the drop operation is cancelled and image is removed.<br \/>\n<!--more--><\/p>\n<div id=\"imagesDiv1\"><img decoding=\"async\" class=\"rk_draggable rk_clonable\" alt=\"\" src=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2012\/03\/image1.jpg?fit=525%2C60\" height=\"60\" data-recalc-dims=\"1\" \/><img decoding=\"async\" class=\"rk_draggable rk_clonable\" alt=\"\" src=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2012\/03\/image2.jpg?fit=525%2C60\" height=\"60\" data-recalc-dims=\"1\" \/><\/div>\n<p>Drag &amp; Drop above images below &#8211;<\/p>\n<div class=\"rk_droppable\" id=\"imagesDiv2\" style=\"height: 200px; border: solid;\"><\/div>\n<p>&nbsp;<\/p>\n<p>This is how it is implemented &#8211;<\/p>\n<ul>\n<li>Add mousedown, mousemove and mouseup listeners to Document<\/li>\n<li>In mousedown, check if the element that is clicked has &#8216;rk_draggable&#8217; class\n<ul>\n<li>If yes, then clone that element and save reference to it. Save offset of mouse click location in the image<\/li>\n<\/ul>\n<\/li>\n<li>In mousemove, move the cloned element.<\/li>\n<li>In mouseup, check the location of mouse up falls in any of the elements with &#8216;rk_droppable&#8217; class, if not cancel drop\n<ul>\n<li>Else, get source element of the thumbnail, create a new image and add to target element.<\/li>\n<li>Remove cloned thumbnail<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Here is the complete source code :<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: white; overflow: auto; width: auto; color: black; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007000;\">&lt;script <\/span><span style=\"color: #0000c0;\">language=<\/span><span style=\"background-color: #fff0f0;\">\"JavaScript\"<\/span><span style=\"color: #007000;\">&gt;<\/span>\n\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> mouseDown <span style=\"color: #303030;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">false<\/span>;\n\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> clonedElm <span style=\"color: #303030;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>;\n\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> xOffset <span style=\"color: #303030;\">=<\/span> <span style=\"color: #0000d0; font-weight: bold;\">0<\/span>, yOffset <span style=\"color: #303030;\">=<\/span> <span style=\"color: #0000d0; font-weight: bold;\">0<\/span>;\n\n\t$().ready(<span style=\"color: #008000; font-weight: bold;\">function<\/span>(){\n\t\t$(<span style=\"color: #007020;\">document<\/span>).mousedown(onMouseDown);\n\t\t$(<span style=\"color: #007020;\">document<\/span>).mousemove(onMouseMove);\n\t\t$(<span style=\"color: #007020;\">document<\/span>).mouseup(onMouseUp);\n\t});\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> onMouseDown (event)\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (event.srcElement <span style=\"color: #303030;\">==<\/span> <span style=\"color: #008000; font-weight: bold;\">undefined<\/span> <span style=\"color: #303030;\">&amp;&amp;<\/span> event.target <span style=\"color: #303030;\">!=<\/span> <span style=\"color: #008000; font-weight: bold;\">undefined<\/span>)\n\t\t\tevent.srcElement <span style=\"color: #303030;\">=<\/span> event.target;\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (<span style=\"color: #303030;\">!<\/span>$(event.srcElement).hasClass(<span style=\"background-color: #fff0f0;\">\"rk_draggable\"<\/span>))\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span>;\n\n\t\tmouseDown <span style=\"color: #303030;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">true<\/span>;\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> ($(event.srcElement).hasClass(<span style=\"background-color: #fff0f0;\">\"rk_clonable\"<\/span>))\n\t\t{\n\t\t\t<span style=\"color: #808080;\">\/\/clone the element<\/span>\n\t\t\tclonedElm <span style=\"color: #303030;\">=<\/span> $(event.srcElement).clone();\n\t\t\t$(clonedElm).removeClass(<span style=\"background-color: #fff0f0;\">\"rk_clonable\"<\/span>);\n\t\t\t$(clonedElm).addClass(<span style=\"background-color: #fff0f0;\">\"rk_thumbnail\"<\/span>);\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> offset <span style=\"color: #303030;\">=<\/span> $(event.srcElement).offset();\n\t\t\t$(event.srcElement).parent().append($(clonedElm));\n\t\t\t$(clonedElm).offset(offset);\n\t\t}\n\t\t<span style=\"color: #008000; font-weight: bold;\">else<\/span>\n\t\t{\n\t\t\tclonedElm <span style=\"color: #303030;\">=<\/span> $(event.srcElement);\n\t\t}\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> tmpOffset <span style=\"color: #303030;\">=<\/span> clonedElm.offset();\n\t\txOffset <span style=\"color: #303030;\">=<\/span> tmpOffset.left <span style=\"color: #303030;\">-<\/span> event.pageX;\n\t\tyOffset <span style=\"color: #303030;\">=<\/span> tmpOffset.top <span style=\"color: #303030;\">-<\/span> event.pageY;\n\n\t\t$(clonedElm).css(<span style=\"background-color: #fff0f0;\">\"position\"<\/span>, <span style=\"background-color: #fff0f0;\">\"absolute\"<\/span>);\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> width <span style=\"color: #303030;\">=<\/span> $(event.srcElement).width();\n\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> height <span style=\"color: #303030;\">=<\/span> $(event.srcElement).height();\n\n\t\t$(clonedElm).width(width);\n\t\t$(clonedElm).height(height);\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> <span style=\"color: #008000; font-weight: bold;\">false<\/span>;\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> onMouseMove (event)\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (clonedElm <span style=\"color: #303030;\">==<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>)\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span>;\n\n\t\t$(clonedElm).offset({\n        \tleft<span style=\"color: #303030;\">:<\/span> event.pageX <span style=\"color: #303030;\">+<\/span> xOffset,\n        \ttop<span style=\"color: #303030;\">:<\/span> event.pageY <span style=\"color: #303030;\">+<\/span> yOffset\n        });\n\n        <span style=\"color: #008000; font-weight: bold;\">return<\/span> <span style=\"color: #008000; font-weight: bold;\">false<\/span>;\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> onMouseUp (event)\n\t{\n\t\t<span style=\"color: #808080;\">\/\/check if object is dropped on droppable element<\/span>\n\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> droppableElements <span style=\"color: #303030;\">=<\/span> $(<span style=\"background-color: #fff0f0;\">\".rk_droppable\"<\/span>);\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (droppableElements.length <span style=\"color: #303030;\">==<\/span> <span style=\"color: #0000d0; font-weight: bold;\">0<\/span>)\n\t\t{\n\t\t\tcancelDrop(event);\n\t\t}\n\t\t<span style=\"color: #008000; font-weight: bold;\">else<\/span>\n\t\t{\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> droppableElm <span style=\"color: #303030;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>;\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">for<\/span> (<span style=\"color: #008000; font-weight: bold;\">var<\/span> i <span style=\"color: #303030;\">=<\/span> droppableElements.length<span style=\"color: #303030;\">-<\/span><span style=\"color: #0000d0; font-weight: bold;\">1<\/span>; i <span style=\"color: #303030;\">&gt;=<\/span> <span style=\"color: #0000d0; font-weight: bold;\">0<\/span>; i<span style=\"color: #303030;\">--<\/span>)\n\t\t\t{\n\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (isLocationInElement(droppableElements[i], event.pageX, event.pageY))\n\t\t\t\t{\n\t\t\t\t\tdroppableElm <span style=\"color: #303030;\">=<\/span> droppableElements[i];\n\t\t\t\t\t<span style=\"color: #008000; font-weight: bold;\">break<\/span>;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (droppableElm <span style=\"color: #303030;\">==<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>)\n\t\t\t\tcancelDrop(event);\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">else<\/span>\n\t\t\t\tperformDrop (event, droppableElm);\n\t\t}\n\n\t\tmouseDown <span style=\"color: #303030;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">false<\/span>;\n\t\tclonedElm <span style=\"color: #303030;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>;\n\t\txOffset <span style=\"color: #303030;\">=<\/span> <span style=\"color: #0000d0; font-weight: bold;\">0<\/span>;\n\t\tyOffset <span style=\"color: #303030;\">=<\/span> <span style=\"color: #0000d0; font-weight: bold;\">0<\/span>;\n    }\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> cancelDrop (event)\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (clonedElm <span style=\"color: #303030;\">==<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>)\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span>;\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (<span style=\"color: #303030;\">!<\/span>$(clonedElm).hasClass(<span style=\"background-color: #fff0f0;\">\"rk_clonable\"<\/span>))\n\t\t{\n\t\t\t$(clonedElm).remove();\n\t\t}\n\t\tclonedElm <span style=\"color: #303030;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>;\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> performDrop (event, droppableElm)\n\t{\n\t\t<span style=\"color: #808080;\">\/\/blow up images<\/span>\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (event.srcElement <span style=\"color: #303030;\">==<\/span> <span style=\"color: #008000; font-weight: bold;\">undefined<\/span> <span style=\"color: #303030;\">&amp;&amp;<\/span> event.target <span style=\"color: #303030;\">!=<\/span> <span style=\"color: #008000; font-weight: bold;\">undefined<\/span>)\n\t\t\tevent.srcElement <span style=\"color: #303030;\">=<\/span> event.target;\n\n\t\t<span style=\"color: #808080;\">\/\/check element has source attribute<\/span>\n\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> src <span style=\"color: #303030;\">=<\/span> $(event.srcElement).attr(<span style=\"background-color: #fff0f0;\">\"src\"<\/span>);\n\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (src <span style=\"color: #303030;\">!=<\/span> <span style=\"color: #008000; font-weight: bold;\">undefined<\/span> <span style=\"color: #303030;\">&amp;&amp;<\/span> $(event.srcElement).hasClass(<span style=\"background-color: #fff0f0;\">\"rk_thumbnail\"<\/span>))\n\t\t{\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> newImage <span style=\"color: #303030;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"&lt;img src='\"<\/span> <span style=\"color: #303030;\">+<\/span> src <span style=\"color: #303030;\">+<\/span> <span style=\"background-color: #fff0f0;\">\"' class='rk_draggable'&gt;\"<\/span>;\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> newImageElm <span style=\"color: #303030;\">=<\/span> $(newImage).appendTo($(droppableElm));\n\t\t\t<span style=\"color: #808080;\">\/\/remove thumb nail<\/span>\n\t\t\t$(clonedElm).remove();\n\t\t}\n\t\t<span style=\"color: #808080;\">\/\/$(clonedElm).remove();<\/span>\n\t\tclonedElm <span style=\"color: #303030;\">=<\/span> <span style=\"color: #008000; font-weight: bold;\">null<\/span>;\n\t}\n\n\t<span style=\"color: #008000; font-weight: bold;\">function<\/span> isLocationInElement (element, x, y)\n\t{\n\t\t<span style=\"color: #008000; font-weight: bold;\">var<\/span> elmOffset <span style=\"color: #303030;\">=<\/span> $(element).offset();\n\t\t<span style=\"color: #008000; font-weight: bold;\">if<\/span> (x <span style=\"color: #303030;\">&gt;=<\/span> elmOffset.left <span style=\"color: #303030;\">&amp;&amp;<\/span> x <span style=\"color: #303030;\">&lt;=<\/span> (elmOffset.left <span style=\"color: #303030;\">+<\/span> $(element).width()) <span style=\"color: #303030;\">&amp;&amp;<\/span>\n\t\t\ty <span style=\"color: #303030;\">&gt;=<\/span> elmOffset.top <span style=\"color: #303030;\">&amp;&amp;<\/span> y <span style=\"color: #303030;\">&lt;=<\/span> (elmOffset.top <span style=\"color: #303030;\">+<\/span> $(element).height()))\n\t\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> <span style=\"color: #008000; font-weight: bold;\">true<\/span>;\n\t\t<span style=\"color: #008000; font-weight: bold;\">return<\/span> <span style=\"color: #008000; font-weight: bold;\">false<\/span>;\n\t}\n<span style=\"color: #007000;\">&lt;\/script&gt;<\/span><\/pre>\n<\/div>\n<p>-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I am working on an application that requires Drag &amp; Drop functionality in a web page with images. First I thought I would implement this using JQuery UI, because I had used it earlier and it makes DnD very easy. But then I thought it may not be too difficult to implement it myself. As &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/ramkulkarni.com\/blog\/simple-dragdrop-with-javascript-jquery\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Simple Drag&amp;Drop with JavaScript, JQuery&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[6,1],"tags":[4,5,7],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-13","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/65"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}