Repository navigation
Expand file tree
/
Copy pathHTML-dnd-ja.html
More file actions
4543 lines (4220 loc) · 124 KB
/
Copy pathHTML-dnd-ja.html
File metadata and controls
4543 lines (4220 loc) · 124 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>HTML Standard — Drag and drop （日本語訳）</title>
<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-whatwg.css" type="text/css">
<style>
@supports (grid-template-columns: subgrid) and (display: contents) {
#_event-summary {
min-width:28em;
grid-template-columns: 4em minmax(4em, 8em) minmax(4em, 8em) 1fr;
tr {
grid-template-areas:
"名 名 名 名"
". 標的 標的 標的"
". 取消可否 mode 効果"
". 既定動作 既定動作 既定動作"
;
> *:nth-child(1) {
border-left-width: 0;
grid-area: 名;
}
> *:nth-child(2) {
grid-area: 標的;
}
> *:nth-child(3) {
grid-area: 取消可否;
}
> *:nth-child(4) {
grid-area: mode;
}
> *:nth-child(5) {
grid-area: 効果;
}
> *:nth-child(6) {
grid-area: 既定動作;
}
}
}
}
</style>
<script src="common0.js"></script>
<script src="common1.js" async></script>
<script>
Util.ready = function(){
const source_data = {
toc_main: 'MAIN',
generate: expand
};
Util.switchWordsInit(source_data);
}
function expand(){
const class_map = this.class_map;
const tag_map = this.tag_map;
const link_map = this.link_map;
return this.html.replace(
/%[\w\-~一-鿆あ-ん]+|`(.+?)([$@\^])(\w*)/g,
create_html
);
function create_html(match, key, indicator, klass){
if(!key) {
return `<var>${match.slice(1)}</var>`;
}
let href = '';
let href1 = '';
{
const n = key.indexOf('＠');
if(n > 0) {
href1 = key.slice(n + 1);
key = key.slice(0, n);
}
}
let text = key;
switch(klass){
case 'r':
text = `[${key}]`;
href = `HTML-references.html#refs${key}`;
break;
case 'tE':
case 'tD':
case 'op':
case 'l':
text = `"<code class="literal">${text}</code>"`;
break;
case 'm':
const n = text.indexOf('(');
if(n > 0){
key = text.slice(0, n);
text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
}
break;
case 'a':
text = text.slice(text.indexOf('.') + 1);
break;
case 'h':
text = `<code class="header">${text}</code>`;
break;
case 'kY':
text = `<kbd><kbd>${text}</kbd></kbd>`;
break;
case 'en':
return `<span lang="en">${key}</span>`;
break;
}
let tag = tag_map[klass];
if(tag) {
let classname = class_map[klass];
classname = classname ? ` class="${classname}"` : '';
text = `<${tag}${classname}>${text}</${tag}>`;
}
if(indicator !== '^'){
href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
if(!href){
console.log(match); // check error
return match;
}
switch(indicator){
case '$':
text = `<a href="${href}">${text}</a>`;
break;
case '@':
text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
break;
}
}
return text;
}
}
</script>
<script type="text/plain" id="_source_data">
●●options
spec_date:2025-06-20
trans_update:2025-01-16
source_checked:240712
page_state_key:HTML
spec_status:LS
original_url:https://html.spec.whatwg.org/multipage/dnd.html
abbr_url:HTMLdnd
site_nav:uievents,html
nav_prev:HTMLinteraction
nav_next:HTMLpopover
trans_1st_pub:2016-03-24
●●class_map
e:element
a:attr
et:event-type
ps:pseudo
P:production
p:property
st:attr-state
css:css
v:value
E:error
uc:unicode-category
h:header
cm:comment
●●tag_map
I:code
m:code
E:code
hd:code
c:code
e:code
a:code
et:code
ps:code
st:i
h:code
P:code
p:code
css:code
uc:span
V:var
v:code
cm:span
i:i
cite:cite
●●original_id_map
●●mdn_urls
datatransfer:API/DataTransfer
datatransferitem:API/DataTransferItem
datatransferitemlist:API/DataTransferItemList
dragevent:API/DragEvent
drageventinit:API/DragEventInit
functionstringcallback:API/FunctionStringCallback
event-dnd-drag:Events/drag
event-dnd-dragend:Events/dragend
event-dnd-dragenter:Events/dragenter
event-dnd-dragleave:Events/dragleave
event-dnd-dragover:Events/dragover
event-dnd-dragstart:Events/dragstart
event-dnd-drop:Events/drop
attr-draggable:HTML/Global_attributes/draggable
●●link_map
●IDL
I.DataTransfer:#datatransfer
I.DataTransferItem:#datatransferitem
I.DataTransferItemList:#datatransferitemlist
I.DragEvent:#dragevent
I.DragEventInit:#drageventinit
I.Element:~DOM4#interface-element
I.Document:~HTMLdom#document
I.File:~FILEAPI#file
I.FileList:~FILEAPI#filelist-section
I.FunctionStringCallback:#functionstringcallback
I.MouseEvent:~POINTEREVENTS#dom-mouseevent
I.MouseEventInit:~POINTEREVENTS#dom-mouseeventinit
I.Text:~DOM4#interface-text
E.InvalidStateError:~WEBIDL#invalidstateerror
E.NotSupportedError:~WEBIDL#notsupportederror
m.new DataTransfer:#dom-datatransfer
m.add:#dom-datatransferitemlist-add
m.clear:#dom-datatransferitemlist-clear
m.clearData:#dom-datatransfer-cleardata
m.dataTransfer:#dom-dragevent-datatransfer
m.draggable:#dom-draggable
m.dropEffect:#dom-datatransfer-dropeffect
m.effectAllowed:#dom-datatransfer-effectallowed
m.files:#dom-datatransfer-files
m.getAsFile:#dom-datatransferitem-getasfile
m.getAsString:#dom-datatransferitem-getasstring
m.getData:#dom-datatransfer-getdata
m.getter:#dom-datatransferitemlist-item
m.items:#dom-datatransfer-items
m.kind:#dom-datatransferitem-kind
m.length:#dom-datatransferitemlist-length
m.remove:#dom-datatransferitemlist-remove
m.setData:#dom-datatransfer-setdata
m.setDragImage:#dom-datatransfer-setdragimage
m.type:#dom-datatransferitem-type
m.types:#dom-datatransfer-types
m.type:~FILEAPI#dfn-type
m.relatedTarget:~POINTEREVENTS#dom-mouseevent-relatedtarget
m.view:~UIEVENTS#dom-uievent-view
m.dataset:~HTMLdom#dom-dataset
m.~type0:~DOM4#dom-event-type
m.bubbles:~DOM4#dom-event-bubbles
m.isTrusted:~DOM4#dom-event-istrusted
m.cancelable:~DOM4#dom-event-cancelable
tE.all:#dom-datatransfer-effectallowed-all
tE.copy:#dom-datatransfer-effectallowed-copy
tE.copyLink:#dom-datatransfer-effectallowed-copylink
tE.copyMove:#dom-datatransfer-effectallowed-copymove
tE.link:#dom-datatransfer-effectallowed-link
tE.linkMove:#dom-datatransfer-effectallowed-linkmove
tE.move:#dom-datatransfer-effectallowed-move
tE.none:#dom-datatransfer-effectallowed-none
tE.uninitialized:#dom-datatransfer-effectallowed-uninitialized
tD.copy:#dom-datatransfer-dropeffect-copy
tD.link:#dom-datatransfer-dropeffect-link
tD.move:#dom-datatransfer-dropeffect-move
tD.none:#dom-datatransfer-dropeffect-none
op.copy:#concept-current-drag-operation-copy
op.link:#concept-current-drag-operation-link
op.move:#concept-current-drag-operation-move
op.none:#concept-current-drag-operation-none
●code 他
e.a:~HEtextlevel#the-a-element
e.div:~HEgrouping#the-div-element
e.img:~HEimages#the-img-element
e.input:~HEinput#the-input-element
e.object:~HEembed#the-object-element
e.textarea:~HEforms#the-textarea-element
a.contenteditable:~HTMLinteraction#attr-contenteditable
a.draggable:#attr-draggable
a.href:~HTMLlinks#attr-hyperlink-href
a.src:~HEimages#attr-img-src
a.title:~HTMLdom#attr-title
a.type:~HEinput#attr-input-type
et.drag:#event-dnd-drag
et.dragend:#event-dnd-dragend
et.dragenter:#event-dnd-dragenter
et.dragleave:#event-dnd-dragleave
et.dragover:#event-dnd-dragover
et.dragstart:#event-dnd-dragstart
et.drop:#event-dnd-drop
et.blur:~HTMLindex#event-blur
et.mousedown:~POINTEREVENTS#dfn-mousedown
et.mousemove:~POINTEREVENTS#dfn-mousemove
et.pointercancel:~POINTEREVENTS#dfn-pointercancel
v.true:#attr-draggable-true
v.false:#attr-draggable-false
st.~T:#attr-draggable-true-state
st.~F:#attr-draggable-false-state
st.自動:#attr-draggable-auto-state
st.Email:~HEinput#email-state-(type=email)
st.Number:~HEinput#number-state-(type=number)
st.Password:~HEinput#password-state-(type=password)
st.Search:~HEinput#text-(type=text)-state-and-search-state-(type=search)
st.Tel:~HEinput#telephone-state-(type=tel)
st.Text:~HEinput#text-(type=text)-state-and-search-state-(type=search)
st.Url:~HEinput#url-state-(type=url)
l.application/microdata+json:~HTMLiana#application/microdata+json
l.application/octet-stream:~RFCx/rfc2046#section-4.5.1
l.text/plain:~RFCx/rfc2046#section-4.1.3
l.text/uri-list:~HTMLindex#text/uri-list
●用語
~text編集-域:#_text-edit
形式~文字列を正規化する:#_normalize-a-format
~drag操作oの最終回~手続き:#_the-last-DND-steps
~drag操作oの継続~手続き:#_continuation-DND-steps
取消され:#_DND-canceled
現在の~target要素:#current-target-element
~DnD操作oが起動され:#initiate-the-drag-and-drop-operation
起動され:#initiate-the-drag-and-drop-operation
~drag~data~store:#drag-data-store
1.~drag~data~store:#_drag-data-store
型~list:#concept-datatransfer-types
~drag~data~storeを作成する:#create-a-drag-data-store
ddS.許容される効果state:#drag-data-store-allowed-effects-state
ddS.既定の~feedback:#drag-data-store-default-feedback
ddS.~bitmap:#drag-data-store-bitmap
ddS.~hot-spot座標:#drag-data-store-hot-spot-coordinate
ddS.~item~list:#drag-data-store-item-list
ddS.~mode:#drag-data-store-mode
~store~mode:#_store-mode
1.~store~mode:#_item-list-mode
~item~mode:#_item-mode
外部のもの:#_external
i.保護d~mode:#concept-dnd-p
i.読専~mode:#concept-dnd-ro
i.可書~mode:#concept-dnd-rw
i.不能化~mode:#_dnd-disabled
~data~item:#_drag-data-item
dI.種類:#the-drag-data-item-kind
~drag~data~item種類:#the-drag-data-item-kind
dI.型~文字列:#the-drag-data-item-type-string
~drag~data~item型~文字列:#the-drag-data-item-type-string
dI.実際の~data:#_the-drag-data-item-actual-data
~DnD~eventを発火する:#fire-a-dnd-event
現在の~drag操作o:#current-drag-operation
V.~source~node:#source-node
%被~drag~node~list:#list-of-dragged-nodes
V.~store:#_store
代替:#concept-platform-dropeffect-override
直の利用者~選択:#immediate-user-selection
●用語（HTML
~HTML要素:~HTMLINFRA#html-elements
~live:~HTMLINFRA#live
列挙d属性:~HTMLcms#enumerated-attribute
欠落~値~用の既定の状態:~HTMLcms#missing-value-default
妥当でない値~用の既定の状態:~HTMLcms#invalid-value-default
文書:~HTMLdom#the-document-object
~body要素:~HTMLdom#the-body-element-2
~navigable:~HTMLds#navigable
~taskを~queueする:~WAPI#queue-a-task
利用者ヤリトリ~task~source:~WAPI#user-interaction-task-source
関連な大域~obj:~WAPI#concept-relevant-global
表現-:~HTMLdom#represents
編集中の~host:~HTMLinteraction#editing-host
●用語（外部
~ASCII小文字~化:~INFRA#ascii-lowercase
~ASCII小文字~化する:~INFRA#ascii-lowercase
連結する:~INFRA#string-concatenate
~size:~INFRA#list-size
~index群:~INFRA#list-get-the-indices
~URLを符号化法の下で相対的に構文解析する:~HTMLurl#encoding-parsing-a-url
~HTMLurl#encoding-parsing-and-serializing-a-url → ~HTMLurl#encoding-parsing-a-url, ~URL1#concept-url-serializer
絶対~URL:~URL1#absolute-url-string
相対~URL:~URL1#relative-url-string
~URLを直列化する:~URL1#concept-url-serializer
要素:~DOM4#concept-element
親~要素:~DOM4#parent-element
~node文書:~DOM4#concept-node-document
~tree順序:~DOM4#concept-tree-order
範囲~obj:~DOM4#concept-range
~eventを作成する:~DOM4#concept-event-create
~eventを配送する:~DOM4#concept-event-dispatch
ev.取消されたか:~DOM4#canceled-flag
生来な~size:~CSSIMAGE#natural-size
表示域:~CSS2J#viewport
~CSS~pixel:~CSSVAL#px
編集-可能:~EXEC-COMMAND#editable
作動範囲:~EXEC-COMMAND#active-range
選択を削除-:~EXEC-COMMAND#delete-the-selection
~supportする~prop~index:~WEBIDL#dfn-supported-property-indices
有index~propの値を決定する手続き:~WEBIDL#dfn-determine-the-value-of-an-indexed-property
凍結d配列を作成する:~WEBIDLjs#dfn-create-frozen-array
凍結d配列:~WEBIDL#dfn-frozen-array-type
~callback関数を呼出す:~WEBIDLjs#invoke-a-callback-function
~MIME型:~MIMESNIFF#mime-type
~pointer~eventを発火する:~POINTEREVENTS#dfn-fire-a-pointer-event
●●words_table1
type0:type
●●words_table
●DnD
DnD:drag＆drop
~DnD:DND
~DnD:drag-and-drop
drag:
~drag可能:draggable
~drag対象:dragged
drop:
操作o:operation:操作
可書:read/write::~
保護d:protected::保護
store::::ストア
格納
種類:kind:~
hot-spot::::
bitmap::::ビットマップ
要素$:~DOM要素
●UI／CSS
選択-:select::~
選択:selection::~
編集中の:editing::~
編集-:edit::~
編集-域:edit 域
pointing::::ポインタ指示
~scroll可能:scrollable
copy::::コピー
paste::::ペースト
解放-:release::~
入力方式:input modality:~
押下げら:depressさ:~
押下げて:depressして:~
通過-:cross:~
直の:immediate:~
生来:natural::~
押しながら:hold
medium
~~選んだ:pick した
伝えた:told
叩いた:hit した
巡回-:cycle through
`Alt^kY:"alt"
●IDL／構造／型／操作
list:sequence
型~list:types array
下層:that underlies
●処理／event
composed:
終させ:endさせ:終わらせ
終する:endする:終わる
終した:endした:終わった
取消~可否:cancelable
成功しなかった:unsuccessful
成功した:successful
-:ongoing
-:effectively "skipping missed frames"
反復:iteration
~RET:left unchanged
時点:moment
●保安
XSS:cross-site scripting:XSS
特権:privilege::~
同意:consent:~
傍受-:intercept::~
被害:victim::~
能動的:active::~::アクティブ
安全でない:unsafe
安全なことが既知な特能たちが成す~list:safelist of known-safe features
期待されない:unexpected
●仕様
効果state:effect state:効果
であろう:likely
可用にされず:unavailable
協調-:coordinate:~
規定-:dictate:~
最終-:final:~
概略的:brief:~
-:ignore
特別に扱われる:special-cased
かもしれない／し得る:potentially
~~実際に:indeed
いくつあろうが:irrespective
~care:take care
~~由来する:comes from
定める:state
したい:wish
極力努める:make a best-effort attempt
転化-:turn into
-:regardless
一貫させる:for consistency
●未分類
body:
microdata:
有効:valid::~
始点:starting point:~
終点:end point:~
地点:point:~
連結-:concatenate::~
現在:currently:~
管理用-:manager:~
-:stop
-:separate
missed frame
-:label
:time
-:non-web
-:mouse-and-window
見える~~範囲:purview
長い:long
文脈依存:Varies
存在:
未知:-
正規化:-
戻-:back
渡-:pass
置く:put
cell
going
~text編集~program:~word-processor
-:finished
-:possibilities
-:convert-to-URL
-:miss
-:anyway
-:caused
-:stood
-:subsequent
-:chain
-:matched
-:per
-:cell
3 種／:three
%~URL〜:url〜
●指示詞
現-:current:~
前-:previous:~
全体:entirely
また別の:third
両方とも:both altogether
以前の:previous
側:side
次回:next
残りの部分:remainder
残りの部分:rest
末尾:end
最初に:originally
同じ行の:row
一列目:first column
二列目:second column
~~下方:lower
中間的な:intermediate／middle
指す:point
後続-:follow
最終的に:finally
次第:as soon as
まったく:particularly
●●trans_metadata
<p>
~THIS_PAGEは、~WHATWGによる HTML 仕様の
<a href="~SPEC_URL">§ Drag and drop</a>
を日本語に翻訳したものです。
~PUB
</p>
</script>
</head>
<body>
<header>
<hgroup>
<h1>HTML — drag＆drop</h1>
</hgroup>
</header>
<main id="MAIN" hidden>
<section id="_conventions">
<h3>【この訳に特有な表記規約】</h3>
◎表記記号
</section>
<section id="dnd">
<h3 title="Drag and drop">6.11. ~DnD</h3>
<p>
この節では、
~eventに基づく~DnD（ `drag-and-drop^en, 略して `DND^en ）の仕組みを定義する。
◎
This section defines an event-based drag-and-drop mechanism.
</p>
<p>
この仕様は、
実際の<em>~DnD操作o</em>
【 “引きずって~~落とす” 】
が正確に何であるかは，定義しない：
◎
This specification does not define exactly what a drag-and-drop operation actually is.
</p>
<ul>
<li>
~pointing装置を備える視覚-媒体では、
~drag操作oは［
`mousedown$et ~eventに後続する一連の `mousemove$et ~event
］に対する既定~動作で，~drop操作oは~mouseを解放して誘発すること
— にもなり得る。
◎
On a visual medium with a pointing device, a drag operation could be the default action of a mousedown event that is followed by a series of mousemove events, and the drop could be triggered by the mouse being released.
</li>
<li>
~pointing装置~以外の入力方式を利用する下で~DnD操作oを遂行するためには、
利用者はおそらく，［
何を~dragして，どこへ~dropしたいか定めるため、
自身の意図nを明示的に指示する
］必要がある。
◎
When using an input modality other than a pointing device, users would probably have to explicitly indicate their intention to perform a drag-and-drop operation, stating what they wish to drag and where they wish to drop it, respectively.
</li>
</ul>
<p>
どう実装されていようが、
~DnD操作oでは：
◎
However it is implemented, drag-and-drop operations＼
</p>
<ol>
<li>
まず、
始点が~~存在するモノトスル
（例：
~mouseが~clickされた所 ／
~dragに先立って選択されていた［
要素, または［
選択~部分の始端
］］）。
◎
must have a starting point (e.g. where the mouse was clicked, or the start of the selection or element that was selected for the drag),＼
</li>
<li>
次に， 0 回以上の中間的な段が生じるモノトスル
（例：［
~drag中に~mouseが~~重なった要素 ／
利用者がアリな~drop地点を巡回するに伴い，~~選んだ要素
］に対し）。
◎
may have any number of intermediate steps (elements that the mouse moves over during a drag, or elements that the user picks as possible drop points as they cycle through possibilities), and＼
</li>
<li>
最後に、
取消されるか, または
終点が~~存在するモノトスル
（例：
~mouse~buttonが解放された所の要素 ／
最終的に選択された要素）。
終点は、
~dropが生じる前のアリな~drop地点として，最後の要素を選択するモノトスル
（よって，操作oが取消されなかった場合、
前項の中間的な段が 1 回は生じるモノトスル）。
◎
must either have an end point (the element above which the mouse button was released, or the element that was finally selected), or be canceled. The end point must be the last element selected as a possible drop point before the drop occurs (so if the operation is not canceled, there must be at least one element in the middle step).
</li>
</ol>
<section id="event-drag">
<h4 title="Introduction">6.11.1. 序論</h4>
◎非規範的
<p>
要素を~drag可能にするためには、
要素に `draggable$a 属性を付与した上で，
`dragstart$et ~event用に~event~listenerを設定する。
~dragされている~dataは、
この~eventに~storeされる。
◎
To make an element draggable, give the element a draggable attribute, and set an event listener for dragstart that stores the data being dragged.
</p>
<div class="p">
<p>
~event~handlerは、
概して，次を行う必要がある：
</p>
<ol>
<li>
~drag対象が~text選択でないことを検査して，
</li>
<li>
~dataを `DataTransfer$I ~objの中に~storeして，
</li>
<li>
許容される効果
（複製-, 移動-, ~link, これらの組合n）
を設定する。
</li>
</ol>
◎
The event handler typically needs to check that it's not a text selection that is being dragged, and then needs to store data into the DataTransfer object and set the allowed effects (copy, move, link, or some combination).
</div>
<div class="example">
<p>
例えば：
◎
For example:
</p>
<pre class="lang-html">
<p>好きな果物は？</p>
<ol ondragstart="dragStartHandler(event)">
<li draggable="true" data-value="果物.林檎">りんご</li>
<li draggable="true" data-value="果物.蜜柑">みかん</li>
<li draggable="true" data-value="果物.桃">もも</li>
</ol>
<script>
var %internalDNDType
= 'text/x-example'; // `~siteに特有な何かに設定する^cm
function dragStartHandler(%event) {
if (%event.target instanceof HTMLLIElement) {
// `要素の data-value 属性を，~dragされる値に利用する：^cm
%event.dataTransfer.setData(
%internalDNDType,
%event.target.`dataset$m.value
);
%event.dataTransfer.effectAllowed
= 'move'; // `移動-のみ許容する^cm
} else {
%event.preventDefault(); // `選択の~dragは許容しない^cm
}
}
</script>
</pre>
<!--
What fruits do you like?
data-value="fruit-apple">Apples</li>
data-value="fruit-orange">Oranges</li>
data-value="fruit-pear">Pears</li>
// set this to something specific to your site
// use the element's data-value="" attribute as the value to be moving:
// only allow moves
// don't allow selection to be dragged
-->
</div>
<hr>
<p>
~drop~targetが~dropを受容するためには、
次に挙げる~eventを~listenする必要がある。
◎
To accept a drop, the drop target has to listen to the following events:
</p>
<ol>
<li>
`dragenter$et ~event~handlerは、
その~eventを取消すことにより，~drop~targetは~dropを受容する用意があり得るかどうかを報告する。
◎
The dragenter event handler reports whether or not the drop target is potentially willing to accept the drop, by canceling the event.
</li>
<li>
`dragover$et ~event~handlerは、
~eventに結付けられた `DataTransfer$I の `dropEffect$m 属性を設定することにより，利用者に示されることになる~feedbackを指定する。
この~eventも取消される必要がある。
◎
The dragover event handler specifies what feedback will be shown to the user, by setting the dropEffect attribute of the DataTransfer associated with the event. This event also needs to be canceled.
</li>
<li>
`drop$et ~event~handlerは、
その~dropを受容するか却下するかの，最終-機会cになる。
~dropが受容された場合、
~event~handlerは，~target上で~drop操作oを遂行するモノトスル。
~sourceが `dropEffect$m 属性の値を利用できるようにするためには、
この~eventは取消される必要がある。
他の場合、
~drop操作oは却下される。
【代わりに，~UAによる既定の動作が行われるであろう — ~dropされた~fileを開く，~textを~text~controlに挿入するなど。】
◎
The drop event handler has a final chance to accept or reject the drop. If the drop is accepted, the event handler must perform the drop operation on the target. This event needs to be canceled, so that the dropEffect attribute's value can be used by the source. Otherwise, the drop operation is rejected.
</li>
</ol>
<div class="example">
<p>
例えば:
◎
For example:
</p>
<pre class="lang-html">
<p>好みの果物を下に~dropしてください。</p>
<ol ondragenter="dragEnterHandler(%event)" ondragover="dragOverHandler(%event)"
ondrop="dropHandler(%event)">
</ol>
<script>
var %internalDNDType = 'text/x-example'; // `~siteに特有な何かに設定する^cm
function dragEnterHandler(%event) {
var %items = %event.dataTransfer.items;
for (var %i = 0; %i < %items.length; ++i) {
var %item = %items[%i];
if (%item.kind == 'string' && %item.type == %internalDNDType) {
%event.preventDefault();
return;
}
}
}
function dragOverHandler(%event) {
%event.dataTransfer.dropEffect = 'move';
%event.preventDefault();
}
function dropHandler(%event) {
var %li = document.createElement('li');
var data = %event.dataTransfer.getData(%internalDNDType);
if (%data == '果物.林檎') {
%li.textContent = 'りんご';
} else if (%data == '果物.蜜柑') {
%li.textContent = 'みかん';
} else if (%data == '果物.桃') {
%li.textContent = 'もも';
} else {
%li.textContent = '未知な果物';
}
%event.target.appendChild(%li);
}
</script>
</pre>
<!--
<p>Drop your favorite fruits below:</p>
var internalDNDType = 'text/x-example'; // set this to something specific to
'fruit-apple'
'Apples'
'fruit-orange'
'Oranges'
'fruit-pear'
'Pears'
'Unknown Fruit'
}
-->
</div>
<hr>
<p>
`dragend$et ~eventを利用すれば、
元の要素（~dragされていたもの）を表示から除去できる。
◎
To remove the original element (the one that was dragged) from the display, the dragend event can be used.
</p>
<div class="example">
<p>
これまでの例で言えば、
その~eventを取扱うために，元の~markupを更新することを意味する：
◎
For our example here, that means updating the original markup to handle that event:
</p>
<pre class="lang-html">
<p>好きな果物は？</p>
<ol ondragstart="dragStartHandler(%event)" ondragend="dragEndHandler(%event)">
// `...前と同じ...^cm
</ol>
<script>
function dragStartHandler(%event) {
// `...前と同じ...^cm
}
function dragEndHandler(%event) {
if (%event.dataTransfer.dropEffect == 'move') {
// `~dragされている要素を除去する^cm
%event.target.parentNode.removeChild(%event.target);
}
}
</script>
</pre>
<!--
<p>What fruits do you like?</p>
<ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">
...as before...
</ol>
<script>
function dragStartHandler(event) {
// ...as before...
}
function dragEndHandler(event) {
if (event.dataTransfer.dropEffect == 'move') {
// remove the dragged element
event.target.parentNode.removeChild(event.target);
}
}
</script>
-->
</div>
</section>
<section id="the-drag-data-store">
<h4 title="The drag data store">6.11.2. ~drag~data~store</h4>
<p>
~DnD操作oの下層~dataは，
`~drag~data~store@
と呼ばれ、
次に挙げる各種~情報からなる
【括弧内には対応する~IDL属性も挙げる】
：
◎
The data that underlies a drag-and-drop operation, known as the drag data store, consists of the following information:
</p>
<dl class="def-list">
<dt>
`~item~list@ddS
（ `items$m ）
◎
A drag data store item list,＼
</dt>
<dd class="trans-note">【
原文による呼称は “`drag data store item list^en” であるが、
この訳では， “`drag data store^en” の部分は省略する