473,238 Members | 1,737 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,238 software developers and data experts.

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 2500
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

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

Similar topics

7
by: Mel | last post by:
how can i have a rounded edge button in my forms using CSS ? thanks Mel
0
by: fleemo17 | last post by:
I've developed a web page that utilizes CSS drop-down menus as well as rounded corners on one of the page elements. I've tested it in several different browsers on both Mac and PC. Works well in...
2
by: Konrad | last post by:
Hi This is maybe simple question but how to render DataGrid and Tables with rounded corners? Thanks Konrad
1
by: Rahul | last post by:
Hi Everybody I have some problem in my script. please help me. This is script file. I have one *.inq file. I want run this script in XML files. But this script errors shows . If u want i am...
8
by: TheCornjerker | last post by:
I've been looking into what method I should use to show rounded corners (and I've found a lot). My question is why does Google seems to mostly use the table method with an image in each corner. ...
6
by: Schraalhans Keukenmeester | last post by:
I want to achieve the following: A small image in each of the corners of a box, like below: +-------------------------------+ | + | + | + | + | + | +
2
by: Dan Sikorsky | last post by:
Where are some nice samples for these rounded corner mouseover popups you see on web pages that have double underlined words/phrases on them that cause the popup?
5
by: Stuart Ferguson | last post by:
I am looking to create the effect shown in the image (http://img291.imageshack.us/img291/4476/effectuc6.jpg) this is taken from www.asp.net. I was wondering if there is a specific technique to...
6
by: moondaddy | last post by:
I need to be able to make polygons with rounded corners. This will be to draw group outlines around shapes in a diagramming tool in wpf. all angles in the polygon will be 90 degrees, but somehow...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.