react-rnd icon indicating copy to clipboard operation
react-rnd copied to clipboard

How can I style the drag and resize

Open jackhts4 opened this issue 5 years ago • 2 comments

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

jackhts4 avatar Nov 01 '19 09:11 jackhts4

拖拽缩放的角标,样式默认是display: block;这在处理一些涉及边界的情况时会出现问题,比如可拖拽元素的父级div会有偏移。 解决办法时。为自定义的角标设置classNams,并且为其设置hover前后的display样式。

.qr-wrap { &:hover { .corner-item { display: block !important; } } .corner-item { display: none; } }

xiazhaohui avatar May 04 '23 09:05 xiazhaohui

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;
}

akwasin avatar Dec 03 '23 16:12 akwasin