contextmenudirdraggabledropzonehiddenisitemidTo accept a drop, the drop target has to have a dropzone
- attribute and listen to the drop event.
To accept a drop, the drop target has to listen to the following events:
-The value of the dropzone attribute specifies what kind of
- data to accept (e.g. "string:text/plain" to accept any text strings, or
- "file:image/png" to accept a PNG image file) and what kind of feedback to
- give (e.g. "move" to indicate that the data will be moved).
dragenter event handler must report
+ whether or not the drop target is potentially willing to accept the drop.dragover event handler must specify what
+ feedback will be shown to the user.Instead of using the dropzone attribute, a drop
- target can handle the dragenter event (to report whether or
- not the drop target is to accept the drop) and the dragover
- event (to specify what feedback is to be shown to the user).
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.The drop event allows the actual drop to be performed. This
- event 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 dropzone="move string:text/x-example" ondrop="dropHandler(event)">
- <!-- don't forget to change the "text/x-example" type to something
- specific to your site -->
+<ol 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) {
+ var items = event.dataTransfer.items;
+ for (var i = 0; i < items.length; ++i) {
+ var item = items[i];
+ if (item.kind == 'string' && item.type == interalDNDType) {
+ event.preventDefault();
+ return;
+ }
+ }
+ }
+ function dragOverHandler(event) {
+ event.dataTransfer.dropEffect = 'move';
+ }
function dropHandler(event) {
var li = document.createElement('li');
var data = event.dataTransfer.getData(internalDNDType);
@@ -74390,10 +74400,6 @@ body { display:none }
type">MIME types; other values can be used as well. In all cases, however, the values
are all converted to ASCII lowercase by the API.
- Strings that contain ASCII whitespace cannot be used with the
- dropzone attribute, so authors are encouraged to use only
- MIME types or custom strings (without whitespace).
-
There is a limit of one Plain Unicode string item per item type string.
@@ -75846,40 +75852,10 @@ dictionary DragEventInit : MouseEventInit {
Set the current target element to the immediate user selection anyway.
dropzone attribute that matches the drag data storeSet the current target element to the immediate user - selection anyway.
dropzone attribute that matches the drag data storeLet new target be the nearest (deepest) such ancestor element.
- -If the immediate user selection is new target, then leave the - current target element unchanged.
- -Otherwise, fire a DND event named dragenter at new target, with the current
- current target element as the specific related target. Then, set
- the current target element to new target, regardless of whether
- that event was canceled or not.
Leave the current target element unchanged.
dropzone attribute that matches the drag data store and specifies an operationSet the current drag operation to the operation specified by the dropzone attribute of the current target
- element.
dropzone attribute that matches the drag data store and does not
- specify an operationSet the current drag operation to "copy".
Reset the current drag operation to "DragEventInit : MouseEventInit {
non-visual interactions.
dropzone attributeAll 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:
copyIndicates that dropping an accepted item on the element will result in a copy of the - dragged data.
- - -moveIndicates that dropping an accepted item on the element will result in the dragged data - being moved to the new location.
- - -linkIndicates that dropping an accepted item on the element will result in a link to the - original data.
- - -string:"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.
file:"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.
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.
An element with a dropzone attribute should also have a
- title attribute that names the element for the purpose of
- non-visual interactions.
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.
Let value be the value of the dropzone attribute.
Let keywords be the result of splitting value on ASCII whitespace.
Let matched be false.
Let operation be unspecified.
For each value in keywords, if any, in the order that they were found in - value, run the following steps.
- -Let keyword be the keyword.
If keyword is one of "copy",
- "move", or "link", then: run the following substeps:
If operation is still unspecified, then let operation be the string given by keyword.
Skip to the step labeled end of keyword below.
If keyword does not contain a U+003A COLON character (:), or if the - first such character in keyword is either the first character or the last - character in the string, then skip to the step labeled end of keyword below.
Let kind code be the substring of keyword from - the first character in the string to the last character in the string that is before the first - U+003A COLON character (:) in the string, converted to ASCII lowercase.
- -Jump to the appropriate step from the list below, based on the value of kind - code:
- -string"Let kind be Plain Unicode string.
- -file"Let kind be File.
- -Skip to the step labeled end of keyword below.
- -Let type be the substring of keyword from the - first character after the first U+003A COLON character (:) in the string, to the last character - in the string, converted to ASCII lowercase.
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 string is type, then let matched be true.
End of keyword: Go on to the next keyword, if any, or the next step in the - overall algorithm, if there are no more.
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 IDL attribute must
- reflect the content attribute of the same name.
The supported tokens for
- dropzone are the allowed values defined for the
- dropzone attribute that are supported by the user agent.
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 file:image/png file:image/gif file: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>
-
-