차례
    1. 7.7 드래그 앤 드롭
      1. 7.7.1 소개
      2. 7.7.2 드래그 데이터 저장
      3. 7.7.3 DataTransfer 인터페이스
        1. 7.7.3.1 DataTransferItems 인터페이스
        2. 7.7.3.2 DataTransferItem 인터페이스
      4. 7.7.4 DragEvent 인터페이스
      5. 7.7.5 드래그-드롭 처리 모델
      6. 7.7.6 이벤트 요약
      7. 7.7.7 draggable 속성
      8. 7.7.8 dropzone 속성
      9. 7.7.9 드래그-드롭 모델의 보안 위험성
    2. 7.8 편집 API

7.7 드래그 앤 드롭

이 섹션은 이벤트에 기반한 드랙 앤 드롭 메커니즘을 정의합니다.

This section defines an event-based drag-and-drop mechanism.

이 명세에서 드랙 앤 드롭 동작이 실제로 정확하게 무엇인지를 정의하는 것은 아닙니다.

This specification does not define exactly what a drag-and-drop operation actually is.

포인팅 장치를 시각 매체에서 사용할 때, 드래그 동작은 mousedown 이벤트와, 그 뒤에 이어진 연속된 mousedown 이벤트의 기본 동작이 될 수 있을 것이며, 드랍은 마우스를 놓는 것으로 활성화될 수 있을 것입니다.

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.

포인팅 장치가 없는 매체에서는, 사용자가 끌어놓는 동작을 할 의도가 있음을 명시적으로 밝혀야 할 것입니다. 드래그하려고 한다, 드랍하려고 한다, 라는 것을 선언함으로서 그렇게 할 수 있을 것입니다.

On media without a pointing device, the user would probably have to explicitly indicate his intention to perform a drag-and-drop operation, stating what he wishes to drag and what he wishes to drop, respectively.

However it is implemented, drag-and-drop operations 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), 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 he cycles through possibilities), and 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).

7.7.1 소개

This section is non-normative.

요소를 드래그할 수 있게 만드는 것은 간단합니다: 요소에 draggable 속성을 주고, dragstart 이벤트 리스너를 설정해서, 드래그하고 있는 데이터를 거기에 저장합니다.

To make an element draggable is simple: give the element a draggable attribute, and set an event listener for dragstart that stores the data being dragged.

일반적으로 이벤트 핸들러는 현재 드래그되고 있는 것이 텍스트 선택이 아님을 체크할 필요가 있고, 데이터를 DataTransfer 객체에 저장하며, 허용되는 효과들(복사, 이동, 링크, 또는 몇가지 조합)을 설정합니다.

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).

예를 들어:

For example:

<p>What fruits do you like?</p>
<ol ondragstart="dragStartHandler(event)">
 <li draggable="true" data-value="fruit-apple">Apples</li>
 <li draggable="true" data-value="fruit-orange">Oranges</li>
 <li draggable="true" data-value="fruit-pear">Pears</li>
</ol>
<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
  function dragStartHandler(event) {
    if (event.target instanceof HTMLLIElement) {
      // use the element's data-value="" attribute as the value to be moving:
      event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
      event.effectAllowed = 'move'; // only allow moves
    } else {
      event.preventDefault(); // don't allow selection to be dragged
    }
  }
</script>

드랍을 받아들이려면, 드랍의 대상은 최소한 세가지 이벤트 리스너를 가져야 합니다. 첫째, dragenter 이벤트입니다. 이것은 드랍의 대상이 드랍을 받아들일것인지 아닌지를 판단하게 됩니다. 만약 드랍을 받아들일 것이라면, 이 이벤트는 취소되어야 합니다. 둘째, dragover 이벤트입니다. 이것은 사용자에게 어떤 피드백을 보여줄지를 판단하는 것입니다. 이 이벤트가 취소된다면, 피드백(일반적으로, 커서)이 dropEffect 속성의 값에 기반하여, 이벤트 핸들러에 의해 설정된 것으로 업데이트되고, 그렇지 않다면 기본 행동(일반적으로, 아무 일도 하지 않음)이 대신 사용됩니다. 마지막으로, drop 이벤트입니다. 이것은 실제 드랍이 이루어지게 합니다. 이 이벤트 역시 취소될 필요가 있는데, 이것이 취소되어야 dropEffect 속성의 값이 소스에 의해 사용되어집니다.(취소되지 않으면, 리셋됩니다)

To accept a drop, the drop target has to listen to at least three events. First, the dragenter event, which is used to determine whether or not the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled. Second, the dragover event, which is used to determine what feedback is to be shown to the user. If the event is canceled, then the feedback (typically the cursor) is updated based on the dropEffect attribute's value, as set by the event handler; otherwise, the default behavior (typically to do nothing) is used instead. Finally, the drop event, which allows the actual drop to be performed. This event also needs to be canceled, so that the dropEffect attribute's value can be used by the source (otherwise it's reset).

예를 들어:

For example:

<p>Drop your favorite fruits below:</p>
<ol class="dropzone"
    ondragenter="dragEnterHandler(event)"
    ondragover="dragOverHandler(event)"
    ondrop="dropHandler(event)">
</ol>
<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
  function dragEnterHandler(event) {
    // cancel the event if the drag contains data of our type
    if (event.dataTransfer.types.contains(internalDNDType))
      event.preventDefault();
  }
  function dragOverHandler(event) {
    event.dataTransfer.dropEffect = 'move';
    event.preventDefault(); // override default drag feedback
  }
  function dropHandler(event) {
    // drop the data
    var li = document.createElement('li');
    var data = event.dataTransfer.getData(internalDNDType);
    if (data == 'fruit-apple') {
      li.textContent = 'Apples';
    } else if (data == 'fruit-orange') {
      li.textContent = 'Oranges';
    } else if (data == 'fruit-pear') {
      li.textContent = 'Pears';
    } else {
      li.textContent = 'Unknown Fruit';
    }
    event.target.appendChild(li);
  }
</script>

원래의 요소(드래그된것)를 화면에서 제거하려면, dragend 이벤트를 사용할 수 있습니다.

To remove the original element (the one that was dragged) from the display, the dragend event can be used.

이것은 원래의 마크업을 업데이트해서 그 이벤트를 다룰 수 있도록 하는 것을 의미합니다:

For our example here, that means updating the original markup to handle that event:

<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) {
    // remove the dragged element
    event.target.parentNode.removeChild(event.target);
  }
</script>

7.7.2 드래그 데이터 저장

드래그 앤 드롭 동작에서 처리되는 데이터를 드래그 데이터 스토어라고 하며, 다음의 정보를 가지고 있습니다:

The data that underlies a drag-and-drop operation, known as the drag data store, consists of the following information:

드래그 데이터 스토어생성될 때, 드래그 데이터 스토어 아이템 목록은 비어 있어야 하고, 드래그 데이터 스토어 기본 피드백이 없어야 하고, 드래그 데이터 스토어 비트맵 / 드래그 데이터 스토어 핫스팟 좌표가 없어야 하고, 드래그 데이터 스토어 모드보호 모드여야 하며, 데이터 스토어 허용된 효과 선언은 문자열: "uninitialized초기화되지 않음"이어야 합니다.

When a drag data store is created, it must be initialized such that its drag data store item list is empty, it has no drag data store default feedback, its drag data store elements list is empty, it has no drag data store bitmap / drag data store hot spot coordinate, its drag data store mode is protected mode, and its drag data store allowed effects state is the string "uninitialized".

7.7.3 DataTransfer 인터페이스

DataTransfer 객체를 통해 드래그 앤 드롭 동작에 연관된 드래그 데이터 스토어를 노출합니다.

DataTransfer objects are used to expose the drag data store that underlies a drag-and-drop operation.

interface DataTransfer {
           attribute DOMString dropEffect;
           attribute DOMString effectAllowed;

  readonly attribute DOMStringList types;
  void clearData(in optional DOMString format);
  void setData(in DOMString format, in DOMString data);
  DOMString getData(in DOMString format);
  readonly attribute FileList files;

  void setDragImage(in Element image, in long x, in long y);
  void addElement(in Element element);
};
dataTransfer . dropEffect [ = value ]

현재 선택된 동작의 종류를 반환합니다. 그러한 종류가 effectAllowed속성에서 허용된 것이 아닐 경우, 동작은 실패할 것입니다.

Returns the kind of operation that is currently selected. If the kind of operation isn't one of those that is allowed by the effectAllowed attribute, then the operation will fail.

값을 설정하여 선택된 동작을 변경할 수 있습니다.

Can be set, to change the selected operation.

가능한 값은 none, copy, link, move입니다.

The possible values are "none", "copy", "link", and "move".

dataTransfer . effectAllowed [ = value ]

허용된 동작들의 종류를 반환합니다.

Returns the kinds of operations that are to be allowed.

값을 설정하여, 허용되는 동작을 변경할 수 있습니다.

Can be set, to change the allowed operations.

가능한 값은 none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized 입니다.

The possible values are "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", and "uninitialized",

dataTransfer . types

dragstart 이벤트에서 설정되었던 포맷들을 나열하는 DOMStringList를 반환합니다. 이에 더해, 만약 파일이 드래그되고 있다면, 타입들 중 하나는 문자열 "Files"가 될 것입니다.

Returns a DOMStringList listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string "Files".

dataTransfer . clearData( [ format ] )

명시된 포맷의 데이터를 제거합니다. 매개변수가 없을 경우 모든 데이터를 제거합니다.

Removes the data of the specified formats. Removes all data if the argument is omitted.

dataTransfer . setData(format, data)

명시된 데이터를 추가합니다.

Adds the specified data.

data = dataTransfer . getData(format)

명시된 데이터를 반환합니다. 그러한 데이터가 없다면 빈 문자열을 반환합니다.

Returns the specified data. If there is no such data, returns the empty string.

dataTransfer . files

드래그되고 있는 파일이 있다면, 그 FileList를 반환합니다.

Returns a FileList of the files being dragged, if any.

dataTransfer . setDragImage(element, x, y)

주어진 요소를 사용하여 드래그 피드백을 업데이트합니다. 기존에 명시되었던 모든 피드백을 덮어씁니다.

Uses the given element to update the drag feedback, replacing any previously specified feedback.

dataTransfer . addElement(element)

드래그 피드백을 렌더링하기 위해 사용된 요소들의 목록에, 주어진 요소를 추가합니다.

Adds the given element to the list of elements used to render the drag feedback.

DataTransfer 객체는 드래그 앤 드롭 이벤트에서 사용되며, 그러한 이벤트가 발생한 경우에만 유효합니다.

DataTransfer objects are used during the drag-and-drop events, and are only valid while those events are being dispatched.

A DataTransfer object is associated with a drag data store while it is valid.

The dropEffect attribute controls the drag-and-drop feedback that the user is given during a drag-and-drop operation. When the DataTransfer object is created, the dropEffect attribute is set to a string value. On getting, it must return its current value. On setting, if the new value is one of "none", "copy", "link", or "move", then the attribute's current value must be set to the new value. Other values must be ignored.

The effectAllowed attribute is used in the drag-and-drop processing model to initialize the dropEffect attribute during the dragenter and dragover events. When the DataTransfer object is created, the effectAllowed attribute is set to a string value. On getting, it must return its current value. On setting, if the new value is one of "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", or "uninitialized", then the attribute's current value must be set to the new value. Other values must be ignored.

The types attribute must return a live DOMStringList giving the strings that the following steps would produce. The same object must be returned each time.

  1. Start with an empty list L.

  2. If the DataTransfer object is no longer associated with a drag data store, the DOMStringList is empty. Abort these steps; return the empty list L.

  3. For each item in the drag data store item list whose kind is Plain Unicode string, add an entry to the list L consisting of the item's type string.

  4. If there are any items in the drag data store item list whose kind is File, then add an entry to the list L consisting of the string "Files". (This value can be distinguished from the other values because it is not lowercase.)

  5. The strings produced by these steps are those in the list L.

The clearData() method must run the following steps:

  1. If the DataTransfer object is no longer associated with a drag data store, abort these steps. Nothing happens.

  2. If the drag data store's mode is not the read/write mode, abort these steps. Nothing happens.

  3. If the method was called with no arguments, remove each item in the drag data store item list whose kind is Plain Unicode string, and abort these steps.

  4. Let format be the first argument, converted to ASCII lowercase.

  5. If format equals "text", change it to "text/plain".

    If format equals "url", change it to "text/uri-list".

  6. Remove the item in the drag data store item list whose kind is Plain Unicode string and whose type string is equal to format, if there is one.

The clearData() method does not affect whether any files were included in the drag, so the types attribute's list might still not be empty after calling clearData() (it would still contain the "Files" string if any files were included in the drag).

The setData(format, data) method must run the following steps:

  1. If the DataTransfer object is no longer associated with a drag data store, abort these steps. Nothing happens.

  2. If the drag data store's mode is not the read/write mode, abort these steps. Nothing happens.

  3. Let format be the first argument, converted to ASCII lowercase.

  4. If format equals "text", change it to "text/plain".

    If format equals "url", change it to "text/uri-list".

  5. Remove the item in the drag data store item list whose kind is Plain Unicode string and whose type string is equal to format, if there is one.

  6. Add an item to the drag data store item list whose kind is Plain Unicode string, whose type string is equal to format, and whose data is the string given by the method's second argument.

The getData(format, data) method must run the following steps:

  1. If the DataTransfer object is no longer associated with a drag data store, abort these steps. Nothing happens.

  2. If the drag data store's mode is in the protected mode, abort these steps. Nothing happens.

  3. Let format be the first argument, converted to ASCII lowercase.

  4. Let convert-to-URL be false.

  5. If format equals "text", change it to "text/plain".

  6. If format equals "url", change it to "text/uri-list" and set convert-to-URL to true.

  7. If there is no item in the drag data store item list whose kind is Plain Unicode string and whose type string is equal to format, return the empty string and abort these steps.

  8. Let result be the data of the item in the drag data store item list whose kind is Plain Unicode string and whose type string is equal to format.

  9. If convert-to-URL is true, then parse result as appropriate for text/uri-list data, and then set result to the first URL from the list, if any, or the empty string otherwise. [RFC2483]

  10. Return result.

The files attribute must return a live FileList sequence consisting of File objects representing the files found by the following steps. The same object must be returned each time. Furthermore, for a given FileList object and a given underlying file, the same File object must be used each time.

  1. Start with an empty list L.

  2. If the DataTransfer object is no longer associated with a drag data store, the FileList is empty. Abort these steps; return the empty list L.

  3. If the drag data store's mode is in the protected mode, abort these steps; return the empty list L.

  4. For each item in the drag data store item list whose kind is File , add the item's data (the file, in particular its name and contents, as well as its type) to the list L.

  5. The files found by these steps are those in the list L.

This version of the API does not expose the types of the files during the drag.

The items attribute must return a DataTransferItems object associated with the DataTransfer object. The same object must be returned each time.

The setDragImage(element, x, y) method must run the following steps:

  1. If the DataTransfer object is no longer associated with a drag data store, abort these steps. Nothing happens.

  2. If the drag data store's mode is not in the read/write mode, abort these steps. Nothing happens.

  3. If the element argument is an img element, then set the drag data store bitmap to the element's image (at its intrinsic size); otherwise, set the drag data store bitmap to an image generated from the given element (the exact mechanism for doing so is not currently specified).

  4. Set the drag data store hot spot coordinate to the given x, y coordinate.

The addElement(element) method is an alternative way of specifying how the user agent is to render the drag feedback. The method must run the following steps:

  1. If the DataTransfer object is no longer associated with a drag data store, abort these steps. Nothing happens.

  2. If the drag data store's mode is not in the read/write mode, abort these steps. Nothing happens.

  3. Add the given element to the element's drag data store elements list.

The difference between setDragImage() and addElement() is that the latter automatically generates the image based on the current rendering of the elements added (potentially keeping it updated as the drag continues, e.g. if the elements include an actively playing video), whereas the former uses the exact specified image at the time the method is invoked.

7.7.3.1 DataTransferItems 인터페이스

Each DataTransfer object is associated with a DataTransferItems object.

interface DataTransferItems {
  readonly attribute unsigned long length;
  getter DataTransferItem (in unsigned long index);
  deleter void (in unsigned long index);
  void clear();

  DataTransferItem add(in DOMString data, in DOMString type);
  DataTransferItem add(in File data);
};
items . length

드래그 데이터 스토어에 있는 아이템의 갯수를 반환합니다.

Returns the number of items in the drag data store.

items[index]

드래그 데이터 스토어에서 index번째 항목을 나타내는 DataTransferItem 객체를 반환합니다.

Returns the DataTransferItem object representing the indexth entry in the drag data store.

delete items[index]

드래그 데이터 스토어에서 index번째 항목을 제거합니다.

Removes the indexth entry in the drag data store.

items . clear()

드래그 데이터 스토어에서 모든 항목을 제거합니다.

Removes all the entries in the drag data store.

items . add(data)
items . add(data, type)

주어진 데이터를 드래그 데이터 스토어에 추가합니다. 데이터가 평범한 텍스트인 경우 type 문자열도 명시해야 합니다.

Adds a new entry for the given data to the drag data store. If the data is plain text then a type string has to be provided also.

While the DataTransferItems object's DataTransfer object is associated with a drag data store, the DataTransferItems object's mode is the same as the drag data store mode. When the DataTransferItems object's DataTransfer object is not associated with a drag data store, the DataTransferItems object's mode is the disabled mode. The drag data store referenced in this section (which is used only when the DataTransferItems object is not in the disabled mode) is the drag data store with which the DataTransferItems object's DataTransfer object is associated.

The length attribute must return zero if the object is in the disabled mode; otherwise it must return the number of items in the drag data store item list.

When a DataTransferItems object is not in the disabled mode, its supported property indices are the numbers in the range 0 .. n-1, where n is the number of items in the drag data store item list.

To determine the value of an indexed property i of a DataTransferItems object, the user agent must return a DataTransferItem object representing the ith item in the drag data store. The same object must be returned each time a particular item is obtained from this DataTransferItems object. The DataTransferItem object must be associated with the same DataTransfer object as the DataTransferItems object when it is first created.

To delete an existing indexed property i of a DataTransferItems object, the user agent must run these steps:

  1. If the DataTransferItems object is not in the read/write mode, throw an INVALID_STATE_ERR exception and abort these steps.

  2. Remove the ith item from the drag data store.

The clear method, if the DataTransferItems object is in the read/write mode, must remove all the items from the drag data store. Otherwise, it must do nothing.

The add() method must run the following steps:

  1. If the DataTransferItems object is not in the read/write mode, return null and abort these steps.

  2. Jump to the appropriate set of steps from the following list:

    If the first argument to the method is a string

    If there is already an item in the drag data store item list whose kind is Plain Unicode string and whose type string is equal to the value of the method's second argument, converted to ASCII lowercase, then throw a NOT_SUPPORTED_ERR exception and abort these steps.

    Otherwise, add an item to the drag data store item list whose kind is Plain Unicode string, whose type string is equal to the value of the method's second argument, converted to ASCII lowercase, and whose data is the string given by the method's first argument.

    If the first argument to the method is a File

    Add an item to the drag data store item list whose kind is File, whose type string is the type of the File, converted to ASCII lowercase, and whose data is the same as the File's data.

  3. Determine the value of the indexed property corresponding to the newly added item, and return that value (a newly created DataTransferItem object).

7.7.3.2 DataTransferItem 인터페이스

각각의 DataTransferItem 객체는 DataTransfer 객체와 연결되어 있습니다.

Each DataTransferItem object is associated with a DataTransfer object.

interface DataTransferItem {
    readonly attribute DOMString kind;
    readonly attribute DOMString type;
    void getAsString(in FunctionStringCallback callback);
    File getAsFile();
};

[Callback=FunctionOnly, NoInterfaceObject]
interface FunctionStringCallback {
  void handleEvent(in DOMString data);
};
item . kind

드래그 데이터 아이템 종류를 반환합니다. "string"이거나 "file"입니다.

Returns the drag data item kind, one of: "string", "file".

item . type

드래그 데이터 아이템 종류 문자열을 반환합니다.

Returns the drag data item type string.

item . getAsString(callback)

드래그 데이터 아이템 종류이 평범한 유니코드 문자열인 경우, 문자열 데이터를 매개변수로 콜백을 호출합니다.

Invokes the callback with the string data as the argument, if the drag data item kind is Plain Unicode string.

file = item . getAsFile()

드래그 데이터 아이템 종류이 파일인 경우, File 객체를 반환합니다.

Returns a File object, if the drag data item kind is File.

While the DataTransferItem object's DataTransfer object is associated with a drag data store and that drag data store's drag data store item list still contains the item that the DataTransferItem object represents, the DataTransferItem object's mode is the same as the drag data store mode. When the DataTransferItem object's DataTransfer object is not associated with a drag data store, or if the item that the DataTransferItem object represents has been removed from the relevant drag data store item list, the DataTransferItem object's mode is the disabled mode. The drag data store referenced in this section (which is used only when the DataTransferItem object is not in the disabled mode) is the drag data store with which the DataTransferItem object's DataTransfer object is associated.

The kind attribute must return the empty string if the DataTransferItem object is in the disabled mode; otherwise it must return the string given in the cell from the second column of the following table from the row whose cell in the first column contains the drag data item kind of the item represented by the DataTransferItem object:

Kind String
Plain Unicode string "string"
File "file"

The type attribute must return the empty string if the DataTransferItem object is in the disabled mode; otherwise it must return the drag data item type string of the item represented by the DataTransferItem object.

The getAsString(callback) method must run the following steps:

  1. If the callback is null, abort these steps.

  2. If the DataTransferItem object is not in the read/write mode or the read-only mode, abort these steps. The callback is never invoked.

  3. If the drag data item kind is not Plain Unicode string, abort these steps. The callback is never invoked.

  4. Otherwise, queue a task to invoke callback, passing the actual data of the item represented by the DataTransferItem object as the argument.

The getAsFile() method must run the following steps:

  1. If the DataTransferItem object is not in the read/write mode or the read-only mode, return null and abort these steps.

  2. If the drag data item kind is not File, then return null and abort these steps.

  3. Return a new File object representing the actual data of the item represented by the DataTransferItem object.

7.7.4 DragEvent 인터페이스

드래그-드랍 처리 모델은 몇가지 이벤트를 포함합니다. 이러한 것들은 모두 DragEvent 인터페이스를 사용합니다.

The drag-and-drop processing model involves several events. They all use the DragEvent interface.

interface DragEvent : MouseEvent {
  readonly attribute DataTransfer dataTransfer;

  void initDragEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dummyArg, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in EventTarget relatedTargetArg, in DataTransfer dataTransferArg);
};
event . dataTransfer

이벤트에 대해 DataTransfer 객체를 반환합니다.

Returns the DataTransfer object for the event.

The initDragEvent() method must initialize the event in a manner analogous to the similarly-named method in the DOM Events interfaces, except that the dummyArg argument must be ignored. [DOMEVENTS]

The dataTransfer attribute of the DragEvent interface represents the context information for the event.

When a user agent is required to fire a DND event named e at an element, using a particular drag data store, the user agent must run the following steps:

  1. If e is dragstart, set the drag data store mode to the read/write mode.

    If e is drop, set the drag data store mode to the read-only mode.

  2. Let dataTransfer be a newly created DataTransfer object associated with the given drag data store.

  3. Set the effectAllowed attribute to the drag data store's drag data store allowed effects state.

  4. Set the dropEffect attribute to "none" if e is dragstart, drag, or dragleave; to the value corresponding to the current drag operation if e is drop or dragend; and to a value based on the effectAllowed attribute's value and to the drag-and-drop source, as given by the following table, otherwise (i.e. if e is dragenter or dragover):

    effectAllowed dropEffect
    "none" "none"
    "copy", "copyLink", "copyMove", "all" "copy"
    "link", "linkMove" "link"
    "move" "move"
    "uninitialized" when what is being dragged is a selection from a text field "move"
    "uninitialized" when what is being dragged is a selection "copy"
    "uninitialized" when what is being dragged is an a element with an href attribute "link"
    Any other case "copy"
  5. Create a DragEvent object and initialize it to have the given name e, to bubble, to be cancelable unless e is dragleave or dragend, and to have the detail attribute set to zero, the mouse and key attributes set according to the state of the input devices as they would be for user interaction events, the relatedTarget attribute set to null, and the dataTransfer attribute set to dataTransfer, the DataTransfer object created above.

    If there is no relevant pointing device, the object must have its screenX, screenY, clientX, clientY, and button attributes set to 0.

  6. Dispatch the newly created DragEvent object at the specified target element.

  7. Set the drag data store allowed effects state to the current value of dataTransfer's effectAllowed attribute.

  8. Set the drag data store mode back to the protected mode if it was changed in the first step.

  9. Break the association between dataTransfer and the drag data store.

7.7.5 드래그-드롭 처리 모델

When the user attempts to begin a drag operation, the user agent must run the following steps. User agents must act as if these steps were run even if the drag actually started in another document or application and the user agent was not aware that the drag was occuring until it intersected with a document under the user agent's purview.

  1. Determine what is being dragged, as follows:

    If the drag operation was invoked on a selection, then it is the selection that is being dragged.

    Otherwise, if the drag operation was invoked on a Document, it is the first element, going up the ancestor chain, starting at the node that the user tried to drag, that has the IDL attribute draggable set to true. If there is no such element, then nothing is being dragged; abort these steps, the drag-and-drop operation is never started.

    Otherwise, the drag operation was invoked outside the user agent's purview. What is being dragged is defined by the document or application where the drag was started.

    img elements and a elements with an href attribute have their draggable attribute set to true by default.

  2. Create a drag data store. All the DND events fired subsequently by the steps in this section must use this drag data store.

  3. Establish which DOM node is the source node, as follows:

    If it is a selection that is being dragged, then the source node is the text node that the user started the drag on (typically the text node that the user originally clicked). If the user did not specify a particular node, for example if the user just told the user agent to begin a drag of "the selection", then the source node is the first text node containing a part of the selection.

    Otherwise, if it is an element that is being dragged, then the source node is the element that is being dragged.

    Otherwise, the source node is part of another document or application. When this specification requires that an event be dispatched at the source node in this case, the user agent must instead follow the platform-specific conventions relevant to that situation.

    Multiple events are fired on the source node during the course of the drag-and-drop operation.

  4. Determine the list of dragged nodes, as follows:

    If it is a selection that is being dragged, then the list of dragged nodes contains, in tree order, every node that is partially or completely included in the selection (including all their ancestors).

    Otherwise, the list of dragged nodes contains only the source node, if any.

  5. If it is a selection that is being dragged, then add an item to the drag data store item list, with its properties set as follows:

    The drag data item type string
    "text/plain"
    The drag data item kind
    Plain Unicode string
    The actual data
    The text of the selection

    Otherwise, if any files are being dragged, then add one item per file to the drag data store item list, with their properties set as follows:

    The drag data item type string
    The MIME type of the file, if known, or "application/octet-stream" otherwise.
    The drag data item kind
    File
    The actual data
    The file's contents and name.

    Dragging files can currently only happen from outside a browsing context, for example from a file system manager application.

    If the drag initiated outside of the application, the user agent must add items to the drag data store item list as appropriate for the data being dragged, honoring platform conventions where appropriate; however, if the platform conventions do not use MIME types to label dragged data, the user agent must make a best-effort attempt to map the types to MIME types, and, in any case, all the drag data item type strings must be converted to ASCII lowercase.

  6. Perform drag-and-drop initialization steps defined in any other applicable specifications.
  7. Run the following substeps:

    1. Let urls be an empty list of absolute URLs.

    2. For each node in the list of dragged nodes:

      If the node is an a element with an href attribute
      Add to urls the result of resolving the element's href content attribute relative to the element.
      If the node is an img element with an src attribute
      Add to urls the result of resolving the element's src content attribute relative to the element.
    3. If urls is still empty, abort these substeps.

    4. Let url string be the result of concatenating the strings in urls, in the order they were added, separated by a U+000D CARRIAGE RETURN U+000A LINE FEED character pair (CRLF).

    5. Add one item to the drag data store item list, with its properties set as follows:

      The drag data item type string
      text/uri-list
      The drag data item kind
      Plain Unicode string
      The actual data
      url string
  8. If it is an element that is being dragged, then set the drag data store elements list to contain just the source node.

    Otherwise, update the drag data store default feedback as appropriate for the user agent (if the user is dragging the selection, then the selection would likely be the basis for this feedback; if the drag began outside the user agent, then the platform conventions for determining the drag feedback should be used).

    Script can use the addElement() method to add further elements to the list of what is being dragged. (This list is only used for rendering the drag feedback.)

  9. Fire a DND event named dragstart at the source node.

    If the event is canceled, then the drag-and-drop operation should not occur; abort these steps.

    Since events with no event listeners registered are, almost by definition, never canceled, drag-and-drop is always available to the user if the author does not specifically prevent it.

  10. Initiate the drag-and-drop operation in a manner consistent with platform conventions, and as described below.

    The drag-and-drop feedback must be generated from the first of the following sources that is available:

    1. The drag data store bitmap, if any. In this case, the drag data store hot spot coordinate should be used as hints for where to put the cursor relative to the resulting image. The values are expressed as distances in CSS pixels from the left side and from the top side of the image respectively. [CSS]
    2. The elements in the drag data store elements list, if any.
    3. The drag data store default feedback.

From the moment that the user agent is to initiate the drag-and-drop operation, until the end of the drag-and-drop operation, device input events (e.g. mouse and keyboard events) must be suppressed. In addition, the user agent must track all DOM changes made during the drag-and-drop operation, and add them to its undo transaction history as one atomic operation once the drag-and-drop operation has ended.

During the drag operation, the element directly indicated by the user as the drop target is called the immediate user selection. (Only elements can be selected by the user; other nodes must not be made available as drop targets.) However, the immediate user selection is not necessarily the current target element, which is the element currently selected for the drop part of the drag-and-drop operation.

The immediate user selection changes as the user selects different elements (either by pointing at them with a pointing device, or by selecting them in some other way). The current target element changes when the immediate user selection changes, based on the results of event listeners in the document, as described below.

Both the current target element and the immediate user selection can be null, which means no target element is selected. They can also both be elements in other (DOM-based) documents, or other (non-Web) programs altogether. (For example, a user could drag text to a word-processor.) The current target element is initially null.

In addition, there is also a current drag operation, which can take on the values "none", "copy", "link", and "move". Initially, it has the value "none". It is updated by the user agent as described in the steps below.

User agents must, as soon as the drag operation is initiated and every 350ms (±200ms) thereafter for as long as the drag operation is ongoing, queue a task to perform the following steps in sequence:

  1. If the user agent is still performing the previous iteration of the sequence (if any) when the next iteration becomes due, abort these steps for this iteration (effectively "skipping missed frames" of the drag-and-drop operation).

  2. Fire a DND event named drag event at the source node. If this event is canceled, the user agent must set the current drag operation to "none" (no drag operation).

  3. If the drag event was not canceled and the user has not ended the drag-and-drop operation, check the state of the drag-and-drop operation, as follows:

    1. If the user is indicating a different immediate user selection than during the last iteration (or if this is the first iteration), and if this immediate user selection is not the same as the current target element, then update the current target element as follows:

      If the new immediate user selection is null

      Set the current target element to null also.

      If the new immediate user selection is in a non-DOM document or application

      Set the current target element to the immediate user selection.

      Otherwise

      Fire a DND event named dragenter at the immediate user selection.

      If the event is canceled, then set the current target element to the immediate user selection.

      Otherwise, run the appropriate step from the following list:

      If the current target element is a text field (e.g. textarea, or an input element whose type attribute is in the Text state) or an editable element, and the drag data store item list has an item with the drag data item type string "text/plain" and the drag data item kind Plain Unicode string

      Set the current target element to the immediate user selection anyway.

      If the current target element is an element with a dropzone attribute that matches the drag data store

      Set the current target element to the immediate user selection anyway.

      If the current target element is the body element

      Leave the current target element unchanged.

      Otherwise

      Fire a DND event named dragenter at the body element, and set the current target element to the body element, regardless of whether that event was canceled or not.

      If the body element is null, then the event will be fired at the Document object (as required by the definition of the body element), but the current target element would be set to null, not the Document object.

    2. If the previous step caused the current target element to change, and if the previous target element was not null or a part of a non-DOM document, then fire a DND event named dragleave at the previous target element.

    3. If the current target element is a DOM element, then fire a DND event named dragover at this current target element.

      If the dragover event is not canceled, run the appropriate step from the following list:

      If the current target element is a text field (e.g. textarea, or an input element whose type attribute is in the Text state) or an editable element, and the drag data store item list has an item with the drag data item type string "text/plain" and the drag data item kind Plain Unicode string

      Set the current drag operation to either "copy" or "move", as appropriate given the platform conventions.

      If the current target element is an element with a dropzone attribute that matches the drag data store and specifies an operation

      Set the current drag operation to the operation specified by the dropzone attribute of the current target element.

      If the current target element is an element with a dropzone attribute that matches the drag data store and does not specify an operation

      Set the current drag operation to "copy".

      Otherwise

      Reset the current drag operation to "none".

      Otherwise (if the dragover event is canceled), set the current drag operation based on the values of the effectAllowed and dropEffect attributes of the DragEvent object's dataTransfer object as they stood after the event dispatch finished, as per the following table:

      effectAllowed dropEffect Drag operation
      "uninitialized", "copy", "copyLink", "copyMove", or "all" "copy" "copy"
      "uninitialized", "link", "copyLink", "linkMove", or "all" "link" "link"
      "uninitialized", "move", "copyMove", "linkMove", or "all" "move" "move"
      Any other case "none"
    4. Otherwise, if the current target element is not a DOM element, use platform-specific mechanisms to determine what drag operation is being performed (none, copy, link, or move), and set the current drag operation accordingly.

    5. Update the drag feedback (e.g. the mouse cursor) to match the current drag operation, as follows:

      Drag operation Feedback
      "copy" Data will be copied if dropped here.
      "link" Data will be linked if dropped here.
      "move" Data will be moved if dropped here.
      "none" No operation allowed, dropping here will cancel the drag-and-drop operation.
  4. Otherwise, if the user ended the drag-and-drop operation (e.g. by releasing the mouse button in a mouse-driven drag-and-drop interface), or if the drag event was canceled, then this will be the last iteration. Run the following steps, then stop the drag-and-drop operation:

    1. If the current drag operation is "none" (no drag operation), or, if the user ended the drag-and-drop operation by canceling it (e.g. by hitting the Escape key), or if the current target element is null, then the drag operation failed. Run these substeps:

      1. Let dropped be false.

      2. If the current target element is a DOM element, fire a DND event named dragleave at it; otherwise, if it is not null, use platform-specific conventions for drag cancellation.

      Otherwise, the drag operation was as success; run these substeps:

      1. Let dropped be true.

      2. If the current target element is a DOM element, fire a DND event named drop at it; otherwise, use platform-specific conventions for indicating a drop.

      3. If the event is canceled, set the current drag operation to the value of the dropEffect attribute of the DragEvent object's dataTransfer object as it stood after the event dispatch finished.

        Otherwise, the event is not canceled; perform the event's default action, which depends on the exact target as follows:

        If the current target element is a text field (e.g. textarea, or an input element whose type attribute is in the Text state) or an editable element, and the drag data store item list has an item with the drag data item type string "text/plain" and the drag data item kind Plain Unicode string

        Insert the actual data of the first item in the drag data store item list to have a drag data item type string of "text/plain" and a drag data item kind that is Plain Unicode string into the text field or editable element in a manner consistent with platform-specific conventions (e.g. inserting it at the current mouse cursor position, or inserting it at the end of the field).

        Otherwise

        Reset the current drag operation to "none".

    2. Fire a DND event named dragend at the source node.

    3. Run the appropriate steps from the following list as the default action of the dragend event:

      If the current target element is a text field (e.g. textarea, or an input element whose type attribute is in the Text state), and dropped is true, and the current drag operation is "move", and the source of the drag-and-drop operation is a selection in the DOM
      The user agent should delete the range representing the dragged selection from the DOM.
      If the current target element is a text field (e.g. textarea, or an input element whose type attribute is in the Text state), and dropped is true, and the current drag operation is "move", and the source of the drag-and-drop operation is a selection in a text field
      The user agent should delete the dragged selection from the relevant text field.
      Otherwise
      The event has no default action.

User agents are encouraged to consider how to react to drags near the edge of scrollable regions. For example, if a user drags a link to the bottom of the viewport on a long page, it might make sense to scroll the page so that the user can drop the link lower on the page.

This model is independent of which Document object the nodes involved are from; the events are fired as described above and the rest of the processing model runs as described above, irrespective of how many documents are involved in the operation.

7.7.6 이벤트 요약

This section is non-normative.

다음의 이벤트들은 드래그 앤 드랍 모델에 관련된 것입니다.

The following events are involved in the drag-and-drop model.

이벤트 이름

대상

취소가능 여부

드래그 데이터 스토어 모드

dropEffect

기본 동작

dragstart

소스 노드

✓ 가능

읽기/쓰기 모드

"none"

드래그 앤 드롭 동작을 시작합니다.

drag

소스 노드

✓ 가능

보호 모드

"none"

드래그 앤 드롭 동작을 계속합니다.

dragenter

사용자가 직전에 선택한 것 또는 body 요소

✓ 가능

보호 모드

effectAllowed의 값에 따라 다릅니다.

사용자가 직전에 선택한 것을 잠재적인 대상 요소로 간주하여 거부합니다.

dragleave

이전의 대상 요소

보호 모드

"none"

없음

dragover

현재의 대상 요소

✓ 가능

보호 모드

effectAllowed의 값에 따라 다릅니다.

현재 드래그 동작을 "none"으로 리셋합니다.

drop

현재 대상 요소

✓ 가능

읽기전용 모드

현재 드래그 동작

경우에 따라 다릅니다.

dragend

소스 노드

보호 모드

현재 드래그 동작

경우에 따라 다릅니다.

테이블에 표시되지 않은 것: 모든 이벤트는 버블링합니다. 또한 effectAllowed 속성은 항상 직전의 이벤트가 발생했을 때의 값을 가지며, 그 기본값은 dragstart 이벤트에 의해 정해진 "uninitialized"입니다.

Not shown in the above table: all these events bubble, and the effectAllowed attribute always has the value it had after the previous event was fired, defaulting to "uninitialized" in the dragstart event.

7.7.7 draggable 속성

모든 HTML 요소는 내용 속성 draggable을 가질 수 있습니다. draggable속성은 나열 속성이며, 3가지 상태를 가집니다. true, false 키워드는 같은 이름의 상태에 연결됩니다. 3번째 상태인 auto는 연결된 키워드는 없으며, 값을 생략했을 경우의 기본값입니다.

All HTML elements may have the draggable content attribute set. The draggable attribute is an enumerated attribute. It has three states. The first state is true and it has the keyword true. The second state is false and it has the keyword false. The third state is auto; it has no keywords but it is the missing value default.

true 상태는 요소를 드래그할 수 있다는 뜻이며, false 는 그렇게 할 수 없다는 뜻입니다. auto는 사용자 에이전트의 기본값을 따릅니다.

The true state means the element is draggable; the false state means that it is not. The auto state uses the default behavior of the user agent.

element . draggable [ = value ]

요소를 드래그할 수 있다면 true, 그렇지 않다면 false를 반환합니다.

Returns true if the element is draggable; otherwise, returns false.

값을 설정하여, 기본값을 덮어쓰고 draggable 내용 속성을 설정합니다.

Can be set, to override the default and set the draggable content attribute.

The draggable IDL attribute, whose value depends on the content attribute's in the way described below, controls whether or not the element is draggable. Generally, only text selections are draggable, but elements whose draggable IDL attribute is true become draggable as well.

If an element's draggable content attribute has the state true, the draggable IDL attribute must return true.

Otherwise, if the element's draggable content attribute has the state false, the draggable IDL attribute must return false.

Otherwise, the element's draggable content attribute has the state auto. If the element is an img element, or, if the element is an a element with an href content attribute, the draggable IDL attribute must return true.

Otherwise, the draggable DOM must return false.

If the draggable IDL attribute is set to the value false, the draggable content attribute must be set to the literal value false. If the draggable IDL attribute is set to the value true, the draggable content attribute must be set to the literal value true.

7.7.8 dropzone 속성

모든 HTML 요소는 내용 속성 dropzone을 가질 수 있습니다. 이 속성을 사용했다면 그 값은 공백문자로 구분된, 순서 없이 유일한 토큰의 목록이며 아스키, 대소문자를 구분하지 않습니다. 허용되는 값은 다음과 같습니다.

All HTML elements may have the dropzone content attribute set. When specified, its value must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. The allowed values are the following:

copy

요소에 아이템을 드롭하는 것은 드래그된 데이터를 복사함을 의미합니다.

Indicates that dropping an accepted item on the element will result in a copy of the dragged data.

move

요소에 아이템을 드롭하는 것은 드래그된 데이터를 이동함을 의미합니다.

Indicates that dropping an accepted item on the element will result in the dragged data being moved to the new location.

link

요소에 아이템을 드롭하는 것은 원래의 데이터로 링크함을 의미합니다.

Indicates that dropping an accepted item on the element will result in a link to the original data.

S (또는 s) 문자와 : 문자로 시작하는, 3글자 이상의 모든 키워드

Any keyword with three characters or more, beginning with the two characters U+0073 LATIN SMALL LETTER S and U+003A COLON or U+0053 LATIN CAPITAL LETTER S and U+003A COLON (i.e. an ASCII case-insensitive match for the string "s:")

드래그 데이터 아이템 종류가 평범한 유니코드 문자열이고, 드래그 데이터 아이템 종류 문자열이 키워드에서 S(s): 문자를 제외한 나머지와 일치하는 아이템을 받아들임을 나타냅니다.

Indicates that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.

F (또는 f) 문자와 : 문자로 시작하는, 3글자 이상의 모든 키워드

Any keyword with three characters or more, beginning with the two characters U+0066 LATIN SMALL LETTER F and U+003A COLON or U+0046 LATIN CAPITAL LETTER F and U+003A COLON (i.e. an ASCII case-insensitive match for the string "f:")

드래그 데이터 아이템 종류가 파일이고, 드래그 데이터 아이템 종류 문자열이 키워드에서 F(f): 문자를 제외한 나머지와 일치하는 아이템을 받아들임을 나타냅니다.

Indicates that items with the drag data item kind File and the drag data item type string set to a value that matches the remainder of the keyword are accepted.

내용 속성 dropzone에 세가지 피드백 값(copy, move, link)을 중복해서 사용할수는 없습니다. 아무것도 명시하지 않았다면 copy으로 간주합니다.

The dropzone content attribute's values must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.

A dropzone attribute matches a drag data store if the dropzone processing steps result in a match.

A dropzone attribute specifies an operation if the dropzone processing steps result in a specified operation. The specified operation is as given by those steps.

The dropzone processing steps are as follows. They either result in a match or not, and separate from this result either in a specified operation or not, as defined below.

  1. Let value be the value of the dropzone attribute.

  2. Let keywords be the result of splitting value on spaces.

  3. Let matched be false.

  4. Let operation be unspecified.

  5. For each value in keywords, if any, in the order that they were found in value, run the following steps.

    1. Let keyword be the keyword.

    2. If keyword is one of "copy", "move", or "link", then: run the following substeps:

      1. If operation is still unspecified, then let operation be the string given by keyword.

      2. Skip to the step labeled end of keyword below.

    3. If keyword is shorter than three characters in length, then skip to the step labeled end of keyword below.

    4. If the second character in keyword is not a U+003A COLON character (:), then skip to the step labeled end of keyword below.

    5. Let kind code be the first character in keyword, converted to ASCII lowercase.

    6. Jump to the appropriate step from the list below, based on the value of kind code:

      If kind code is a U+0073 LATIN SMALL LETTER S character

      Let kind be Plain Unicode string.

      If kind code is a U+0066 LATIN SMALL LETTER F character

      Let kind be File.

      Otherwise

      Skip to the step labeled end of keyword below.

    7. Let type be the string consisting of all but the first two characters of keyword, converted to ASCII lowercase.

    8. If there exist any items in the drag data store item list whose drag data item kind is the kind given in kind and whose drag data item type is type, then let matched be true.

    9. End of keyword: Go on to the next keyword, if any, or the next step in the overall algorithm, if there are no more.

  6. The algorithm results in a match if matched is true, and does not otherwise.

    The algorithm results in a specified operation if operation is not unspecified. The specified operation, if one is specified, is the one given by operation.

The dropzone attribute must reflect the content attribute of the same name.

div 요소에 dropzone속성을 사용하여, 이미지 파일을 드롭할 대상으로 만들고 있습니다. 여기에 드롭된 이미지가 표시됩니다.

In this example, a div element is made into a drop target for image files using the dropzone attribute. Images dropped into the target are then displayed.

<div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)">
 <p>Drop an image here to have it displayed.</p>
</div>
<script>
 function receive(event, element) {
   var data = event.dataTransfer.items;
   for (var i = 0; i < data.length; i += 1) {
     if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
       var img = new Image();
       img.src = window.createObjectURL(data[i].getAsFile());
       element.appendChild(img);
     }
   }
 }
</script>

7.7.9 드래그-드롭 모델의 보안 위험성

User agents must not make the data added to the DataTransfer object during the dragstart event available to scripts until the drop event, because otherwise, if a user were to drag sensitive information from one document to a second document, crossing a hostile third document in the process, the hostile document could intercept the data.

For the same reason, user agents must consider a drop to be successful only if the user specifically ended the drag operation — if any scripts end the drag operation, it must be considered unsuccessful (canceled) and the drop event must not be fired.

User agents should take care to not start drag-and-drop operations in response to script actions. For example, in a mouse-and-window environment, if a script moves a window while the user has his mouse button depressed, the UA would not consider that to start a drag. This is important because otherwise UAs could cause data to be dragged from sensitive sources and dropped into hostile documents without the user's consent.

7.8 편집 API

document . execCommand(commandId [, showUI [, value ] ] )

첫번째 매개변수로 명시된 동작을 실행하며, 설명이 아래에 나열되어 있습니다. 두번째와 세번째 매개변수는 이따금씩 영향을 미칩니다. (그렇지 않은 경우 무시됩니다)

Runs the action specified by the first argument, as described in the list below. The second and third arguments sometimes affect the action. (If they don't they are ignored.)

document . queryCommandEnabled(commandId)

아래 목록에 설명된대로, 주어진 명령이 사용 가능한지를 반환합니다.

Returns whether the given command is enabled, as described in the list below.

document . queryCommandIndeterm(commandId)

아래 목록에 설명된대로, 주어진 명령이 모호한 것인지 여부를 반환합니다. 역주

Returns whether the given command is indeterminate, as described in the list below.

document . queryCommandState(commandId)

아래 목록에 설명된대로, 명령의 상태를 반환합니다.

Returns the state of the command, as described in the list below.

document . queryCommandSupported(commandId)

명령이 지원된다면 true를, 그렇지 않다면 false를 반환합니다.

Returns true if the command is supported; otherwise, returns false.

document . queryCommandValue(commandId)

아래 목록에 설명된대로, 명령의 값을 반환합니다.

Returns the value of the command, as described in the list below.

The execCommand(commandId, showUI, value) method on the HTMLDocument interface allows scripts to perform actions on the current selection or at the current caret position. Generally, these commands would be used to implement editor UI, for example having a "delete" button on a toolbar.

There are three variants to this method, with one, two, and three arguments respectively. The showUI and value parameters, even if specified, are ignored except where otherwise stated.

When execCommand() is invoked, the user agent must follow the following steps:

  1. If the given commandId maps to an entry in the list below whose "Enabled When" entry has a condition that is currently false, do nothing; abort these steps.
  2. Otherwise, execute the "Action" listed below for the given commandId.

문서에 선택이 있고 그러한 선택 전체가 편집 호스트 내부에 있거나, 선택된 것은 없지만 캐럿역주편집 호스트 내에 있다면, 그 문서는 편집 호스트 명령에 대해 준비된 것입니다.

A document is ready for editing host commands if it has a selection that is entirely within an editing host, or if it has no selection but its caret is inside an editing host.

The queryCommandEnabled(commandId) method, when invoked, must return true if the condition listed below under "Enabled When" for the given commandId is true, and false otherwise.

The queryCommandIndeterm(commandId) method, when invoked, must return true if the condition listed below under "Indeterminate When" for the given commandId is true, and false otherwise.

The queryCommandState(commandId) method, when invoked, must return the value expressed below under "State" for the given commandId.

The queryCommandSupported(commandId) method, when invoked, must return true if the given commandId is in the list below, and false otherwise.

The queryCommandValue(commandId) method, when invoked, must return the value expressed below under "Value" for the given commandId.

commandId에 사용할 수 있는 값과, 그에 대응하는 의미는, 다음과 같습니다.

The possible values for commandId, and their corresponding meanings, are as follows. These values must be compared to the argument in an ASCII case-insensitive manner.

bold

요약: 선택 영역의 bold 여부를 토글합니다.

Toggles whether the selection is bold.

Action: The user agent must act as if the user had requested that the selection be wrapped in the semantics of the b element (or, again, unwrapped, or have that semantic inserted or removed, as defined by the UA).

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 선택된 것(이 없다면 캐럿)이 b 요소 내부에 있는 경우 true. 그렇지 않은 경우 false입니다.

True if the selection, or the caret, if there is no selection, is, or is contained within, a b element. False otherwise.

: 위에서 "상태" 로 주어진 표현식의 값과 동일하게 true또는 false입니다.

The string "true" if the expression given for the "State" above is true, the string "false" otherwise.

createLink

요약: 선택이 링크인지 아닌지를 토글합니다. 두번째 매개변수가 참이고 링크를 추가할 것이라면, 사용자 에이전트는 사용자에게 (링크의) 주소를 질문할 것입니다. 그렇지 않다면, 세번째 매개변수가 주소로 사용됩니다.

Toggles whether the selection is a link or not. If the second argument is true, and a link is to be added, the user agent will ask the user for the address. Otherwise, the third argument will be used as the address.

Action: The user agent must act as if the user had requested that the selection be wrapped in the semantics of the a element (or, again, unwrapped, or have that semantic inserted or removed, as defined by the UA). If the user agent creates an a element or modifies an existing a element, then if the showUI argument is present and has the value false, then the value of the value argument must be used as the URL of the link. Otherwise, the user agent should prompt the user for the URL of the link.

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

delete

요약: 선택, 혹은 커서 앞의 문자를 삭제합니다.

Deletes the selection or the character before the cursor.

Action: The user agent must act as if the user had performed a backspace operation.

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

formatBlock

요약: 세번째 매개변수로 주어진 요소의 선택을 감쌉니다. 세번째 매개변수가 formatBlock이 될 수 있는 요소를 지정하지 않을 경우 아무 일도 하지 않습니다.

Wraps the selection in the element given by the third argument. If the third argument doesn't specify an element that is a formatBlock candidate, does nothing.

Action: The user agent must run the following steps:

  1. If the value argument wasn't specified, abort these steps without doing anything.

  2. If the value argument has a leading U+003C LESS-THAN SIGN character (<) and a trailing U+003E GREATER-THAN SIGN character (>), then remove the first and last characters from value.

  3. If value is (now) an ASCII case-insensitive match for the tag name of an element defined by this specification that is defined to be a formatBlock candidate, then, for every position in the selection, take the nearest formatBlock candidate ancestor element of that position that contains only phrasing content, and, if that element is editable, is not an editing host, and has a parent element whose content model allows that parent to contain any flow content, replace it with an element in the HTML namespace whose name is value, and move all the children that were in it to the new element, and copy all the attributes that were on it to the new element.

    If there is no selection, then, where in the description above refers to the selection, the user agent must act as if the selection was an empty range (with just one position) at the caret position.

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

forwardDelete

요약: 선택, 혹은 커서 다음의 문자를 삭제합니다.

Deletes the selection or the character after the cursor.

Action: The user agent must act as if the user had performed a forward delete operation.

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

insertImage

요약: 선택이 이미지인지의 여부를 토글합니다. 두번째 매개변수가 참이고 이미지가 더해질 것이라면, 사용자 에이전트는 사용자에게 (이미지의) 주소를 질문할 것입니다. 그렇지 않다면, 세번째 매개변수를 주소로 사용합니다.

Toggles whether the selection is an image or not. If the second argument is true, and an image is to be added, the user agent will ask the user for the address. Otherwise, the third argument will be used as the address.

Action: The user agent must act as if the user had requested that the selection be wrapped in the semantics of the img element (or, again, unwrapped, or have that semantic inserted or removed, as defined by the UA). If the user agent creates an img element or modifies an existing img element, then if the showUI argument is present and has the value false, then the value of the value argument must be used as the URL of the image. Otherwise, the user agent should prompt the user for the URL of the image.

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

insertHTML

요약: 세번째 매개변수를 HTML로 파싱한 결과물로 선택을 교체합니다.

Replaces the selection with the value of the third argument parsed as HTML.

Action: The user agent must run the following steps:

  1. If the document is an XML document, then throw an INVALID_ACCESS_ERR exception and abort these steps.

  2. If the value argument wasn't specified, abort these steps without doing anything.

  3. If there is a selection, act as if the user had requested that the selection be deleted.

  4. Invoke the HTML fragment parsing algorithm with an arbitrary orphan body element owned by the same Document as the context element and with the value argument as input.

  5. Insert the nodes returned by the previous step into the document at the location of the caret, firing any mutation events as appropriate.

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

insertLineBreak

요약: 줄바꿈 문자를 삽입합니다.

Inserts a line break.

Action: The user agent must act as if the user had requested a line separator.

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

insertOrderedList

요약: 선택 영역이 순서있는 목록인지 여부를 토글합니다.

Toggles whether the selection is an ordered list.

Action: The user agent must act as if the user had requested that the selection be wrapped in the semantics of the ol element (or unwrapped, or, if there is no selection, have that semantic inserted or removed — the exact behavior is UA-defined).

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

insertUnorderedList

요약: 선택 영역이 순서없는 목록인지 여부를 토글합니다.

Toggles whether the selection is an unordered list.

Action: The user agent must act as if the user had requested that the selection be wrapped in the semantics of the ul element (or unwrapped, or, if there is no selection, have that semantic inserted or removed — the exact behavior is UA-defined).

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

insertParagraph

요약: 문단 분리 문자를 삽입합니다.

Inserts a paragraph break.

Action: The user agent must act as if the user had performed a break block editing action.

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

insertText

요약: 세번째 매개변수로 주어진 텍스트를 삽입합니다.

Inserts the text given in the third parameter.

Action: The user agent must act as if the user had inserted text corresponding to the value parameter.

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

italic

요약: 선택 영역의 italic 여부를 토글합니다.

Toggles whether the selection is italic.

Action: The user agent must act as if the user had requested that the selection be wrapped in the semantics of the i element (or, again, unwrapped, or have that semantic inserted or removed, as defined by the UA).

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 선택된 것(이 없다면 캐럿)이 i 요소 내부에 있는 경우 true. 그렇지 않은 경우 false입니다.

True if the selection, or the caret, if there is no selection, is, or is contained within, a i element. False otherwise.

: 위에서 "상태" 로 주어진 표현식의 값과 동일하게 true또는 false입니다.

The string "true" if the expression given for the "State" above is true, the string "false" otherwise.

redo

요약: 사용자가 다시실행을 요청한 것 처럼 행동합니다.

Acts as if the user had requested a redo.

Action: The user agent must move forward one step in its undo transaction history, restoring the associated state. If the undo position is at the end of the undo transaction history, the user agent must do nothing.

활성화되는 경우: 실행취소 위치가 실행취소 작업 히스토리의 끝에 있지 않을 때 역주

The undo position is not at the end of the undo transaction history.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

selectAll

요약: 편집할 수 있는 내용 전체를 선택합니다.

Selects all the editable content.

Action: The user agent must change the selection so that all the content in the currently focused editing host is selected. If no editing host is focused, then the content of the entire document must be selected.

활성화되는 경우: 항상 활성입니다.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

subscript

요약: 선택 영역의 subscripted 여부를 토글합니다.

Toggles whether the selection is subscripted.

Action: The user agent must act as if the user had requested that the selection be wrapped in the semantics of the sub element (or, again, unwrapped, or have that semantic inserted or removed, as defined by the UA).

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 선택된 것(이 없다면 캐럿)이 sub 요소 내부에 있는 경우 true. 그렇지 않은 경우 false입니다.

True if the selection, or the caret, if there is no selection, is, or is contained within, a sub element. False otherwise.

: 위에서 "상태" 로 주어진 표현식의 값과 동일하게 true또는 false입니다.

The string "true" if the expression given for the "State" above is true, the string "false" otherwise.

superscript

요약: 선택 영역의 superscripted 여부를 토글합니다.

Toggles whether the selection is superscripted.

Action: The user agent must act as if the user had requested that the selection be wrapped in the semantics of the sup element (or unwrapped, or, if there is no selection, have that semantic inserted or removed — the exact behavior is UA-defined).

활성화되는 경우: 문서가 편집 호스트 커맨드에 준비가 되었을 때

The document is ready for editing host commands.

모호해지는 경우: 이런 경우는 없습니다.

상태: 선택된 것(이 없다면 캐럿)이 sup 요소 내부에 있는 경우 true. 그렇지 않은 경우 false입니다.

True if the selection, or the caret, if there is no selection, is, or is contained within, a sup element. False otherwise.

: 위에서 "상태" 로 주어진 표현식의 값과 동일하게 true또는 false입니다.

The string "true" if the expression given for the "State" above is true, the string "false" otherwise.

undo

요약: 사용자가 실행 취소를 요청한 것 처럼 행동합니다.

Acts as if the user had requested an undo.

Action: The user agent must move back one step in its undo transaction history, restoring the associated state. If the undo position is at the start of the undo transaction history, the user agent must do nothing.

활성화되는 경우: 실행취소 위치가 실행취소 작업 히스토리의 끝에 있지 않을때

The undo position is not at the start of the undo transaction history.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

unlink

요약: 선택에서 모든 링크들을 제거합니다.

Removes all links from the selection.

Action: The user agent must remove all a elements that have href attributes and that are partially or completely included in the current selection.

활성화되는 경우: 문서에 선택이 있고, 그 선택은 전체가 편집 호스트 내부에 있으며, 또한 최소한 하나의, href 속성이 있는 a 요소를 포함(부분적으로든, 완전히든) 할 때

The document has a selection that is entirely within an editing host and that contains (either partially or completely) at least one a element that has an href attribute.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

unselect

요약: 모든 선택을 해제합니다.

Unselects everything.

Action: The user agent must change the selection so that nothing is selected.

활성화되는 경우: 항상 활성입니다.

모호해지는 경우: 이런 경우는 없습니다.

상태: 항상 false입니다.

: 항상 문자열 "false"입니다.

vendorID-customCommandID
Action: User agents may implement vendor-specific extensions to this API. Vendor-specific extensions to the list of commands should use the syntax vendorID-customCommandID so as to prevent clashes between extensions from different vendors and future additions to this specification.
Enabled When: UA-defined.
Indeterminate When: UA-defined.
State: UA-defined.
Value: UA-defined.
Anything else
Action: User agents must do nothing.

Enabled When: 이런 경우는 없습니다.

Indeterminate When: 이런 경우는 없습니다.

State: 항상 false입니다.

Value: 항상 문자열 "false"입니다.

여기에서 모호한indeterminate 이라는 것은 단어의 직역이며, 명세에서는 "완전하게 명시하지 않은 제 3의 상태" 라는 의미로 사용되고 있습니다. 돌아가기

캐럿caret은 텍스트 입력 위치를 지정하는 것입니다. 커서와 거의 같습니다. 돌아가기

즉, 실행취소할 수 있는 뭔가가 있을 경우. 돌아가기