mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
74 lines
1.9 KiB
HTML
74 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery UI Interaction - Box</title>
|
|
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
|
<script src="../../jquery-1.7.1.js"></script>
|
|
<script src="../../ui/jquery.ui.core.js"></script>
|
|
<script src="../../ui/jquery.ui.widget.js"></script>
|
|
<script src="../../ui/jquery.ui.interaction.js"></script>
|
|
<link rel="stylesheet" href="../demos.css">
|
|
<style>
|
|
#canvas { width: 300px; height: 200px; border: 1px solid black; }
|
|
.demo-box { border: 1px dotted black; width: 0; height: 0; }
|
|
.demo-box-complete { border-color: gray; background: lightBlue; }
|
|
</style>
|
|
<script>
|
|
$(function() {
|
|
$.widget( "demo.box", $.ui.interaction, {
|
|
_start: function( event, pointerPosition ) {
|
|
this.startPosition = pointerPosition;
|
|
|
|
this.box = $( "<div>" )
|
|
.appendTo( this.element.empty() )
|
|
.addClass( "demo-box" )
|
|
.offset({
|
|
left: pointerPosition.x,
|
|
top: pointerPosition.y
|
|
});
|
|
},
|
|
|
|
_move: function( event, pointerPosition ) {
|
|
var x1 = this.startPosition.x,
|
|
y1 = this.startPosition.y,
|
|
x2 = pointerPosition.x,
|
|
y2 = pointerPosition.y;
|
|
|
|
this.box
|
|
.offset({
|
|
left: Math.min( x1, x2 ),
|
|
top: Math.min( y1, y2 )
|
|
})
|
|
.css({
|
|
width: x1 > x2 ? x1 - x2 : x2 - x1,
|
|
height: y1 > y2 ? y1 - y2 : y2 - y1
|
|
});
|
|
},
|
|
|
|
_stop: function() {
|
|
this.box.addClass( "demo-box-complete" );
|
|
}
|
|
});
|
|
|
|
$( "#canvas" ).box();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="demo">
|
|
|
|
<div id="canvas"></div>
|
|
|
|
</div><!-- End demo -->
|
|
|
|
|
|
<div class="demo-description">
|
|
<p>This demo shows how you can create a simple box-drawing (aka lasso) interaction built on top of the interaction utility (jquery.ui.interaction.js).</p>
|
|
<p>Draw a box by starting in the box above using the mouse or a touch input device.</p>
|
|
</div><!-- End demo-description -->
|
|
|
|
</body>
|
|
</html>
|