Skip to content

D
Docs

Coping0606 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 1
Fork 0
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 23a9382f 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!5206 翻译完成 4324：drag事件支持dataTransfer 

Merge pull request !5206 from ester.zhou/TR-4324
上级 ac76fe37 6f3471ef
隐藏空白更改
内联 并排
Showing with 194 addition and 49 deletion
en/application-dev/reference/arkui-js/js-components-common-events.md
浏览文件 @ 23a9382f
# Universal Events
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> Universal events are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**<br>
> Universal events are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
## Event Description
......@@ -13,47 +13,49 @@
Different from private events, universal events can be bound to most components.
| Name | Parameter | Name | Support Bubbling |
| ------------------------ | ---------- | ---------------------------------------- | -------------- |
| touchstart | TouchEvent | Triggered when the tapping starts.<br>> **Note**: For details about **TouchEvent**, see Table 2.| Yes<sup>5+</sup>|
| touchmove | TouchEvent | Triggered when the tapping moves. | Yes<sup>5+</sup>|
| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes<sup>5+</sup>|
| touchend | TouchEvent | Triggered when the tapping ends. | Yes<sup>5+</sup>|
| click | - | Triggered when a component is clicked. | Yes<sup>6+</sup>|
| doubleclick<sup>7+</sup> | - | Triggered when a component is double-clicked. | No<br>**Note**: Bubbling is supported since API version 9.|
| longpress | - | Triggered when a component is long pressed. | No<br>**Note**: Bubbling is supported since API version 9.|
| swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on a component.<br>> **Note**: For details about **SwipeEvent**, see Table 6.| No<br>**Note**: Bubbling is supported since API version 9.|
| attached<sup>6+</sup> | - | Triggered after the current component node is mounted to the render tree. | No |
| detached<sup>6+</sup> | - | Triggered when the current component node is removed from the render tree. | No |
| pinchstart<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is started.<br>> **Note**: For details about **PinchEvent**, see Table 7.| No |
| pinchupdate<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is in progress. | No |
| pinchend<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is ended. | No |
| pinchcancel<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is interrupted. | No |
| dragstart<sup>7+</sup> | DragEvent | Triggered when dragging starts.<br>> **Note**: For details about **DragEvent**, see Table 8 .| No |
| drag<sup>7+</sup> | DragEvent | Triggered when dragging is in progress. | No |
| dragend<sup>7+</sup> | DragEvent | Triggered when dragging is ended. | No |
| dragenter<sup>7+</sup> | DragEvent | Triggered when the dragged component enters a drop target. | No |
| dragover<sup>7+</sup> | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No |
| dragleave<sup>7+</sup> | DragEvent | Triggered when the dragged component leaves a drop target. | No |
| drop<sup>7+</sup> | DragEvent | Triggered when the dragged component is dropped on a drop target. | No |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> Events not listed in the preceding table are non-bubbling events, such as the [change event](../arkui-js/js-components-basic-input.md#events). For details, see the specific component.
| Name | Parameter | Description | Support Bubbling |
| ------------------------ | ---------- | ---------------------------------------- | ---------------------------------------- |
| touchstart | TouchEvent | Triggered when the tapping starts. For details about **TouchEvent**, see Table 2. | Yes<sup>5+</sup> |
| touchmove | TouchEvent | Triggered when the tapping moves. | Yes<sup>5+</sup> |
| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes<sup>5+</sup> |
| touchend | TouchEvent | Triggered when the tapping ends. | Yes<sup>5+</sup> |
| click | - | Triggered when a component is clicked. | Yes<sup>6+</sup> |
| doubleclick<sup>7+</sup> | - | Triggered when a component is double-clicked. | No<br>Bubbling is supported since API version 9. |
| longpress | - | Triggered when a component is long pressed. | No<br>Bubbling is supported since API version 9.|
| swipe<sup>5+</sup> | SwipeEvent | Triggered when a user quickly swipes on a component.<br/>For details about **SwipeEvent**, see Table 4. | No<br>Bubbling is supported since API version 9.|
| attached<sup>6+</sup> | - | Triggered after the current component node is mounted to the render tree. | No |
| detached<sup>6+</sup> | - | Triggered when the current component node is removed from the render tree. | No |
| pinchstart<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is started.<br>For details about **PinchEvent**, see Table 5.| No |
| pinchupdate<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is in progress. | No |
| pinchend<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is ended. | No |
| pinchcancel<sup>7+</sup> | PinchEvent | Triggered when a pinch operation is interrupted. | No |
| dragstart<sup>7+</sup> | DragEvent | Triggered when dragging starts.<br>For details about **DragEvent**, see Table 6. | No |
| drag<sup>7+</sup> | DragEvent | Triggered when dragging is in progress. | No |
| dragend<sup>7+</sup> | DragEvent | Triggered when dragging is ended. | No |
| dragenter<sup>7+</sup> | DragEvent | Triggered when the dragged component enters a drop target. | No |
| dragover<sup>7+</sup> | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No |
| dragleave<sup>7+</sup> | DragEvent | Triggered when the dragged component leaves a drop target. | No |
| drop<sup>7+</sup> | DragEvent | Triggered when the dragged component is dropped on a drop target. | No |
> **NOTE**<br>
> Events not listed in the preceding table do not support bubbling, such as the [change event](../arkui-js/js-components-basic-input.md#events) of the **<input\>** component. For details, see the description of the specific component.
**Table 1** BaseEvent
| Attribute | Type | Description |
| --------- | ------ | --------------------------- |
| type | string | Event type, such as **click** and **longpress**.|
| timestamp | number | Timestamp when the event is triggered. |
| Attribute | Type | Description |
| --------------------- | -------------------- | --------------------------- |
| type | string | Event type, such as **click** and **longpress**.|
| timestamp | number | Timestamp when the event is triggered. |
| deviceId<sup>6+</sup> | number | ID of the device that triggers the event. |
| target<sup>6+</sup> | [Target](#target6)| Target object that triggers the event. |
**Table 2** TouchEvent (inherited from BaseEvent)
| Attribute | Type | Description |
| -------------- | ---------------------- | ---------------------------------------- |
| touches | Array&lt;TouchInfo&gt; | Attribute set of the touch event, including the information array of the touch points on the screen. |
| changedTouches | Array&lt;TouchInfo&gt; | Attribute set when a touch event occurs, including the information array of changed touch points on the screen. **changedTouches** has the same data format as **touches** and indicates touch point changes, such as from no touch point to newly generated touch points, from some touch points to no touch point, and location changes. For example, when the user's finger leaves the touchscreen, no data exists in the **touches** array, but **changedTouches** will save the generated data.|
| changedTouches | Array&lt;TouchInfo&gt; | Attribute set when a touch event occurs, including the information array of changed touch points on the screen. **changedTouches** has the same data format as **touches** and indicates touch point changes, including changes in the number and location of touch points. For example, when the user's finger leaves the screen, which means that the number of touch points changes from 1 to 0, **changedTouches** has the relevant data generated, but not **touches**.|
**Table 3** TouchInfo
......@@ -70,7 +72,7 @@ Different from private events, universal events can be bound to most components.
| Attribute | Type | Description |
| --------------------- | ------ | ---------------------------------------- |
| direction | string | Swiping direction. The value can be one of the following:<br>1. **left**: Swipe from right to left.<br>2. **right**: Swipe from left to right.<br>3. **up**: Swipe upwards.<br>4. **down**: Swipe downwards.|
| direction | string | Swiping direction. The value can be one of the following:<br>- **left**: Swipe left.<br>- **right**: Swipe right.<br>- **up**: Swipe up.<br>- **down**: Swipe down.|
| distance<sup>6+</sup> | number | Swiping distance in the swiping direction. |
**Table 5** PinchEvent<sup>7+</sup>
......@@ -83,34 +85,33 @@ Different from private events, universal events can be bound to most components.
**Table 6** DragEvent<sup>7+</sup> (inherited from BaseEvent)
| Attribute | Type | Description |
| --------- | ------ | ---------------- |
| type | string | Event name. |
| globalX | number | Horizontal distance from the upper left corner of the screen, which acts as the origin of coordinates.|
| globalY | number | Vertical distance from the upper left corner of the screen, which acts as the origin of coordinates.|
| timestamp | number | Timestamp. |
| Attribute | Type | Description |
| ------------------------- | -------------------------------- | ---------------- |
| type | string | Event name. |
| globalX | number | Horizontal distance from the upper left corner of the screen, which acts as the origin of coordinates.|
| globalY | number | Vertical distance from the upper left corner of the screen, which acts as the origin of coordinates.|
| timestamp | number | Timestamp. |
| dataTransfer<sup>9+</sup> | [DataTransfer](#datatransfer9)| Object for data transfer. |
## Event Object
## Target<sup>6+</sup>
When a component triggers an event, the event callback receives an event object by default. You can obtain the corresponding information through the event object.
**target object**
| Attribute | Type | Description |
| -------------------- | ------ | ---------------------------------------- |
| dataSet<sup>6+</sup> | Object | Custom attribute set defined through [data-*](../arkui-js/js-components-common-attributes.md).|
**Example**
```
```html
<!-- xxx.hml -->
<div>
<div data-a="dataA" data-b="dataB"
style="width: 100%; height: 50%; background-color: saddlebrown;"@touchstart='touchstartfunc'></div>
</div>
```
```
```js
// xxx.js
export default {
touchstartfunc(msg) {
......@@ -119,3 +120,147 @@ export default {
}
}
```
## DataTransfer<sup>9+</sup>
Use **dataTransfer** to transfer data during the drag operation, so you can perform operations on the data when the drag operation is complete.
### setData<sup>9+</sup>
setData(key: string, value: object): boolean
Sets the data associated with the specified key. If there is no data associated with the key, the data will be appended. If there is already data associated with the key, the data will replace the existing data in the same position.
**Parameters**
| Name | Type | Mandatory | Name |
| ----- | ------ | ---- | ------- |
| key | string | Yes | Data key. |
| value | object | Yes | Data to be stored.|
**Return value**
| Type | Description |
| ------- | ------------------------ |
| boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.|
**Example**
```js
// value in setData can be of a primitive type.
dragStart(e) {
var isSetOk = e.dataTransfer.setData('name', 1);
},
// value in setData can be of the object type.
dragStart(e) {
var person = new Object();
person.name = "tom";
person.age = 21;
var isSetOk = e.dataTransfer.setData('person', person);
}
```
### getData<sup>9+</sup>
getData(key: string): object
Obtains the data associated with the specified key. If no data is associated with the key, an empty string will be returned.
**Parameters**
| Name | Type | Mandatory | Name |
| ---- | ------ | ---- | ----- |
| key | string | Yes | Data key.|
**Return value**
| Type | Description |
| ------ | ------ |
| object | Obtained data.|
**Example**
```js
dragStart(e) {
var person = new Object();
person.name = "tom";
person.age = 21;
e.dataTransfer.setData('person', person);
},
dragEnd(e){
var person = e.dataTransfer.getData('person');
},
```
### clearData<sup>9+</sup>
clearData(key?: string): boolean
Deletes data associated with the specified key. If there is no data associated with the key, this API will not have any effect.
If the key is null, all data will be deleted.
**Parameters**
| Name | Type | Mandatory | Name |
| ---- | ------ | ---- | ----- |
| key | string | No | Data key.|
**Return value**
| Type | Description |
| ------- | ------------------------ |
| boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.|
**Example**
```js
dragEnd(e) {
var isSuccess = e.dataTransfer.clearData('name');
}
```
### setDragImage<sup>9+</sup>
setDragImage(pixelmap: PixelMap, offsetX: number,offsetY: number): boolean
Sets a custom drag image.
**Parameters**
| Name | Type | Mandatory | Name |
| -------- | -------- | ---- | ---------------------------------------- |
| pixelmap | PixelMap | Yes | Image transferred from the frontend. For details, see [PixelMap](../apis/js-apis-image.md#pixelmap7).|
| offsetX | number | Yes | Horizontal offset relative to the image. |
| offsetY | number | Yes | Vertical offset relative to the image. |
**Return value**
| Type | Description |
| ---- | ------------------------ |
| bool | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.|
**Example**
```js
createPixelMap() {
let color = new ArrayBuffer(4*96*96);
var buffer = new Uint8Array(color);
for (var i = 0; i < buffer.length; i++) {
buffer[i] = (i + 1) % 255;
}
let opts = {
alphaType:0,
editable:true,
pixelFormat:4,
scaleMode:1,
size:{height:96,width:96}
}
const promise = image.createPixelMap(color,opts);
promise.then((data)=> {
console.error('-create pixmap has info message:' + JSON.stringify(data));
this.pixelMap = data;
this.pixelMapReader = data;
})
},
onInit() {
this.createPixelMap
},
dragStart(e) {
e.dataTransfer.setDragImage(this.pixelMapReader, 50, 50);
}
```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或