Skip to content

Commit

Permalink
zh-cn: Format /web/api using Prettier (part 3) (#14676)
Browse files Browse the repository at this point in the history 
Co-authored-by: Allo <[email protected]>
  • Loading branch information
@queengooborg @yin1999
queengooborg and yin1999 authored Jul 29, 2023
1 parent 6cb0f57 commit 92e2223
Show file tree
Hide file tree
Showing 100 changed files with 1,183 additions and 978 deletions.
33 changes: 27 additions & 6 deletions files/zh-cn/web/api/datatransfer/dropeffect/index.md
View file
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
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
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
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
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

0 comments on commit 92e2223

Please sign in to comment.