iT邦幫忙

0

[WEB][FRONT-END][CSS] 怎麼在拖動元素的時候維持變形的狀態?

  • 分享至 

  • xImage

HTML:

<div id='box'>
  <div id='item' draggable=true>item</div>
</div>

CSS:

#box{
  width: 200px;
  height: 200px;
  border: 5px solid black;
  padding: 3px;
}

#item {
  width: 40px;
  height: 40px;
  border: 5px solid royalblue;
/*   transform: skew(-30deg); */
  transform: rotate(30deg);
}

想請教 draggable 的元素如果有在 style 設定 transform, 要怎麼在拖動的時候讓正在被拖動的元素保持變形的樣式?

像下圖那樣 ... 一拖動時會跟著游標的元素就會失去變形的效果

https://ithelp.ithome.com.tw/upload/images/20220218/20107462NIBlQEjMbE.png

再包一層處理拖動。變型是變型,拖動是拖動
星空大你是正解,我後來是用這個方式處理,感謝~
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
居然解出來了
iT邦好手 1 級 ‧ 2022-02-18 09:01:29
最佳解答

可以試著用此範例嘗試

看更多先前的回應...收起先前的回應...

謝謝你的回答,我有想過如果解決不了的話就用這個方式來處理

原本問的情境是對屬性 draggable 為 true 的元素在拖動時產生的影子元素的處理方式,實際來說那個也不是元素,我不知道瀏覽器是用什麼方式去實作拖動時跟著滑鼠的圖案

我改了一下解答
你再試試,若不行那可能只能用原本的方法

謝謝~這篇我有看過,現今版本的瀏覽器有些他本來測試不行的辦法也都可以用了,除了做 transform 之外其他的樣式都是正常的
/images/emoticon/emoticon02.gif

那可能只剩下自己做影子的方式了...

1
Felix
iT邦研究生 2 級 ‧ 2022-02-18 02:14:12

拖曳效果就是元素本身的影子,只是透明度不同而已,但是兩者不可能同時擁有各自的樣式。

其實說是影子也怪怪的(但我也想不到其他稱呼,這個東西好像沒有專有名詞),拖的時候會把旁邊鄰近或重疊的圖像也一起複製下來,像是下圖這樣
https://ithelp.ithome.com.tw/upload/images/20220218/20107462Juee0awvdl.jpg

嚴格來說的確是不會同時有不同樣式,所以有蠻多trick可以改變拖動時的影子,draggable 的元素本身也有提供其他方式來改變那個影子例如顯示特定圖片之類的

我要發表回答

立即登入回答