469,616 Members | 1,599 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

home > topics > javascript > questions > help: drag and drop with rounded corners / nested elements

Post your question to a community of 469,616 developers. It's quick & easy.

HELP: Drag and drop with rounded corners / nested elements

The issue I am having is that I would like to be able to drag-and-drop div elements that have rounded corners.* Since these elements will be dynamically created (including background color), I could not use the "standard" rounded corner method of sliced images for the corners (since that would only allow a certain color to match)

I tried using a corner-rounding js tool from http://openrico.org, but it failed miserably (in both IE and Opera)

So, I have relied on the "contained element slices" method, in which small containers and sub-divs are contained inside of the main div element to create the rounded corner effect (the particular technique I used is at: http://www.webreference.com/programming/css_borders/3.html )

Now, the rounded corners are there with no images and no javascript and they look great... the problem is that I cannot drag and drop the div as normal!* I will post my test code below, which contains one drop target and two different draggable divs... you will notice the "normal" (square) div works no problem.* But you can only drag the rounded-corner div if you click on the "invisible" part of the div (right off the edge of the rounded corner)

Does anyone know how I can make sure the div is dragged when the user clicks ANYWHERE inside the div area (even if it is a contained <b class> or <div> element)? * ???

(go ahead and copy and paste and try this thing out. )

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Test Drag</title>
  4.  
  5. <style type="text/css">
  6.  
  7. .raisedthumb {
  8. * background:transparent; 
  9. * width: 60px;
  10. * height: 60px;
  11. * filter: alpha(opacity=100);
  12. * opacity:1;
  13. * }
  14. .raisedthumb h1, .raised p {
  15. * margin:0 10px;
  16. * }
  17. .raisedthumb h1 {
  18. * font-size:2em; 
  19. * color:#fff;
  20. * }
  21. .raisedthumb p {
  22. * padding-bottom:0.5em;
  23. * }
  24. .raisedthumb .b1, .raisedthumb .b2, .raisedthumb .b3, .raisedthumb .b4, 
  25.  
  26. .raisedthumb .b1b, .raisedthumb .b2b, .raisedthumb .b3b, .raisedthumb .b4b 
  27.  
  28. {
  29. * display:block; 
  30. * overflow:hidden;
  31. * font-size:1px;
  32. * }
  33. .raisedthumb .b1, .raisedthumb .b2, .raisedthumb .b3, .raisedthumb .b1b, 
  34.  
  35. .raisedthumb .b2b, .raisedthumb .b3b {
  36. * height:1px;
  37. * }
  38. .raisedthumb .b2 {
  39. * background:#ccc; 
  40. * border-left:1px solid #fff; 
  41. * border-right:1px solid #eee;
  42. * }
  43. .raisedthumb .b3 {
  44. * background:#ccc; 
  45. * border-left:1px solid #fff; 
  46. * border-right:1px solid #ddd;
  47. * }
  48. .raisedthumb .b4 {
  49. * background:#ccc; 
  50. * border-left:1px solid #fff; 
  51. * border-right:1px solid #aaa;
  52. * }
  53. .raisedthumb .b4b {
  54. * background:#ccc; 
  55. * border-left:1px solid #eee; 
  56. * border-right:1px solid #999;
  57. * }
  58. .raisedthumb .b3b {
  59. * background:#ccc; 
  60. * border-left:1px solid #ddd; 
  61. * border-right:1px solid #999;
  62. * }
  63. .raisedthumb .b2b {
  64. * background:#ccc; 
  65. * border-left:1px solid #aaa; 
  66. * border-right:1px solid #999;
  67. * }
  68. .raisedthumb .b1 {
  69. * margin:0 5px; 
  70. * background:#fff;
  71. * }
  72. .raisedthumb .b2, .raisedthumb .b2b {
  73. * margin:0 3px; 
  74. * border-width:0 2px;
  75. * }
  76. .raisedthumb .b3, .raisedthumb .b3b {
  77. * margin:0 2px;
  78. * }
  79. .raisedthumb .b4, .raisedthumb .b4b {
  80. * height:2px; margin:0 1px;
  81. * }
  82. .raisedthumb .b1b {
  83. * margin:0 5px; background:#999;
  84. * }
  85. .raisedthumb .boxcontent {
  86. * display:block;
  87. * height: 50 ?>px;
  88. * max-height: 50 ?>px;
  89. * overflow: hidden;
  90. * background:#ccc; 
  91. * border-left:1px solid #fff; 
  92. * border-right:1px solid #999;
  93. * }
  94.  
  95. </style>
  96. <script type="text/javascript">
  97.  
  98. var dragbox;
  99. var deltaX, deltaY;
  100. var client;
  101. createClient();
  102.  
  103.  
  104. function createClient() {
  105. try {
  106. client = window.XMLHttpRequest ? new XMLHttpRequest() : 
  107. new ActiveXObject("Microsoft.XMLHTTP");
  108. } catch (e) { 
  109. alert("Sorry, your browser is not Ajax-enabled!"); 
  110. }
  111. }
  112.  
  113. function setOpacity(node,val) {
  114. if (node.filters) {
  115. try {
  116. node.filters["alpha"].opacity = val*100;
  117. } catch (e) { }
  118. } else if (node.style.opacity) {
  119. node.style.opacity = val;
  120. }
  121. }
  122.  
  123. function getX(node) {
  124. return parseInt(node.style.left);
  125. }
  126.  
  127. function getY(node) {
  128. return parseInt(node.style.top);
  129. }
  130.  
  131. function getWidth(node) {
  132. return parseInt(node.style.width);
  133. }
  134.  
  135. function getHeight(node) {
  136. return parseInt(node.style.height);
  137. }
  138.  
  139. function setX(node,x) {
  140. node.style.left = x + "px";
  141. }
  142.  
  143. function setY(node,y) {
  144. node.style.top = y + "px";
  145. }
  146.  
  147. function Evt(evt) {
  148. this.evt = evt ? evt : window.event; 
  149. this.source = evt.target ? evt.target : evt.srcElement;
  150. this.x = evt.pageX ? evt.pageX : evt.clientX;
  151. this.y = evt.pageY ? evt.pageY : evt.clientY;
  152. }
  153.  
  154. Evt.prototype.toString = function () {
  155. return "Evt [ x = " + this.x + ", y = " + this.y + " ]";
  156. };
  157.  
  158. Evt.prototype.consume = function () {
  159. if (this.evt.stopPropagation) {
  160. this.evt.stopPropagation();
  161. this.evt.preventDefault();
  162. } else if (this.evt.cancelBubble) {
  163. this.evt.cancelBubble = true;
  164. this.evt.returnValue = false;
  165. }
  166. };
  167.  
  168. Evt.addEventListener = function (target,type,func,bubbles) {
  169. if (document.addEventListener) {
  170. target.addEventListener(type,func,bubbles);
  171. } else if (document.attachEvent) {
  172. target.attachEvent("on"+type,func,bubbles);
  173. } else {
  174. target["on"+type] = func;
  175. }
  176. };
  177.  
  178. Evt.removeEventListener = function (target,type,func,bubbles) {
  179. if (document.removeEventListener) {
  180. target.removeEventListener(type,func,bubbles);
  181. } else if (document.detachEvent) {
  182. target.detachEvent("on"+type,func,bubbles);
  183. } else {
  184. target["on"+type] = null;
  185. }
  186. };
  187.  
  188. function dragPress(evt) {
  189. evt = new Evt(evt);
  190. dragbox = evt.source;
  191. setOpacity(dragbox,.7);
  192. deltaX = evt.x - getX(dragbox);
  193. deltaY = evt.y - getY(dragbox);
  194. Evt.addEventListener(document,"mousemove",dragMove,false);
  195. Evt.addEventListener(document,"mouseup",dragRelease,false);
  196. }
  197.  
  198. function dragMove(evt) {
  199. evt = new Evt(evt);
  200. setX(dragbox,evt.x - deltaX);
  201. setY(dragbox,evt.y - deltaY);
  202. evt.consume();
  203. }
  204.  
  205. function dragRelease(evt) {
  206. evt = new Evt(evt);
  207. setOpacity(dragbox,1);
  208. Evt.removeEventListener(document,"mousemove",dragMove,false);
  209. Evt.removeEventListener(document,"mouseup",dragRelease,false);
  210. if (droppedOnDropBox(evt)) {
  211. dragBoxDropped(evt);
  212. }
  213. }
  214.  
  215. function droppedOnDropBox(evt) {
  216. var dropbox = document.getElementById("dropbox");
  217. var x = getX(dropbox);
  218. var y = getY(dropbox);
  219. var width = getWidth(dropbox);
  220. var height = getHeight(dropbox);
  221. return evt.x > x &&
  222. evt.y > y &&
  223. evt.x < x + width &&
  224. evt.y < y + height;
  225. }
  226.  
  227. function dragBoxDropped(evt) {
  228. client.onreadystatechange = callback;
  229. client.open("get","server.php",true);
  230. client.send(null);
  231. }
  232.  
  233. function callback() {
  234. if (client.readyState == 4) {
  235. if (client.status == 200) {
  236. alert(client.responseText);
  237. createClient();
  238. } else {
  239. alert("Sorry, there seems to be a problem retrieving the response:\n" +
  240. client.statusText);
  241. createClient();
  242. }
  243. }
  244. }
  245.  
  246. </script>
  247.  
  248. </head>
  249.  
  250. <body bgcolor="black" onload="windowLoaded(event);">
  251.  
  252. <div id="dragbox" class="raisedthumb" style="position: absolute;
  253. top: 5 ?>%;
  254. left: 8%; background:transparent; width: 60px;* *height: 60px; filter: 
  255.  
  256. alpha(opacity=100); opacity:1; z-index:100;" 
  257.  
  258. onmousedown="dragPress(event);">
  259. <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
  260. <div id="mycard_xml" class="boxcontent">
  261. click just off corner to drag
  262. </div>
  263. <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b 
  264.  
  265. class="b1b"></b>
  266. </div>
  267.  
  268.  
  269. <div id="dragbox2" style="position: absolute;
  270. top: 20px;
  271. left: 400px; background:white; width: 60px;* *height: 60px; filter: 
  272.  
  273. alpha(opacity=100); opacity:1; z-index:2;" 
  274.  
  275. onmousedown="dragPress(event);">
  276. normal div dragbox
  277. </div>
  278.  
  279. <div id="dropbox" style="position: absolute; top:300px; left:300px; 
  280.  
  281. width:100px; height:100px; background:orange;">
  282. target box
  283. </div>
  284.  
  285.  
  286. </body>
  287. </html>
  288.  
Jun 29 '07 #1
1 2215
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5.     <title>Untitled</title>
  6. </head>
  7.  
  8. <style>
  9.  
  10. .roundedHolder {height:auto; width:120px;}
  11.  
  12. .rounded-A, .rounded-B, .rounded-C, .rounded-D, .rounded-E {overflow:hidden; display:block; width:auto;}
  13. .rounded-A {margin:0 5px; background:#000; height:1px}
  14. .rounded-B {margin:0 3px; background:#fff; border-width:0 2px; border-style:solid; border-color:#000; height:1px}
  15. .rounded-C {margin:0 2px; background:#fff; border-width:0 1px; border-style:solid; border-color:#000; height:1px}
  16. .rounded-D {margin:0 1px; background:#fff; border-width:0 1px; border-style:solid; border-color:#000; height:2px}
  17. .content {border-width:0 1px; border-style:solid; border-color:#000; height:auto; width:auto; display:block; padding:0 5px; text-align:center}
  18. </style>
  19.  
  20. <script>
  21.  
  22. function ietruebody(){
  23.     return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  24. }
  25.  
  26. var posX = 0
  27. var posY = 0
  28. var draggedElm
  29.  
  30. function mouseCoords(e) {
  31. if (!e) e = window.event
  32.  
  33.     e.pageX ? posX = e.pageX : e.clientX ? posX = e.clientX + ietruebody().scrollLeft : null
  34.     e.pageY ? posY = e.pageY : e.clientY ? posY = e.clientY + ietruebody().scrollTop : null
  35.  
  36.     if (draggedElm) {
  37.     draggedElm.style.left = posX - (draggedElm.initialposX - draggedElm.initialX) + "px"
  38.     draggedElm.style.top = posY - (draggedElm.initialposY - draggedElm.initialY) + "px"
  39.     }
  40. }
  41.  
  42. document.onmousemove = mouseCoords
  43.  
  44. window.onload = initDragAndDrop
  45.  
  46. function initDragAndDrop() {
  47. divs = document.getElementsByTagName("div")
  48.  
  49.     for (x=0; x<divs.length; x++) {
  50.     new draggableElm(divs[x])
  51.     }
  52. }
  53.  
  54. function draggableElm(elm) {
  55. this.drag = this
  56.     elm.onmousedown = function(e) {
  57.     draggedElm = this
  58.     if (!e) e=window.event
  59.         this.initialposX = e.pageX ? e.pageX : e.clientX ? e.clientX + ietruebody().scrollLeft : null
  60.         this.initialposY = e.pageY ? e.pageY : e.clientY ? e.clientY + ietruebody().scrollTop : null
  61.         this.initialX = this.offsetLeft
  62.         this.initialY = this.offsetTop
  63.         this.style.position = "absolute"
  64.     }
  65.     elm.onmouseup = function() {
  66.     draggedElm = null
  67.     }
  68. }
  69.  
  70. </script>
  71.  
  72. <body>
  73.  
  74. <div class="roundedHolder draggable">
  75. <b class="rounded-A"></b>
  76. <b class="rounded-B"></b>
  77. <b class="rounded-C"></b>
  78. <b class="rounded-D"></b>
  79.  
  80. <b class="content">
  81. Lorem ipsum<br>
  82. Lorem ipsum<br>
  83. Lorem ipsum<br>
  84. </b>
  85.  
  86. <b class="rounded-D"></b>
  87. <b class="rounded-C"></b>
  88. <b class="rounded-B"></b>
  89. <b class="rounded-A"></b>
  90. </div>
  91.  
  92. </body>
  93. </html>
  94.  
  95.  
I haven´t looked through your code!
Instead im providing you with a working sample of element with rounded corners and a drag & drop function!

Just made that as a reference, feel free to modify anything!

Regards,
Romulo
Jul 2 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics
Rounded button in a form ?
7 posts views Thread by Mel | last post: by
CSS Drop-Downs go Berserk in IE5
reply views Thread by fleemo17 | last post: by
rounded corners in data grid
2 posts views Thread by Konrad | last post: by
anybody help me
1 post views Thread by Rahul | last post: by
Google and rounded corners
8 posts views Thread by TheCornjerker | last post: by
Rounded corners & IE
6 posts views Thread by Schraalhans Keukenmeester | last post: by
Rounded Corners
5 posts views Thread by Stuart Ferguson | last post: by
polygon with rounded corners
6 posts views Thread by moondaddy | last post: by
Get internship
reply views Thread by devrayhaan | last post: by
I have this print file
reply views Thread by gheharukoh7 | last post: by
BYTES.COM © 2021
About Us
Advertise
Terms Of Use
Privacy Policy
Manage Cookies
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates
By using this site, you agree to our Privacy Policy and Terms of Use.