Skip to content

Commit

Permalink
zh-cn: Format /web/api using Prettier (part 3)
Browse files Browse the repository at this point in the history
  • Loading branch information
@queengooborg
queengooborg committed Jul 28, 2023
1 parent 09c0ef4 commit e7e7d3b
Show file tree
Hide file tree
Showing 100 changed files with 1,177 additions and 974 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 e7e7d3b

Please sign in to comment.