��6�́@�u�h���b�O�̏����v

jQuery�͕W���ł�UI (���[�U�[�C���^�[�t�F�[�X) �܂��̃��\�b�h�����܂�p�ӂ���Ă��܂���B�Ⴆ�΃h���b�O������A�R�[�f�B�I����^�u�p�l���̏����Ȃǂł��B����UI�܂��̏�����jQuery UI���s�Ȃ��悤�ɂȂ��Ă��܂��BjQuery UI�͈ȉ��̃y�[�W����_�E�����[�h���邱�Ƃ��ł��܂��B

http://ui.jquery.com/

�_�E�����[�h����ƃt�H���_���ɂ͂����‚��̃t�@�C�����W�J����܂��B�K�v�ɉ����ăt�@�C����I�����Ďg���悤�ɂȂ��Ă��܂��B
�܂��A�ȒP�ȃh���b�O�������s�Ȃ��Ă݂܂��B�h���b�O�����ɂ�ui.mouse.js�Aui.draggable.js�Aui.draggable.ext.js��3�t�@�C�����K�v�ɂȂ�܂��B���̃t�@�C����ǂݍ��܂��鎞�ɂ͕K���A���̏��Ԃœǂݍ��܂��Ă��������B
jQuery UI��jQuery�I�u�W�F�N�g�Ƀ��\�b�h��lj�����v���O�C���Ƃ����`���̗p���Ă��܂��B���̂��߁A�G�������g���h���b�O���郁�\�b�h���V���ɒlj�����邱�ƂɂȂ�܂��B���̃h���b�O�����̃��\�b�h��draggable()�ɂȂ�܂��B �T���v��1��ID����myArea�̃G�������g���h���b�O�ł���悤�ɂ��܂��B�i�T���v��1�����s�����j

�yHTML�z
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.ext.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQuery�T���v��</h1>
<p>jQuery UI�̏���</p>
<div id="myArea">�������h���b�O�ł��܂�</div>
</body>
</html>


�yCSS�z
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
#myArea {
background-color:yellow;
width:240px;
height:160px;
}


�yJavaScript�z
$(function(){
$("#myArea").draggable();
});


�����ID�������ƒG�������g�����łȂ��A����̃N���X�����ƒG�������g��Ώۂɂ��邱�Ƃ��ł��܂��BjQuery UI�̓v���O�C���̌`�Ȃ̂�$()�Ŏw�肷��p�����[�^���h���b�O�������N���X�����L�q���邾���ōς݂܂��B���ɊȒP�Ƀh���b�O�����������ł��܂��B
�T���v��2�ł�4�‚̃G�������g���h���b�O���邱�Ƃ��ł��܂��B�i�T���v��2�����s�����j

�yHTML�z
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/ui.draggable.ext.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQuery�T���v��</h1>
<p>jQuery UI�̏���</p>
<div class="dArea">(1) �������h���b�O�ł��܂�</div>
<div class="dArea">(2) �������h���b�O�ł��܂�</div>
<div class="dArea">(3) �������h���b�O�ł��܂�</div>
<div class="dArea">(4) �������h���b�O�ł��܂�</div>
</body>
</html>


�yCSS�z
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
.dArea {
background-color:yellow;
width:120px;
height:100px;
}


�yJavaScript�z
$(function(){
$(".dArea").draggable();
});

[�ڎ���]