微调可拖动 SVG 形状的位置,而无需更改 X
Fine tune position of draggable SVG shape without changing X?
我的项目的当前状态可以在jsFiddle上看到。
我想稍微按摩一下滑块的行为。
我正在寻找一种方法来轻推它们,以便 X 值从每个滑块的中心注册。
如您所见,滑块很好地设置了输入的值,但它们看起来/感觉有点不自然,因为 X 值是根据前缘而不是"中心质量"的。
将滑块尽可能向左移动感觉就像它停止了。尽可能向右移动它感觉就像它超越了它的边界。
我相信我可以想象一些非常讨厌的黑客,但我更喜欢更专业的:)
我的想法首先是CSS(我有点希望只是稍微推动一下),但到目前为止没有运气。
我现在的猜测是,它将归结为JS解决方案。
有什么想法/想法吗?
您可以通过变换调整位置,而无需更改 x 值。您所需要的只是添加transform
属性...
<rect id="rect_slider_knob"
class="slidable"
width="4%"
height="24%"
y="38%"
rx="2%"
ry="3%"
stroke="#666"
transform="translate(-6, 0)"
/>
您可以在此处查看演示:http://jsfiddle.net/mzmRN/
附言这是一个相当不错的小部件,所以我忍不住改善你的小提琴的交互,希望你不要介意!
相关文章:
- 通过拖动可以更改三维模型对象在Three.js场景中的位置
- 我如何获得“”的原始位置;ui“可拖动”;在“;drop”;事件
- javascript可拖动滑块,可在mouseUp上捕捉回中间位置
- 拖动&应用负位置时掉落
- jQuery拖动到相对位置的可排序列表中时出现可拖动辅助对象位置问题
- 将可拖动元素与从父项位置开始的网格对齐
- 谷歌地图api拖动路线再次回到原来的位置
- 拖动元素时,如何获取要替换的元素的位置
- 如何在javascript中基于谷歌地图上的位置拖动来更改值
- Mootools拖动完成后,获取元素的新位置
- 在放置之前找到拖动对象的位置
- 获取图像可见区域状态,以在画布中将图像设置在先前拖动的位置
- 如何在拖动时使项目恢复到其原始位置
- 微调可拖动 SVG 形状的位置,而无需更改 X
- 可拖动组,不会更改组中的节点位置
- JQuery 可拖动 - 防止网格对象移动到同一位置
- 在拖动/拖放事件上获取 Firefox 内容可编辑的拖放光标位置
- 同步两个可拖动元素的位置
- 跟踪鼠标相对于起始拖动位置HTML5,Ember
- 如何使用jquery在特定位置拖动元素