2014-03-11 10:50:12 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Compound Visual Test: Draggable and Resizable block element< / title >
< link rel = "stylesheet" href = "../visual.css" >
< link rel = "stylesheet" href = "../../../themes/base/all.css" >
2014-06-10 11:55:45 +00:00
< script src = "../../../external/jquery/jquery.js" > < / script >
2014-03-11 10:50:12 +00:00
< script src = "../../../ui/core.js" > < / script >
< script src = "../../../ui/widget.js" > < / script >
< script src = "../../../ui/mouse.js" > < / script >
< script src = "../../../ui/draggable.js" > < / script >
< script src = "../../../ui/resizable.js" > < / script >
< style >
.draggable {
margin: 0.5em;
padding: 0.5em;
}
.absolute {
color: red;
position: absolute !important;
}
< / style >
< script >
$(function() {
$( ".draggable" )
.addClass( "ui-widget ui-widget-header ui-corner-all" )
.draggable({
revert: "invalid"
})
.resizable({
minHeight: 13,
handles: "s"
});
$( ".draggable:last" ).addClass( "absolute" );
});
< / script >
< / head >
< body >
< p > WHAT: Three draggable and resizable elements, with only a bottom handle. Last one (red color) is absolutely positioned.< / p >
< p > EXPECTED: Each element can be dragged and resized. The first two stay with their relative positioning (induced by draggable). The last one can be resized despite the absolute positioning.< / p >
< div id = "first" >
< div class = "draggable" > Draggable 1-1< / div >
< div class = "draggable" > Draggable 1-2< / div >
< div class = "draggable" > Draggable 1-3< / div >
< / div >
< / body >
< / html >
