jQuery UI�Ŏ����I Ajax�ŕ����I���h���b�O���h���b�v�F�p�^�[���ƃ��C�u�����ō��Ajax�����������V�s�i5�j�i2/4 �y�[�W�j

» 2008�N03��03�� 00��00�� ���J
[�u�c�T���C�A�[�N�E�F�u�������]

�� Draggables�̃C�x���g�n���h�����擾�ł�����

�@jQuery UI���񋟂���h���b�O���h���b�v�֘A�̃C�x���g�n���h���́A��2�������炻�̃C�x���g�ɓ���������񂪎擾�”\�ł��BDraggables�̃C�x���g�n���h���ɂ́A���̂悤�ȏ�񂪓n����܂��i��2�����̕ϐ������uui�v�Ƃ����ꍇ�j�B

  • ui.instance�Fdraggable�̃C���X�^���X
  • ui.options�Fdraggable�̏��������Ɏw�肵���I�v�V����
  • ui.position�F�w���p�̌��݈ʒu
  • ui.absolutePosition�F�w���p�̌��݂̐�Ύw��ɂ��ʒu

�@�Ⴆ�΁A���L�̂悤�ɂ��邱�ƂŁA�h���b�O�I���������W���擾�ł��܂��B

<div id='target'>�h���b�O�”\</div>
<script type="text/javascript">
    $('#target').draggable({
        stop:
function(e, ui) {
            alert(' top: ' + ui.position.top + ' left: ' + ui.position.left);
        }
     });
</script>

�h���b�O�I�����̍��W���擾�����i�u�h���b�O�”\�v�Ƃ������x�����h���b�O���Ă��������B�g��\�����������j

�@������e���̃f�[�^�\���ɂ‚��ẮAFirebug�Ȃǂ�DOM�C���X�y�N�^��񋟂���c�[���Ŋm�F���Ă��������B

�ҏW�����FFirebug�ɂ‚��ďڂ����m�肽���ǎ҂́A�uFirebug�Ƃ́H Web�T�C�g�쐬�ɂǂ��𗧂‚̂��H�v�����Q�Ƃ��������B

�� �h���b�O�̈ꎞ�������A�L����

�@draggable()�̈����Ƀn�b�V���`���̃I�v�V�����ł͂Ȃ��u'disable'�v�Ƃ���String��^����ƁA�ꎞ�I�Ƀh���b�O�𖳌����ł��܂��B���l�ɁA�u'enable'�v��^����ƁA�ꎞ�I�Ȗ���������L�����ł��܂��B�u'destory'�v���w�肷��ƁA�@�\�����S�ɍ폜�ł��܂��i�Q�l�j�B

�h���b�v���”\�ɂ���uDroppables�v

�@�ł͎��ɁADroppables�̃V���v���Ȏg�p������Ă݂܂��傤�BDroppables�́Adraggable�ƂȂ����v�f��ʂ�DOM�v�f�Ƀh���b�v�ł���悤�ɂ���@�\��񋟂��܂��BDropaables���g�p���邽�߂�<script>�^�O���g�p���āA�ǂݍ��ޕK�v������t�@�C���͉��L�̂Ƃ���ł��i�Q�l�uUI/Droppables - jQuery JavaScript Library�v�́uDependancies�v�̕����j�B

  • jquery-1.2.3.min.js
  • jquery.dimensions.js
  • ui.mouse.js
  • ui.draggable.js
  • ui.draggable.ext.js
  • ui.droppable.js
  • ui.droppable.ext.js

�@���L��Droppables�̋L�q��ɂȂ�܂��B

<div id='target'>�h���b�O�”\</div>
<div id='goal'>�h���b�v�”\</div>
<script type="text/javascript">
    $('#target').draggable();
    $('#goal').droppable(
        {accept: '#target',
         drop:
function(e, ui) {
            alert('�h���b�v����܂���');
        }
    });
</script>

Droppables�̃V���v���ȗ�i�u�h���b�O�”\�v�Ƃ������x�����u�h���b�v�”\�v�Ƃ������x���̏�Ƀh���b�O���h���b�v���Ă��������B�g��\�����������j

�@�h���b�v��������DOM�v�f�i���̗�ł́A�u<div id='goal'>�v�j��droppable()���w�肵�܂��B����̗�ł́A�I�v�V�����Ƃ���accept��drop���w�肵�Ă��܂��Baccept�́A�w�肵���v�f�݂̂��h���b�v�”\�Ƃ���悤�ɐݒ�ł��Bdrop�́A�h���b�v���̃C�x���g�n���h���̎w��ł��B

�� Droppables�Ɏw��”\�ȃI�v�V����

�@droppable()�̃I�v�V�������ꕔ�����ŏЉ�܂��B�ڂ����́uUI/Droppables/drappable - jQuery JavaScript Library�v�́uoptions�v�^�u���Q�Ƃ��Ă��������B�܂��A�e�I�v�V�����w�育�Ƃ̃T���v���́A�uDroppable Demo�v���Q�Ƃ��Ă��������B

�\2 Droppables�̎�ȃI�v�V����
�I�v�V������ �w�肷��l ����
accept Boolean Function(draggable) �h���b�O���̗v�f���h���b�v�”\���ǂ����̔���̎d�����֐��Ŏw��
accept String �h���b�O���̗v�f���h���b�v�”\���ǂ������Z���N�^�Ŏw��
hoverClass String �h���b�O���̗v�f���h���b�v�”\�ȗv�f�ɏd�Ȃ����ۂɕt�^�����CSS�̃N���X�����w��
drop Function(e, ui) �h���b�v���̃C�x���g�n���h�����w��

�� Droppables�̃C�x���g�n���h�����擾�ł�����

�@Droppables�̃C�x���g�n���h���͑�2�������玟�̂悤�ȏ����擾�”\�ł��B

  • ui.instance�Fdroppable�̃C���X�^���X
  • ui.options�Fdroppable�̏��������Ɏw�肵���I�v�V����
  • ui.position�F�w���p�̌��݈ʒu
  • ui.absolutePosition�F�w���p�̌��݂̐�Ύw��ɂ��ʒu
  • ui.draggable�F���݂�draggable
  • ui.helper�F���݂̃w���p

�h���b�O�ɂ�镡���I�����”\�ɂ���uSelectables�v

�@���ɁASelectables�̃V���v���ȗ��p������Ă݂܂��傤�BSelectables�́A�w�肵��DOM�v�f�̎q�v�f���h���b�O�ŕ����I���ł���悤�ɂ���@�\��񋟂��܂��BSelectables�𗘗p���邽�߂ɓǂݍ��݂̕K�v�ȃt�@�C���͉��L�ł��i�Q�l�uUI/Selectables - jQuery JavaScript Library�v �́uDependancies�v�̕����j�B

  • jquery-1.2.3.min.js
  • jquery.dimensions.js
  • ui.mouse.js
  • ui.draggable.js
  • ui.draggable.ext.js
  • ui.droppable.js
  • ui.droppable.ext.js
  • ui.selectable.js

�@���L��Selectables�̋L�q��ł��B

<div id='target'>
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
</div>
<script type="text/javascript">
    $('#target').selectable();
</script>

Selectables�̃V���v���ȗ�i�uitem 1�v�uitem 2�v�uitem 3�v�Ƃ������x�����h���b�O�ŕ\�����ň͂�ł��������j

�@��L�T���v���ł́Atarget�̎q�v�f�ł���item 1�`3���}�E�X�ɂ���`�w��őI���ł���悤�ɂ��Ă��܂��B�I�����������v�f�̐e�v�f�i���̗�ł́A�u<div id='target'>�v�j�ɁAselectable()���w�肵�Ă��܂��Bselectable()�����s���ꂽDOM�v�f�́A���L�̂悤�ɂȂ�܂��B

<div id="target" class="ui-selectable">

�@���l�ɂ��̎q�v�f�ɂ́A���L�̂悤��CSS�̃N���X�������I�ɕt�^����܂��B

<div id="target" class="ui-selectee">

�@�܂��A�h���b�O���Ɏq�v�f���I�������ƁA���L�̂悤�ɂȂ�܂��B

<div class="ui-selectee ui-selecting">

�@���l�ɑI������������ƁA���L�̂悤��CSS�N���X���t�^����܂��B

<div class="ui-selectee ui-selected">

�@����ɂ��A�I�𒆂�A�I�������̗v�f�̌����ڂ��X�^�C���V�[�g�ō��ʉ����邱�Ƃ��ł��܂��B

�� Selectables�Ɏw��”\�ȃI�v�V����

�@selectable()�̃I�v�V�����̈ꕔ�������ŏЉ�܂��B�ڂ����́uUI/Selectables/selectable - jQuery JavaScript Library�v�́uoptions�v�^�u���Q�Ƃ��Ă��������B�܂��A�e�I�v�V�����w�育�Ƃ̃T���v���́A�uSelectable Demo�v���Q�Ƃ��Ă��������B

�\3 Selectables�̎�ȃI�v�V����
�I�v�V������ �w�肷��l ����
selected Function �I���������̃C�x���g�n���h�����w��
selecting Function �I�𒆂̃C�x���g�n���h�����w��
unselected Function �I���������̃C�x���g�n���h�����w��
unselecting Function �I���������̃C�x���g�n���h�����w��

�� Selectables�̃C�x���g�n���h�����擾�ł�����

�@Selectables�̃C�x���g�n���h���͑�2�������玟�̂悤�ȏ����擾�”\�ł��B

  • ui.options�Fselectable�̏��������Ɏw�肵���I�v�V����
  • ui.selectable�F���݂�selectable
  • ui.selected�F�I�����ꂽ�v�f
  • ui.selecting�F�I�𒆂̗v�f
  • ui.unselected�F�I���������ꂽ�v�f
  • ui.unselecting�F�I���������̗v�f

�@��������y�[�W����́A����̃T���v���𕪉����č���Љ���e�N�j�b�N���T���v���łǂ̂悤�Ɏg��ꂽ���O�������Ă����܂��B

Copyright © ITmedia, Inc. All Rights Reserved.

'; this.insertTarget = document.querySelector('#cmsBody .subscription') || document.querySelector('#cmsBody .inner'); }; BodyAdIMSWithCCE.prototype = Object.create(BodyAdContent.prototype); BodyAdIMSWithCCE.prototype.activate = function () { refreshGam('InArtSpecialLink'); } // global reference window.itm = itm; //entry point BodyAdEventBase.polyfill(); const bodyAdManager = BodyAdManager.getInstance(); bodyAdManager.addEventListener(BodyAdManager.EVENTS.READY, function (ev) { bodyAdManager.loadAdvertise(); }); bodyAdManager.init(); })();
�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

Microsoft  WindowsőO2025
AI for GWjAO
[R[h^m[R[h Zg by IT - ITGWjArWlX̒SŊ􂷂gD
Cloud Native Central by IT - XP[uȔ\͂gD
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B