react-rnd
react-rnd copied to clipboard
How can I style the drag and resize
I would like to let it drag without the 'move' mouse cursor, And would like to let it only to resize in the bottom right corner, while it cannot be resized in other direction
拖拽缩放的角标,样式默认是display: block;这在处理一些涉及边界的情况时会出现问题,比如可拖拽元素的父级div会有偏移。 解决办法时。为自定义的角标设置classNams,并且为其设置hover前后的display样式。
.qr-wrap { &:hover { .corner-item { display: block !important; } } .corner-item { display: none; } }
Example: add shade to draggable item
.react-draggable {
webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
}
Add border on hover (desktop only)
.react-draggable:hover {
cursor: move;
border: 1px solid greenyellow;
}