Cyclejs 및 x 및 y로 요소 이동

Question

나는 cyclejs 공부하고 div mobabble 만드는 방법을 다루는 몇 가지 문제가 있습니다.

, 나는 내가 계산해야 3 개 이벤트를 격리했다 시작하려면

• mousedown
• 와 mouseUp 목표는지도가 다운되었을 때 이동을 생산하는 것입니다

MouseMove 이벤트 및 마우스를 올리면 마우스가 멈 춥니 다.

다음은 내가 가지고있는 것입니다 :

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 및 it에 입력하고 요소를 이동하면 요소를 위아래로 이동하지 않고 아래로 이동하고 오른쪽으로 이동할 수 있습니다.

내 두 번째 문제점은 내 마우스로 부천을 떠날 때, 내가 다시 초점을 맞출 때 계속 움직이는 것입니다.

나는 나쁜 것을 놓치고있는 것 같습니다. 당신이 왼쪽으로 마우스를 이동할 때

Answer 1

귀하의 문제는, 마우스 사업부의 외부입니다 :

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 수신기를이 컨테이너 요소로 가져옵니다. 예를 들어 container는 body 요소가 될 수 있습니다.

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

대리석 div 'user-selection'에 대한 CSS 스타일을 '없음'이라고 권장합니다. 대리석을 클릭하면 비활성 선택 모드가됩니다.