�A�h�C���Ȃ��Ŏ����”\�I �h���b�O���h���b�v���g�����Ȃ����F�A�ځF�l�C���ɐ������鏉�߂Ă�HTML5�J���i1/2 �y�[�W�j

�u���E�U�W���̋@�\�݂̂Ńh���b�O���h���b�v�������ł���AHTML5�́uDrag and Drop API�v�̎g����������B

» 2011�N09��13�� 00��00�� ���J
[�i�I�L�i�ďC�F�R�c�ˊ��j�CWINGS�v���W�F�N�g�ihttp://www.wings.msn.to/�j]
�A�ځF�l�C���ɐ������鏉�߂Ă�HTML5�J��
�Ɩ��A�v��Insider�^Insider.NET

powered by Insider.NET

�u�A�ځF�l�C���ɐ������鏉�߂Ă�HTML5�J���v�̃C���f�b�N�X

�A�ږڎ�

�@�h���b�O���h���b�v�ƕ����ƁA���̕��̓N���C�A���g�E�A�v���P�[�V�����ł̑���Ɗ����邾�낤�B�]���A�����Ă��̃u���E�U�̓h���b�O���h���b�v�ɂ͑Ή����Ă��炸�AWeb�y�[�W��Ńh���b�O���h���b�v�@�\����������ɂ́AjQuery�v���O�C���ȂNJO�����C�u�����𗘗p����K�v���������B������HTML5�ł́A�d�l�Ƃ��āuDrag and Drop API�v����`���ꂽ�B����𗘗p���邱�ƂŁA���C�u�����ɗ��邱�ƂȂ��A�u���E�U�W���̋@�\�݂̂Ńh���b�O���h���b�v�������ł���悤�ɂȂ�B

�@Drag and Drop API�͎��̕\�̂Ƃ���A���݁A�����[�X����Ă����v�u���E�U�ł��A�قƂ�ǎ����ς݂��B

�u���E�U �Ή��o�[�W����
Internet Explorer 5.5�ȍ~
Firefox 3.5�ȍ~
Chrome 4�ȍ~
Safari 3.1�ȍ~
Opera ������
��v�u���E�U�ɂ�����Drag and Drop API�̎�����

�@HTML5��Drag and Drop API�́AInsider.NET�̓ǎҏ����Ȃ�ΏK�����e�ՂȂ͂����B�Ȃ��Ȃ�A�h���b�O���h���b�v�̎������@��.NET Framework��Windows�t�H�[���E�A�v���P�[�V�����̂���Ɨގ����Ă��邩�炾�B

�@HTML 5��Drag and Drop API�̎������@�́u�h���b�O����v�Ɓu�h���b�v����v�ɐ؂蕪���čl����K�v�����邪�A���̍l�����͂��΂�Windows�t�H�[���E�A�v���P�[�V�����̂���Ɠ��l�ł���B����́ADrag and Drop API�̐݌v�Ƀ}�C�N���\�t�g���傫�ȉe����^���Ă���_�ɗR�����Ă���B�@WHATWG�iWeb Hypertext Application Technology Working Group�j��HTML5�̎d�l�����i�߂�ہA�u��i�I�ȋ@�\���������Ă���u���E�U�̋������K�i������v�Ƃ�����{���O���������B�}�C�N���\�t�g�ł́AIE5�̍ۂɁuIE�Ǝ������v�Ƃ����`�Ńh���b�O���h���b�v�@�\���������Ă���i�����.NET Framework��Windows�t�H�[���E�A�v���P�[�V�����ł̎����̃x�[�X�ƂȂ��Ă���ƒ��҂͊����Ă���j�AWHATWG�̗��O�ɂ���āA���̋@�\��HTML5�̃h���b�O���h���b�v�̊�ՂƂȂ����Ƃ����킯���B���̂悤�ȗ�����o�ē������ꂽ�@�\�ł��邽�߁AHTML5��Drag and Drop API��IE6�ł����p�ł���Ƃ��������b�g������B�@�u���E�U�E�V�F�A�Ȃǂ���l�����Drag and Drop API�́AHTML5�̎d�l�̒��ň�Ԏ������₷���@�\���Ƃ������邾�낤�B�������Ȃ���A�ꌩ�A�ǂ����Ƃ̂悤�Ɋ����邩������Ȃ����A�N���C�A���g�E�A�v���P�[�V�����̂悤�ȑ����̃C�x���g�ɂ�鏈���̋L�ڂ̔ώG���ɂ‚��Ă͔ے�I�Ȉӌ����o�Ă���i�Q�l�F�u�{�̒�: QuirksBlog: HTML5�̃h���b�O���h���b�v�̓N�\���v�j�B�@����ł́A���ۂɃh���b�O���h���b�v�̏����ɂ‚��Č��Ă������B

���u���E�U�Ŏ�������h���b�O���h���b�v

�@�ŏ��ɁA�u���E�U��Ŏ��������{�I�ȃh���b�O���h���b�v�̗Ⴞ�B

�@�T���v�������s����ƁA�摜�Ɛ˜g���\�������B�摜��F�̕����Ƀh���b�O���h���b�v����ƁA�摜���ړ��ł���B���s���ʂ́A�ȉ��̂Ƃ���B

�}1�@�h���b�O���s��

�}2�@�h���b�v����

�@��̓I�ȃR�[�h�́A�ȉ��̂Ƃ���ł���B

<p>�g����g�Ƀh���b�O���h���b�v�����{�ł��܂�</p>
<!-- �i1�j�h���b�O���ƃh���b�O��̗v�f�ɃC�x���g�⑮�����w�� -->
<div style="width:700px; height:210px;">
<img id="cat1pic" src="cat1.jpg" draggable="true" ondragstart="DragStart(event)" />
</div>
<div id="drop"
  style="width:700px; height:300px; background-color:blue; padding:10px;"
  ondragover="DragOver(event)" ondrop="Drop(event)" >
</div>
<script type="text/javascript">

// �i2�j�h���b�O�J�n���Ƀf�[�^�̒l��ݒ肷��
function DragStart(event) {
  event.dataTransfer.setData("text", event.target.id);
}

// �i3�j�h���b�v���Ɍ��̃h���b�O�l���擾���A���݂̗v�f��ɓ���q�ŕۑ�����
function Drop(event) {
  var id = event.dataTransfer.getData("text");
  var elm = document.getElementById(id);
  event.currentTarget.appendChild(elm);
  event.preventDefault();
}

// �i4�j�u���E�U�W���̃h���b�v������L�����Z��
function DragOver(event) {
  event.preventDefault();
}
</script>

�摜���h���b�O���h���b�v����T���v���idnd1.htm�j

�i1�j�h���b�O���ƃh���b�O��̗v�f�ɃC�x���g�⑮�����w��

�@draggable�����Ƃ́A���ׂĂ̗v�f�Ŏw��ł��鑮���ŁA�w�肵���v�f���h���b�O�ɂ���Ĉړ��ł��邩�ۂ����w�肷��B�T���v���ł�<img>�v�f�ɑ΂���draggable�������utrue�v�Œ�`���Ă���Bdraggable�����̏����͈ȉ��̂Ƃ��肾�B

���� �T�v
draggable="true" �h���b�O�����{����
draggable="false" �h���b�O�����{���Ȃ�
draggable="" �f�t�H���g�̓�������{
draggable�����̏����ƊT�v

�@�f�t�H���g�̓���͗v�f�ɂ���Č��܂�B��{�I�ɂقƂ�ǂ̗v�f�ł̓h���b�O�����{���Ȃ��i��false�j�ݒ�ƂȂ��Ă��邪�A��O�Ƃ���<a>�v�f��<img>�v�f�ł́u�h���b�O�͗L���i��true�j�v���f�t�H���g�̋����ł���B�@�����āA<img>�v�f��<div>�v�f�Ƀh���b�O�J�n�ƃh���b�v�J�n�̃C�x���g���w�肷��B�h���b�O���h���b�v�ŗ��p�ł���C�x���g�͈ȉ��̂Ƃ���B

��� �C�x���g�� �����^�C�~���O
�h���b�O dragstart �h���b�O�J�n��
drag �h���b�O��
dragend �h���b�O�I����
�h���b�v dragenter �h���b�O���̗v�f���h���b�v�”\�ȗv�f�ɓ������Ƃ�
dragover �h���b�O���̗v�f���h���b�v�”\�ȗv�f���ɂ���Ƃ�
dragleave �h���b�O���̗v�f���h���b�v�”\�ȗv�f����o���Ƃ�
drop �h���b�v��
�h���b�O���h���b�v����Ɋւ���C�x���g

�@�h���b�O�ƃh���b�v�Ɋւ���C�x���g�ɂ́A�uondragenter�v��uondrop�v�ȂǁA�e�C�x���g�ɑΉ�����uon�`�v�Ƃ����������p�ӂ���Ă���B�����̑����ɁA�C�x���g�E�n���h���ƂȂ�֐��̖��O���w�肵�A�C�x���g���Ƃ̓�����e�֐��Ɏ�������B�h���b�O����MouseLeave��MouseEnter�Ȃǂ̃}�E�X�E�C�x���g�Ȃǂ͔������Ȃ��_�ɂ͒��ӂ��K�v���B

�i2�j�h���b�O�J�n���Ƀf�[�^�̒l��ݒ肷��

�@�����āA�i2�j�`�i3�j���h���b�O���h���b�v�����������A�̃C�x���g�E�n���h�����B�O�q�����悤�ɁA�h���b�O���h���b�v����ł́A�h���b�O����ƃh���b�v����𕪂��āA��������̂���{�ł���B�p��ł́A�h���b�O�J�n���Ƀh���b�O���̗v�f���L�^���i�i2�j�j�A�h���b�v���ɗv�f�̈ړ������i�i3�j�j���s���Ă���B�@����ł́A�i2�j�̃h���b�O�J�n���̑���i��DragStart�֐��j���猩�Ă������B

�@�����Ń|�C���g�ƂȂ�̂́ADataTransfer�I�u�W�F�N�g���BDataTransfer�I�u�W�F�N�g�̓h���b�O���h���b�v�Ŏ󂯓n���Ɋւ���f�[�^���Ǘ�����I�u�W�F�N�g���BDataTransfer�I�u�W�F�N�g���񋟂��郁�\�b�h�ƃv���p�e�B�͈ȉ��̂Ƃ���B

���\�b�h�^�v���p�e�B�� �T�v
setData(key, value) �h���b�O�ƃh���b�v�ɂ��󂯓n������f�[�^���L�[�^�l�̃y�A�Őݒ�
getData(key) setData���\�b�h�Őݒ肵���f�[�^���A�L�[�itext�^url�j���w�肵�Ď擾�B��q����Ƃ���AMIME�^�C�v���w�肷�邱�ƂŊO���̃^�u��u���E�U����̃h���b�v�E�f�[�^���擾���邱�Ƃ��ł���
clearData() �f�[�^���N���A
setDragImage(image, x, y) �h���b�O���̃h���b�O�E�A�C�R���摜��<img>�v�f��p���Ďw��Bx�^y�̍��W�����w�肵�A�\���ʒu�𒲐����邱�Ƃ��ł���
addElement(element) �h���b�O���̗v�f���w��
types setData���\�b�h�ŃZ�b�g���ꂽ�f�[�^�̌`�����擾
files ���[�J���E�t�@�C������h���b�O���ꂽ�f�[�^���Q��
dropEffect �h���b�O���̃}�E�X�E�A�C�R���Ƀh���b�v���ʂ̎�ނ�ݒ�B�摜���A�v���P�[�V�������ŃR�s�[����icopy�j�A�摜��URL�������N�Ƃ��ē\��t����ilink�j�A�摜���ړ�������imove�j�ȂǁA�����ɉ����Đݒ肪�”\
effectAllowed �h���b�v������󂯕t����v�f�ɂ����鑀��̎�ނ�ݒ�B�h���b�v�ł��Ȃ��inone�j�A�S�Ă̑�����󂯕t����iall�j�A�����N������\���ł���ilink�j�Ȃǂ̐ݒ肪�”\
�h���b�v����Ɋւ���C�x���g

�@���̗�ł́AsetData���\�b�h��DataTransfer�I�u�W�F�N�g�Ƀh���b�O���v�f��ID�l��ݒ肵�A�h���b�v���ɏ������ׂ��v�f��ޔ������Ă���i���̏��́A�ォ��Drop�֐��ŗ��p�ł���j�B�v�f��ID�́uevent.target.id�v�Ŏ擾�”\���B�܂��AsetData���\�b�h�ł̓L�[�Ƃ��āutext�v�܂��́uurl�v�����w��ł��Ȃ��̂Œ��ӂ��ꂽ���B

�i3�j�h���b�v���Ɍ��̃h���b�O�l���擾�����݂̗v�f��ɓ���q�ŕۑ�����

�@Drop�֐��̓h���b�v���ɌĂяo�����C�x���g�E�n���h�����B�ŏ���getData���\�b�h�Łi2�j�Őݒ肵���l�iID�j���擾���Ă���B�����āA�擾����ID�����getElementById���\�b�h�ŗv�f�̃m�[�h���擾���A�h���b�v��̗v�f�̎q�v�f�Ƃ��Ēlj����Ă���B�@�h���b�v��̗v�f��event.currentTarget�v���p�e�B�Ŏ擾�ł���B�‚܂�A�uevent.currentTarget.appendChild(�c�c)�v�ŁA�h���b�v��v�f�̍Ō�̎q�v�f�Ƀh���b�v���v�f��lj�����A�Ƃ����Ӗ��ɂȂ�B�@�Ȃ��A�Ō�ɁA�f�t�H���g�̓����}�~���邽�߂�preventDefault���\�b�h���g�p���ăC�x���g���~���Ă���_�ɂ����ڂ��Ăق����B�����Ȃ��ƁADrop�C�x���g�����[�v�Ŕ������A�������h���b�v���삪�s���Ȃ��B

�i4�j�u���E�U�W���̃h���b�v������L�����Z��

�@DragOver�֐��̓h���b�v�”\�ȗv�f���ɂ���Ƃ��ɌĂяo�����C�x���g�E�n���h�����Bdragover�C�x���g�͊���̐ݒ�Ńh���b�v���󂯕t���Ȃ����߁ApreventDefault���\�b�h���g�p���ău���E�U�W���̃h���b�v������L�����Z�����Ă���B����ɂ��h���b�v��̗v�f���h���b�v������󂯕t����悤�ɂȂ�B

�@Drag and Drop API�ɂ����āAdragover�C�x���g�͊���̃A�N�V�������v�f���h���b�v�����Ȃ����Ƃɂ��邽�߁ApreventDefault���\�b�h���Ăяo�����ƂɂȂ�B���̂���@���K�v�ȓ_�ɂ͒��ӂ��K�v���B

�@�ȏ�𗝉����������ŁA���̃y�[�W�ł́A�����p�I�ȃh���b�O���h���b�v�̃T���v���������B

�@�@�@�@�@�@ 1|2 ���̃y�[�W��

Copyright© Digital Advantage Corp. All Rights Reserved.

�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

AI for �G���W�j�A�����O
�u�T�v���C�`�F�[���U���v�΍�
1P��V�X�̂��߂̐Ǝ㐫�Ǘ��^�΍�̌�����
OSS�̃T�v���C�`�F�[���Ǘ��A���ׂ��A�N�V�����Ƃ�
Microsoft �� Windows�őO��2024
�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