跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 前端大神来指点一下,如何实现鼠标拖动 div 就能更改其大小?
未分類
3 11 月 2020

前端大神来指点一下,如何实现鼠标拖动 div 就能更改其大小?

前端大神来指点一下,如何实现鼠标拖动 div 就能更改其大小?

資深大佬 : black11black 2

如题,自己三脚猫功夫,代码中若干环节需要求助。

需求是现有一个 div,里面装了一个 echarts 图表,我想要在 html 网页中能随时通过鼠标拖动来修改其图表的长宽大小。

echarts 本身有重新渲染功能,所以基本上只需要修改 div,剩下的 echarts 都会帮忙做好。

拖动部分感觉也不难实现,用clientY - offsetTop这种可以很轻易计算出鼠标相对左上角的位置。

目前遇到困难的是这个效果:

我用<hr/>画了一条水平分割线,我希望当鼠标移动到该分割线上方时,鼠标会变成上下箭头的样式(提示用户可以拖动),我不清楚这个是否可以通过纯 CSS 来实现,还是必须要经过 js 脚本,写成比如移入后触发,移出后取消这种感觉。另外网上搜到的资料是鼠标可以被替换成一张网络图片,但我想要的是默认的上下箭头,请问浏览器里有这种预设吗?否则的话如果我用笨方法截一张上下箭头的鼠标然后上传,那么 windows 用户也许还要,在其他操作系统中上下箭头长得都不一样的,显示图片的话会很违和。

求带佬指点一下,谢谢了。

大佬有話說 (2)

  • 資深大佬 : kaiki

    改变鼠标显示可以用 cursor

  • 主 資深大佬 : black11black

    贴个条:

    主题中的需求用 classname:hover {cursor:n-size} 实现了。

    但有个新的问题是,每次拖动以后鼠标会立即变成禁止符号,很怪啊

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具