Cyclejsとxとyで要素を動かす

Question

私はcyclejsを勉強し、div movabbleを作る方法に対処するにはいくつかの問題があります。起動するには

、私は目的がマップがダウンしているときの動きを生成することである私が

• マウスダウン
• のmouseup
• のMouseMove

を計算する必要が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とそれに入り、要素を動かすと、要素を上下に移動することができず、上下に移動することはできません。

私の2番目の問題は、私がマウスでブートンを離れるとき、私はそれに焦点を合わせるときに動き続けます。

私は悪い方法で何かを逃しているようです。

Answer 1

あなたの問題は、あなたが左にマウスを移動すると、あなたのマウスがdiv要素の外側にある、次のとおりです。

GIFは千の言葉がよいです。この問題は次のように解決できます。

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リスナーを渡します。たとえば、コンテナはボディエレメントです。

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

marble div 'user-selection'のCSSスタイルは「none」をお勧めします。大理石をクリックすると非アクティブな選択モードになります。