Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

zh-cn: Format /web/api using Prettier (part 3) #14676

Merged
merged 2 commits into from
Jul 29, 2023
Merged

zh-cn: Format /web/api using Prettier (part 3) #14676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e7e7d3b
zh-cn: Format /web/api using Prettier (part 3)
queengooborg Jul 28, 2023
e7fbb25
add `-nolint` suffix to syntax code block
yin1999 Jul 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 27 additions & 6 deletions files/zh-cn/web/api/datatransfer/dropeffect/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,16 @@ dataTransfer.dropEffect;
```html
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the selection to move the element.
Select this element, drag it to the Drop Zone and then release the selection
to move the element.
</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
<div
id="target"
ondrop="drop_handler(event);"
ondragover="dragover_handler(event);">
Drop Zone
</div>
```

### CSS
Expand All @@ -71,7 +77,12 @@ div {

```js
function dragstart_handler(ev) {
console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
console.log(
"dragStart: dropEffect = " +
ev.dataTransfer.dropEffect +
" ; effectAllowed = " +
ev.dataTransfer.effectAllowed,
);

// Add this element's id to the drag payload so the drop handler will
// know which element to add to its tree
Expand All @@ -80,7 +91,12 @@ function dragstart_handler(ev) {
}

function drop_handler(ev) {
console.log("drop: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
console.log(
"drop: dropEffect = " +
ev.dataTransfer.dropEffect +
" ; effectAllowed = " +
ev.dataTransfer.effectAllowed,
);
ev.preventDefault();

// Get the id of the target and add the moved element to the target's DOM
Expand All @@ -89,10 +105,15 @@ function drop_handler(ev) {
}

function dragover_handler(ev) {
console.log("dragOver: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
console.log(
"dragOver: dropEffect = " +
ev.dataTransfer.dropEffect +
" ; effectAllowed = " +
ev.dataTransfer.effectAllowed,
);
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move"
ev.dataTransfer.dropEffect = "move";
}
```

Expand Down
31 changes: 17 additions & 14 deletions files/zh-cn/web/api/datatransfer/getdata/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,40 +37,43 @@ DOMString dataTransfer.getData(format);

```html
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span>
<span id="drag" draggable="true" ondragstart="drag(event)"
>drag me to the other box</span
>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
```

### CSS

```css
#div1, #div2 {
width:100px;
height:50px;
padding:10px;
border:1px solid #aaaaaa;
#div1,
#div2 {
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid #aaaaaa;
}
```

### JavaScript

```js
function allowDrop(allowdropevent) {
allowdropevent.target.style.color = 'blue';
allowdropevent.preventDefault();
allowdropevent.target.style.color = "blue";
allowdropevent.preventDefault();
}

function drag(dragevent) {
dragevent.dataTransfer.setData("text", dragevent.target.id);
dragevent.target.style.color = 'green';
dragevent.dataTransfer.setData("text", dragevent.target.id);
dragevent.target.style.color = "green";
}

function drop(dropevent) {
dropevent.preventDefault();
var data = dropevent.dataTransfer.getData("text");
dropevent.target.appendChild(document.getElementById(data));
document.getElementById("drag").style.color = 'black';
dropevent.preventDefault();
var data = dropevent.dataTransfer.getData("text");
dropevent.target.appendChild(document.getElementById(data));
document.getElementById("drag").style.color = "black";
}
```

Expand Down
112 changes: 58 additions & 54 deletions files/zh-cn/web/api/datatransfer/setdata/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,69 +35,73 @@ void dataTransfer.setData(format, data);
此示例显示了使用 {{domxref("DataTransfer")}} 对象的 {{domxref("DataTransfer.getData","getData()")}}, {{domxref("DataTransfer.setData","setData()")}} }和{{domxref("DataTransfer.clearData","clearData()")}} 方法。

```html
<!DOCTYPE html>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8" />
<title>DataTransfer.setData()/.getData()/.clearData()</title>
<style>
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
</style>
</head>
<body>
</head>
<body>
<section>
<h1>
<code>DataTransfer.setData()</code> <br>
<code>DataTransfer.getData()</code> <br>
<code>DataTransfer.clearData()</code>
</h1>
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the selection to move the element.
</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
Drop Zone
</div>
<h1>
<code>DataTransfer.setData()</code> <br />
<code>DataTransfer.getData()</code> <br />
<code>DataTransfer.clearData()</code>
</h1>
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the
selection to move the element.
</p>
</div>
<div
id="target"
ondrop="drop_handler(event);"
ondragover="dragover_handler(event);">
Drop Zone
</div>
</section>
<!-- js -->
<script>
function dragstart_handler(ev) {
console.log("dragStart");
// Change the source element's background color to signify drag has started
ev.currentTarget.style.border = "dashed";
// Set the drag's format and data. Use the event target's id for the data
ev.dataTransfer.setData("text/plain", ev.target.id);
}
function dragover_handler(ev) {
console.log("dragOver");
// prevent Default event
ev.preventDefault();
}
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
// Get the data, which is the id of the drop target
var data = ev.dataTransfer.getData("text");
// appendChild
ev.target.appendChild(document.getElementById(data));
// Clear the drag data cache (for all formats/types)
ev.dataTransfer.clearData();
}
function dragstart_handler(ev) {
console.log("dragStart");
// Change the source element's background color to signify drag has started
ev.currentTarget.style.border = "dashed";
// Set the drag's format and data. Use the event target's id for the data
ev.dataTransfer.setData("text/plain", ev.target.id);
}
function dragover_handler(ev) {
console.log("dragOver");
// prevent Default event
ev.preventDefault();
}
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
// Get the data, which is the id of the drop target
var data = ev.dataTransfer.getData("text");
// appendChild
ev.target.appendChild(document.getElementById(data));
// Clear the drag data cache (for all formats/types)
ev.dataTransfer.clearData();
}
</script>
</body>
</body>
</html>
```

Expand Down
34 changes: 24 additions & 10 deletions files/zh-cn/web/api/datatransfer/types/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ dataTransfer.types;
这个例子展示 `types` 和 {{domxref("DataTransfer.items","items")}} 属性的用法

```html
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<title>Examples of DataTransfer.{types,items} properties</title>
<meta content="width=device-width">
<meta content="width=device-width" />
<style>
div {
margin: 0em;
Expand Down Expand Up @@ -56,30 +56,44 @@ dataTransfer.types;
ev.target.appendChild(document.getElementById(data));
// Print each format type
for (let i=0; i < ev.dataTransfer.types.length; i++) {
for (let i = 0; i < ev.dataTransfer.types.length; i++) {
console.log(`… types[${i}] = ${ev.dataTransfer.types[i]}`);
}
// Print each item's "kind" and "type"
for (let i=0; i < ev.dataTransfer.items.length; i++) {
console.log(`… items[${i}].kind = ${ev.dataTransfer.items[i].kind}; type = ${ev.dataTransfer.items[i].type}`);
for (let i = 0; i < ev.dataTransfer.items.length; i++) {
console.log(
`… items[${i}].kind = ${ev.dataTransfer.items[i].kind}; type = ${ev.dataTransfer.items[i].type}`,
);
}
}
function dragover_handler(ev) {
console.log("dragOver");
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move"
ev.dataTransfer.dropEffect = "move";
}
</script>
<body>
<h1>Examples of <code>DataTransfer</code>.{<code>types</code>, <code>items</code>} properties</h1>
<h1>
Examples of <code>DataTransfer</code>.{<code>types</code>,
<code>items</code>} properties
</h1>
<ul>
<li id="i1" ondragstart="dragstart_handler(event);" draggable="true">Drag Item 1 to the Drop Zone</li>
<li id="i2" ondragstart="dragstart_handler(event);" draggable="true">Drag Item 2 to the Drop Zone</li>
<li id="i1" ondragstart="dragstart_handler(event);" draggable="true">
Drag Item 1 to the Drop Zone
</li>
<li id="i2" ondragstart="dragstart_handler(event);" draggable="true">
Drag Item 2 to the Drop Zone
</li>
</ul>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
<div
id="target"
ondrop="drop_handler(event);"
ondragover="dragover_handler(event);">
Drop Zone
</div>
</body>
</html>
```
Expand Down
49 changes: 24 additions & 25 deletions files/zh-cn/web/api/datatransferitem/getasfile/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,31 +28,30 @@ _无。_

```js
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
var data = event.dataTransfer.items;
for (var i = 0; i < data.length; i += 1) {
if ((data[i].kind == 'string') &&
(data[i].type.match('^text/plain'))) {
// 遍历拖拽项的内容
data[i].getAsString(function (s){
ev.target.appendChild(document.getElementById(s));
});
} else if ((data[i].kind == 'string') &&
(data[i].type.match('^text/html'))) {
// 拖拽项的数据是 HTML
console.log("... Drop: HTML");
} else if ((data[i].kind == 'string') &&
(data[i].type.match('^text/uri-list'))) {
// 拖拽项的数据是 URI
console.log("... Drop: URI");
} else if ((data[i].kind == 'file') &&
(data[i].type.match('^image/'))) {
// 拖拽项的数据是一个图片
var f = data[i].getAsFile();
console.log("... Drop: File ");
}
}
console.log("Drop");
ev.preventDefault();
var data = event.dataTransfer.items;
for (var i = 0; i < data.length; i += 1) {
if (data[i].kind == "string" && data[i].type.match("^text/plain")) {
// 遍历拖拽项的内容
data[i].getAsString(function (s) {
ev.target.appendChild(document.getElementById(s));
});
} else if (data[i].kind == "string" && data[i].type.match("^text/html")) {
// 拖拽项的数据是 HTML
console.log("... Drop: HTML");
} else if (
data[i].kind == "string" &&
data[i].type.match("^text/uri-list")
) {
// 拖拽项的数据是 URI
console.log("... Drop: URI");
} else if (data[i].kind == "file" && data[i].type.match("^image/")) {
// 拖拽项的数据是一个图片
var f = data[i].getAsFile();
console.log("... Drop: File ");
}
}
}
```

Expand Down
Loading