ちなみにちょっと中を覗いてみると、JQueryのマウスイベントを利用して、常に座標を更新し続けるアニメーション的動作な感じでしょうか。そのうち時間を取ってソースを追いかけてみたいと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>JQuery UI</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
#box{
width: 150px;
height: 150px;
background-color: rgba(164,218,243,1);
font-size: 16px;
border: solid 2px;
}
.handle{
height: 50%;
background-color: rgba(201,246,74,1);
}
</style>
</head>
<body>
<div id="box">
<div class="handle">Draggable</div>
<div>Undraggable</div>
</div>
<script>
$(function () {
$('#box').draggable({
opacity: 0.5,
handle: '.handle'
//cancel: '.cancel'
});
});
</script>
</body>
</html>
上のソースを貼り付けると、次のような、ドラッグ可能な四角形を表示できます。
Draggable
Undraggable
HTML内で作成したboxに、JQuery UIでDraggableをつけているだけです。簡単ですね！ 色々な引数がありますが、そこは本家サイトを参照します。
JQuery UIのリファレンス
ここで使っているのは、handleというオプションです。この値が指定されている箇所のみがドラッグ可能になります。反対はcancelですね。 opacityで、ドラッグしている間だけ色が薄くなる効果をつけています。
色々なことが出来そうですね！
0 件のコメント:
コメントを投稿