javascript - Cyclejs 并通过 x 和 y 移动元素

Question

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

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

看来我错过了一些不好的东西。

一张动图胜过千言万语:

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 mouseUp 事件等待监听器留在了 div 元素上，所以您需要将 div 放在容器中。并将 mouseUp 监听器带到这个容器元素。例如容器可以是 body 元素。

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

我向您推荐 marble div 'user-selection': 'none' 的 css 样式。当您点击大理石时，这将停用选择模式。