img标签属性draggable

属性draggable是HTML5中img标签新增的属性，用于指定图片是否可拖动。当该属性设置为true时，图片可以被用户拖动；当该属性设置为false时，图片不可被拖动。

相关问题:
1. draggable属性除了在img标签中使用，还可以在哪些标签中使用？
2. 如何通过JavaScript控制

相关问题

img标签的draggable在CSS中使用的代码示例

`draggable` 属性是 HTML 中的属性，它不能直接在 CSS 中使用。但是，我们可以使用 CSS 选择器来选中带有 `draggable` 属性的元素，并为其设置样式。

例如，我们可以使用以下 CSS 代码来为所有带有 `draggable` 属性的 `img` 元素设置禁止拖动的样式：

img[draggable="true"] {
  -webkit-user-drag: none; /* 禁止 Safari 中的拖拽 */
  user-drag: none; /* 禁止 Chrome 和 Firefox 中的拖拽 */
  -moz-user-select: none; /* 禁止 Firefox 中的选中文本 */
  -webkit-user-select: none; /* 禁止 Safari 和 Chrome 中的选中文本 */
  -ms-user-select: none; /* 禁止 IE 中的选中文本 */
  user-select: none; /* 禁止所有浏览器中的选中文本 */
}

此代码将选择所有 `draggable="true"` 的 `img` 元素，并为其设置禁止拖动和选中文本的样式。注意，不同浏览器对于禁止拖动和选中文本的 CSS 属性支持不一样，所以这里使用了多种属性来兼容不同的浏览器。

html img设置手势缩放

要在 HTML 的 img 标签中设置手势缩放，可以使用以下属性：

- `draggable="false"`：防止用户拖动图片
- `onload="this.setAttribute('draggable', 'false');"`: 防止用户在图片加载完成前拖动图片
- `style="touch-action: none;"`：禁止所有手势操作
- `style="pointer-events: none;"`：禁止所有鼠标事件

另外，如果你想允许用户缩放图片，可以使用 CSS 的 `transform` 属性来实现。例如：

img {
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.5s ease;
}

img:hover {
  transform: scale(1.2);
}

这段 CSS 代码会让图片在鼠标悬停时缩放到 1.2 倍大小。你可以根据需要调整缩放比例和过渡效果。