2012/10/16

[jQuery UI]Resizable機能とDraggable機能を合わせる

Draggable機能Resizable機能を一つのdom要素に適用する場合について書きたいと思います。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' ></script>
<link  type='text/css' rel='stylesheet'  href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css' />
<style>

#draggable_01 {
 width: 150px;
 height: 150px;
 padding: 0.5em;
}
</style>
<script>
jQuery(function($) {
 $("#draggable_01").resizable();
 $("#draggable_01").draggable();
});
</script>
</head>
<body>
<div id="draggable_01" class="ui-widget-content">
This is test contents1
</div>
</body>
</html>
下で試すことができます。




This is test contents1

0 コメント:

コメントを投稿