我正在研究 cyclejs,但在处理如何使 div 移动时遇到了一些麻烦。
首先,我隔离了 3 个我必须计算的事件
- 鼠标按下
- 鼠标弹起
- 鼠标移动
目的是在 map 按下和鼠标移动时产生移动,并在我鼠标弹起时停止
这是我得到的:
import {div} from '@cycle/dom'
import xs from 'xstream'
const getStyle = left => top => {
return ({
style: {
position: 'absolute',
left: left + 'px',
top: top + 'px',
backgroundColor: '#FF0000',
cursor: 'pointer'
}
})
}
function intent(DOMSources) {
const marble$ = DOMSources.select('.marble')
const marbleDown$ = marble$.events('mousedown')
const marbleMove$ = marble$.events('mousemove')
const marbleUp$ = marble$.events('mouseup')
return {marbleDown$, marbleUp$, marbleMove$}
}
function model({marbleDown$, marbleUp$, marbleMove$}) {
return xs.combine(marbleDown$, marbleMove$)
.map(([marbleDown, marbleMove]) => marbleMove)
.map(ev => ({x: ev.pageX, y: ev.pageY}))
.endWhen(marbleUp$)
}
function view(state$) {
return state$
.startWith({x: 0, y: 0})
.map(value => div('.marble', getStyle(value.x)(value.y), 'Move me ! ' + value.x + ' - ' + value.y))
}
export function Marble(sources) {
const changes$ = intent(sources.DOM)
const state$ = model(changes$)
const vTree$ = view(state$)
return {DOM: vTree$}
}
我的问题好像出现在模型部分。当我输入 div 和 mousedown 以及它并移动元素时,我只能将元素向下和向右移动,而不能向上和向左移动。
我的第二个问题是,当我用鼠标离开按钮时,当我重新聚焦它时它会继续移动。
看来我错过了一些不好的东西。
一张动图胜过千言万语:
最佳答案
你的问题是,当你向左移动鼠标时,你的鼠标在 div 之外。你可以这样解决这个问题:
function between(first, second) {
return (source) => first.mapTo(source.endWhen(second)).flatten()
}
function model({marbleDown$, marbleUp$, marbleMove$}) {
return xs.combine(marbleDown$, marbleMove$)
.map(([marbleDown, marbleMove]) => ({x: marbleMove.pageX - marbleDown.layerX, y: marbleMove.pageY - marbleDown.layerY}))
.compose(between(marbleDown$, marbleUp$))
}
但是你会遇到 mouseUp 事件的问题。因为您将 div mouseUp 事件等待监听器留在了 div 元素上,所以您需要将 div 放在容器中。并将 mouseUp 监听器带到这个容器元素。例如容器可以是 body 元素。
const marbleUp$ = DOMSources.select('body').events('mouseup')
我向您推荐 marble div 'user-selection': 'none' 的 css 样式。当您点击大理石时,这将停用选择模式。
关于javascript - Cyclejs 并通过 x 和 y 移动元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43470853/