drag 改变光标样式
时间: 2023-07-20 16:05:49 浏览: 48
可以使用CSS的`cursor`属性来改变光标的样式。例如,将光标变为可拖拽的样式可以这样写:
```css
.drag {
cursor: move;
}
```
在HTML中,只需要将需要应用该样式的元素添加`drag`类名即可:
```html
<div class="drag">可以拖拽的元素</div>
```
除了`move`样式外,还有其它很多光标样式可供选择,如`pointer`(手型)、`text`(文本型)等等。
相关问题
dragstart 改变光标样式
是的,`dragstart` 事件可以用来启动拖放操作。在该事件中,你可以改变鼠标光标的样式,以表示正在进行拖放操作。可以使用 CSS 的 `cursor` 属性来实现,例如设置为 `move` 表示正在移动对象,设置为 `copy` 表示正在复制对象。示例代码如下:
```html
<div draggable="true" ondragstart="drag(event)">拖动我</div>
<script>
function drag(event) {
// 改变鼠标光标样式
event.dataTransfer.effectAllowed = "move";
event.currentTarget.style.cursor = "move";
// 其他操作...
}
</script>
```
注意,`dragstart` 事件必须在拖动元素上设置,并且需要将 `draggable` 属性设置为 `true` 才会触发。另外,在 `dragend` 事件中也应该重置鼠标光标的样式,以确保拖放操作结束后恢复正常的光标样式。
AngularJS 动态改变 Drag 的大小
要实现 AngularJS 动态改变 Drag 的大小,可以使用 ng-style 指令来绑定一个对象来设置 Drag 元素的大小。这个对象可以根据用户的拖拽操作来动态改变。
首先,需要在 Drag 元素上添加一个 ng-style 指令,并将其绑定到一个对象上,例如:
```html
<div class="drag" ng-style="dragStyle"></div>
```
然后,在控制器中定义 dragStyle 对象,并根据用户的拖拽操作来动态改变它的值。例如:
```javascript
app.controller('DragController', function($scope) {
$scope.dragStyle = {
width: '100px',
height: '100px'
};
$scope.onDrag = function(event) {
$scope.dragStyle.width = event.clientX + 'px';
$scope.dragStyle.height = event.clientY + 'px';
};
});
```
在这个例子中,dragStyle 对象的初始值为一个固定的宽度和高度。然后,定义一个 onDrag 函数来处理用户的拖拽操作。当用户拖拽 Drag 元素时,onDrag 函数将根据鼠标的位置来动态改变 dragStyle 对象的值。
最后,需要在 Drag 元素上添加一个 ng-mousedown 指令来触发拖拽操作,并将它绑定到 onDrag 函数上。例如:
```html
<div class="drag" ng-style="dragStyle" ng-mousedown="onDrag($event)"></div>
```
这样,当用户按下鼠标并拖拽 Drag 元素时,dragStyle 对象会根据鼠标位置动态改变,从而实现了 AngularJS 动态改变 Drag 的大小。