I was looking for a simple JavaScript to drag a div element around, and that would work with IE8 and without any third party libraries (like jQuery). It’s been very difficult to find a simple code !<\/p>\n
Finally http:\/\/news.qooxdoo.org\/mouse-capturing<\/a> saved me with some code… but there was still a problem with IE8 due to the mouse that wasn’t losing capture. So after some research, I’ve been able to create a code that works for IE8 and modern browsers:<\/p>\n You can test this code with the demo<\/a> or see it on Gist<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" I was looking for a simple JavaScript to drag a div element around, and that would work with IE8 and without any third party libraries (like jQuery). It’s been very difficult to find a simple code ! Finally http:\/\/news.qooxdoo.org\/mouse-capturing saved me with some code… but there was still a problem with IE8 due to the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[16,13,33],"tags":[24,152,158],"class_list":["post-1568","post","type-post","status-publish","format-standard","hentry","category-navigateur","category-niveau-intermediaire","category-programmation","tag-javascript","tag-niveau-intermediaire","tag-programmation"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=1568"}],"version-history":[{"count":5,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1568\/revisions"}],"predecessor-version":[{"id":1573,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1568\/revisions\/1573"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <\/head>\r\n <body>\r\n <!-- `top` and `left` must be defined into the `style` -->\r\n <div id=\"popup\" style=\"background-color:green;position:absolute;top:0px;left:0px;width:250px;height:250px;z-index:9999;box-shadow: 6px 6px 5px #888888;border-radius:6px;border:1px solid #4f4f4f;\">\r\n <div id=\"popup_bar\" style=\"width:100%;background-color:#aaff66;position:relative;top:0;border-radius:6px 6px 0 0; text-align:center;height:24px;cursor:move\">Title<\/div>\r\n <p>Content of the popup<\/p>\r\n <\/div>\r\n <\/body>\r\n<script>\/* see below for the javascript *\/<\/script>\r\n<\/html>\r\n<\/pre>\n
\r\n!function() {\r\n function addListener(element, type, callback, capture) {\r\n if (element.addEventListener) {\r\n element.addEventListener(type, callback, capture);\r\n } else {\r\n element.attachEvent(\"on\" + type, callback);\r\n }\r\n }\r\n \r\n function draggable(element) {\r\n var dragging = null;\r\n \r\n addListener(element, \"mousedown\", function(e) {\r\n var e = window.event || e;\r\n dragging = {\r\n mouseX: e.clientX,\r\n mouseY: e.clientY,\r\n startX: parseInt(element.style.left),\r\n startY: parseInt(element.style.top)\r\n };\r\n if (element.setCapture) element.setCapture();\r\n });\r\n \r\n addListener(element, \"losecapture\", function() {\r\n dragging = null;\r\n });\r\n \r\n addListener(document, \"mouseup\", function() {\r\n dragging = null;\r\n if (document.releaseCapture) document.releaseCapture();\r\n }, true);\r\n \r\n var dragTarget = element.setCapture ? element : document;\r\n \r\n addListener(dragTarget, \"mousemove\", function(e) {\r\n if (!dragging) return;\r\n \r\n var e = window.event || e;\r\n var top = dragging.startY + (e.clientY - dragging.mouseY);\r\n var left = dragging.startX + (e.clientX - dragging.mouseX);\r\n \r\n element.style.top = (Math.max(0, top)) + \"px\";\r\n element.style.left = (Math.max(0, left)) + \"px\";\r\n }, true);\r\n }; \r\n \r\n \/\/ here you must define the element to be draggable\r\n draggable(document.getElementById(\"popup\"));\r\n}();\r\n<\/pre>\n