Using Handles
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
#playground {
position: relative;
height: 200px;
}
.dd-demo {
position:absolute;
border:4px solid #666;
text-align:center;
color:#fff;
height:60px;
width:60px;
}
.dd-demo .dd-handle {
background: #003366;
cursor:move;
}
.dd-demo .dd-multi-handle-1 {
background: #336699; float: left;
cursor:move;
}
.dd-demo .dd-multi-handle-2 {
background: #336699; float: right;
cursor:move;
}
.dd-outer-handle {
position:relative;
background: red;
cursor:move;
height: 20px;
width: 3em;
text-align:center;
top:0px; left:200px;
}
.dd-demo-em {
border:4px solid purple;
}
#dd-demo-1 {
background-color:#6D739A;top:0px; left:0px;
}
#dd-demo-2 {
background-color:#566F4E;top:50px; left:100px;
}
#dd-demo-3 {
background-color:#7E5B60;
top:20px; left:200px;
}
Using Handles
This example demonstrates how to use drag handles to control the specific places within an element from which a drag can be initiated.