Cyclejs并通过x和y移动元素

Question

我正在研究cyclejs并且在处理如何使div运动时遇到一些麻烦。

首先，我已经分离了3个我必须计算的事件

• 鼠标按下
• 鼠标松开
• 鼠标移动

目标是在地图停止和鼠标移动时产生移动，在鼠标移动时停止

这就是我所拥有的：

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以及它并移动元素时，我只能将元素向下和向右移动，而不是向上和向左移动。

我的第二个问题是，当我用鼠标离开bouton时，当我重新聚焦它时，它会继续移动。

似乎我错过了一些不好的东西。

gif比千言万语更好：

Answer 1

问题是，当您将鼠标向左移动时，鼠标位于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元素上留下了div mouseUp事件等待侦听器，所以您需要将div放在容器上。并将mouseUp监听器带到此容器元素。例如，容器可以是body元素。

const marbleUp$ = DOMSources.select('body').events('mouseup')

我向你推荐css风格的大理石div＆＃39;用户选择＆＃39;没有＆＃39;。当您单击大理石时，这将是无效选择模式。