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
- <html>
- <head>
- <title>Test Drag</title>
- <style type="text/css">
- .raisedthumb {
- * background:transparent;
- * width: 60px;
- * height: 60px;
- * filter: alpha(opacity=100);
- * opacity:1;
- * }
- .raisedthumb h1, .raised p {
- * margin:0 10px;
- * }
- .raisedthumb h1 {
- * font-size:2em;
- * color:#fff;
- * }
- .raisedthumb p {
- * padding-bottom:0.5em;
- * }
- .raisedthumb .b1, .raisedthumb .b2, .raisedthumb .b3, .raisedthumb .b4,
- .raisedthumb .b1b, .raisedthumb .b2b, .raisedthumb .b3b, .raisedthumb .b4b
- {
- * display:block;
- * overflow:hidden;
- * font-size:1px;
- * }
- .raisedthumb .b1, .raisedthumb .b2, .raisedthumb .b3, .raisedthumb .b1b,
- .raisedthumb .b2b, .raisedthumb .b3b {
- * height:1px;
- * }
- .raisedthumb .b2 {
- * background:#ccc;
- * border-left:1px solid #fff;
- * border-right:1px solid #eee;
- * }
- .raisedthumb .b3 {
- * background:#ccc;
- * border-left:1px solid #fff;
- * border-right:1px solid #ddd;
- * }
- .raisedthumb .b4 {
- * background:#ccc;
- * border-left:1px solid #fff;
- * border-right:1px solid #aaa;
- * }
- .raisedthumb .b4b {
- * background:#ccc;
- * border-left:1px solid #eee;
- * border-right:1px solid #999;
- * }
- .raisedthumb .b3b {
- * background:#ccc;
- * border-left:1px solid #ddd;
- * border-right:1px solid #999;
- * }
- .raisedthumb .b2b {
- * background:#ccc;
- * border-left:1px solid #aaa;
- * border-right:1px solid #999;
- * }
- .raisedthumb .b1 {
- * margin:0 5px;
- * background:#fff;
- * }
- .raisedthumb .b2, .raisedthumb .b2b {
- * margin:0 3px;
- * border-width:0 2px;
- * }
- .raisedthumb .b3, .raisedthumb .b3b {
- * margin:0 2px;
- * }
- .raisedthumb .b4, .raisedthumb .b4b {
- * height:2px; margin:0 1px;
- * }
- .raisedthumb .b1b {
- * margin:0 5px; background:#999;
- * }
- .raisedthumb .boxcontent {
- * display:block;
- * height: 50 ?>px;
- * max-height: 50 ?>px;
- * overflow: hidden;
- * background:#ccc;
- * border-left:1px solid #fff;
- * border-right:1px solid #999;
- * }
- </style>
- <script type="text/javascript">
- var dragbox;
- var deltaX, deltaY;
- var client;
- createClient();
- function createClient() {
- try {
- client = window.XMLHttpRequest ? new XMLHttpRequest() :
- new ActiveXObject("Microsoft.XMLHTTP");
- } catch (e) {
- alert("Sorry, your browser is not Ajax-enabled!");
- }
- }
- function setOpacity(node,val) {
- if (node.filters) {
- try {
- node.filters["alpha"].opacity = val*100;
- } catch (e) { }
- } else if (node.style.opacity) {
- node.style.opacity = val;
- }
- }
- function getX(node) {
- return parseInt(node.style.left);
- }
- function getY(node) {
- return parseInt(node.style.top);
- }
- function getWidth(node) {
- return parseInt(node.style.width);
- }
- function getHeight(node) {
- return parseInt(node.style.height);
- }
- function setX(node,x) {
- node.style.left = x + "px";
- }
- function setY(node,y) {
- node.style.top = y + "px";
- }
- function Evt(evt) {
- this.evt = evt ? evt : window.event;
- this.source = evt.target ? evt.target : evt.srcElement;
- this.x = evt.pageX ? evt.pageX : evt.clientX;
- this.y = evt.pageY ? evt.pageY : evt.clientY;
- }
- Evt.prototype.toString = function () {
- return "Evt [ x = " + this.x + ", y = " + this.y + " ]";
- };
- Evt.prototype.consume = function () {
- if (this.evt.stopPropagation) {
- this.evt.stopPropagation();
- this.evt.preventDefault();
- } else if (this.evt.cancelBubble) {
- this.evt.cancelBubble = true;
- this.evt.returnValue = false;
- }
- };
- Evt.addEventListener = function (target,type,func,bubbles) {
- if (document.addEventListener) {
- target.addEventListener(type,func,bubbles);
- } else if (document.attachEvent) {
- target.attachEvent("on"+type,func,bubbles);
- } else {
- target["on"+type] = func;
- }
- };
- Evt.removeEventListener = function (target,type,func,bubbles) {
- if (document.removeEventListener) {
- target.removeEventListener(type,func,bubbles);
- } else if (document.detachEvent) {
- target.detachEvent("on"+type,func,bubbles);
- } else {
- target["on"+type] = null;
- }
- };
- function dragPress(evt) {
- evt = new Evt(evt);
- dragbox = evt.source;
- setOpacity(dragbox,.7);
- deltaX = evt.x - getX(dragbox);
- deltaY = evt.y - getY(dragbox);
- Evt.addEventListener(document,"mousemove",dragMove,false);
- Evt.addEventListener(document,"mouseup",dragRelease,false);
- }
- function dragMove(evt) {
- evt = new Evt(evt);
- setX(dragbox,evt.x - deltaX);
- setY(dragbox,evt.y - deltaY);
- evt.consume();
- }
- function dragRelease(evt) {
- evt = new Evt(evt);
- setOpacity(dragbox,1);
- Evt.removeEventListener(document,"mousemove",dragMove,false);
- Evt.removeEventListener(document,"mouseup",dragRelease,false);
- if (droppedOnDropBox(evt)) {
- dragBoxDropped(evt);
- }
- }
- function droppedOnDropBox(evt) {
- var dropbox = document.getElementById("dropbox");
- var x = getX(dropbox);
- var y = getY(dropbox);
- var width = getWidth(dropbox);
- var height = getHeight(dropbox);
- return evt.x > x &&
- evt.y > y &&
- evt.x < x + width &&
- evt.y < y + height;
- }
- function dragBoxDropped(evt) {
- client.onreadystatechange = callback;
- client.open("get","server.php",true);
- client.send(null);
- }
- function callback() {
- if (client.readyState == 4) {
- if (client.status == 200) {
- alert(client.responseText);
- createClient();
- } else {
- alert("Sorry, there seems to be a problem retrieving the response:\n" +
- client.statusText);
- createClient();
- }
- }
- }
- </script>
- </head>
- <body bgcolor="black" onload="windowLoaded(event);">
- <div id="dragbox" class="raisedthumb" style="position: absolute;
- top: 5 ?>%;
- left: 8%; background:transparent; width: 60px;* *height: 60px; filter:
- alpha(opacity=100); opacity:1; z-index:100;"
- onmousedown="dragPress(event);">
- <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
- <div id="mycard_xml" class="boxcontent">
- click just off corner to drag
- </div>
- <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b
- class="b1b"></b>
- </div>
- <div id="dragbox2" style="position: absolute;
- top: 20px;
- left: 400px; background:white; width: 60px;* *height: 60px; filter:
- alpha(opacity=100); opacity:1; z-index:2;"
- onmousedown="dragPress(event);">
- normal div dragbox
- </div>
- <div id="dropbox" style="position: absolute; top:300px; left:300px;
- width:100px; height:100px; background:orange;">
- target box
- </div>
- </body>
- </html>