By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,371 Members | 1,222 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > help: drag and drop with rounded corners / nested elements
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,371 IT Pros & Developers. It's quick & easy.

HELP: Drag and drop with rounded corners / nested elements

P: 1
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
Share this Question
Share on Google+
1 Reply
P: 54
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.

Question stats

  • viewed: 2104
  • replies: 1
  • date asked: Jun 29 '07
BYTES.COM © 2020 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates