2

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

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

  • 鼠标按下
  • mouseup
  • 鼠标移动

目的是在地图向下和鼠标移动时产生移动，并在鼠标向上时停止

这是我所拥有的：

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

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

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

一个 gif 比一千个单词更好：

在此处输入图像描述

4

1 回答 1

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')

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

于 2017-04-18T14:50:28.933 回答