React-dnd: Chrome의 녹색 λ”ν•˜κΈ° 기호

에 λ§Œλ“  2016λ…„ 03μ›” 18일  Β·  22μ½”λ©˜νŠΈ  Β·  좜처: react-dnd/react-dnd

λˆ„κ΅¬λ“ μ§€ Chromeμ—μ„œ λ“œλž˜κ·Έ μž‘μ—…μ„ μ‹œμž‘ν•  λ•Œ μΌμ‹œμ μœΌλ‘œ λ‚˜νƒ€λ‚˜λŠ” 녹색 λ”ν•˜κΈ° 기호λ₯Ό μ œκ±°ν•˜λŠ” 방법을 μ•Œμ•„ λƒˆμŠ΅λ‹ˆκΉŒ?

dnd quicktime player today at 8 24 18 pm

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

이것은 ν¬λ‘¬μ—μ„œ λ‚˜λ₯Ό μœ„ν•΄ μΌν–ˆμŠ΅λ‹ˆλ‹€. dataTransfer 객체에 μ•‘μ„ΈμŠ€ ν•  μˆ˜μžˆλŠ” μœ μΌν•œ μ΄λ²€νŠΈμ΄λ―€λ‘œ "dragstart"및 "dragend"μ΄λ²€νŠΈμ— λ„£μœΌμ‹­μ‹œμ˜€.

λͺ¨λ“  22 λŒ“κΈ€

+1

Mac의 Chrome 49 λ˜λŠ” Windows의 Chrome 49μ—μ„œμ΄ 문제λ₯Ό μž¬ν˜„ ν•  수 μ—†μŠ΅λ‹ˆλ‹€. http://gaearon.github.io/react-dnd/examples-drag-around-naive.html

아직도 이런 일이 μΌμ–΄λ‚˜κ³  μžˆμŠ΅λ‹ˆκΉŒ? μ‚¬μš©μ€‘μΈ Chrome 버전과 OSλŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?

λ˜ν•œ http://gaearon.github.io/react-dnd/examples-customize-drop-effects.html에 μ„€λͺ… λœλŒ€λ‘œ μ»€μ„œ λ™μž‘μ„ μ œμ–΄ ν•  수

Mac의 Chrome 49 (μ—¬μ „νžˆ 10.10)μ—μ„œ λͺ¨λ“  μ˜ˆμ œμ—μ„œ λ¬Έμ œκ°€ λ°œμƒν•©λ‹ˆλ‹€. λ“œλž˜κ·Έ μ‹œμž‘μ‹œ μ»€μ„œκ°€ 녹색 λ”ν•˜κΈ° 기호 (일반적으둜 cursor: copy ν‘œμ‹œλ¨)둜 λ³€κ²½λ©λ‹ˆλ‹€. 그러면 "이동"μ»€μ„œκ°€λ©λ‹ˆλ‹€.

@globexdesigns (Chrome 49, OSX 10.11)λ₯Ό μ—°κ²° ν•œ μ˜ˆμ œμ—μ„œμ΄ 문제λ₯Ό μ‚°λ°œμ μœΌλ‘œ μž¬ν˜„ ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ˜ˆμƒλŒ€λ‘œ μž‘λ™ν•˜κΈ° 전에

제 μƒκ°μ—λŠ” React의 일괄 λ Œλ”λ§μ£ΌκΈ°μ™€ λΈŒλΌμš°μ €μ˜ dnd κ΅¬ν˜„ (이 경우 μˆ˜μ •ν•  수 있음) μ‚¬μ΄μ˜ 짧은 μ§€μ—°μ΄κ±°λ‚˜ Chrome의 λ²„κ·Έμž…λ‹ˆλ‹€. λ‚˜λŠ” λ‹€λ₯Έ λΈŒλΌμš°μ € (λˆ„κ΅°κ°€ λ‚˜λ₯Ό 이기지 μ•ŠλŠ” ν•œ)λ₯Ό 가지고 λ†€λ©΄μ„œ κ±°κΈ°μ—μ„œ μž¬ν˜„μ„ 얻을 수 μžˆλŠ”μ§€ λ³Ό 것이닀.

Chrome 49 OSX 10.11.4μ—μ„œλ„ λ˜‘κ°™μ€ ν˜„μƒμ΄ λ‚˜νƒ€λ‚©λ‹ˆλ‹€. μž μ‹œ ν›„ μ •μƒμœΌλ‘œ λŒμ•„κ°‘λ‹ˆλ‹€. Safari λ˜λŠ” Firefoxμ—μ„œλŠ”μ΄ λ¬Έμ œκ°€ λ°œμƒν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

@EvNaverniouk μ €λŠ” Chrome 49 및 OS X 10.11.4λ₯Ό μ‚¬μš© 쀑이고 예, μ—¬μ „νžˆ λ¬Έμ œκ°€ ν‘œμ‹œλ˜λ©° 예, http://gaearon.github.io/react λ₯Ό μ°Έμ‘°ν•œμ΄ λ§ν¬μ—μ„œ μ˜ˆμƒ ν•  λ•Œ 볡사 볡사 μ•„μ΄μ½˜μ΄ ν‘œμ‹œλ©λ‹ˆλ‹€.

OS X 10.11.2의 Chrome 50μ—μ„œλ„μ΄ λ¬Έμ œκ°€ λ‚˜νƒ€λ‚©λ‹ˆλ‹€.

OS X 10.10.1μ—μ„œμ΄ Chrome 51도 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

OSX 10.11.4의 Chrome 버전 51μ—μ„œλ„μ΄ ν˜„μƒμ΄ λ‚˜νƒ€λ‚©λ‹ˆλ‹€.

νŽΈμ§‘ : λ“œλž˜κ·Έ λ ˆμ΄μ–΄λ₯Ό κ΅¬ν˜„ν•˜κ³  connectDragPreview 및 getEmptyImage ()λ₯Ό μ‚¬μš©ν•˜μ—¬ μ½”λ“œλ₯Ό μ˜¬λ°”λ₯΄κ²Œ ν¬ν•¨ν•˜λŠ” κΈ°λŠ₯을 μΆ”κ°€ ν•œ ν›„ λ¬Έμ œκ°€ ν•΄κ²° 된 것 κ°™μŠ΅λ‹ˆλ‹€.

λ‚˜λŠ” 이것을 React DnD와 λ‹€λ₯Έ λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œ λ¬΄μž‘μœ„λ‘œ λ³΄μ•˜κ³  심지어 μ›μ‹œ HTML5 λ“œλž˜κ·Έ κ°€λŠ₯ν•©λ‹ˆλ‹€. λ‚΄ 생각 μ—” 그것은 dragstartμ—μ„œ effectAllowed λ₯Ό μ„€μ •ν•˜μ§€ μ•ŠλŠ” 것과 관련이 μžˆμŠ΅λ‹ˆλ‹€.

이것에 λŒ€ν•œ μ—…λ°μ΄νŠΈκ°€ μžˆμŠ΅λ‹ˆκΉŒ? Chrome 53 OSX 10.10.5μ—μ„œ λ™μΌν•œ λ¬Έμ œμ— 직면

Chrome 54.0.2840.71 10.11.6κ³Ό λ™μΌν•œ λ‚΄μš©μ΄ ν‘œμ‹œλ˜λ©° μ—…λ°μ΄νŠΈκ°€ μžˆμŠ΅λ‹ˆκΉŒ?

+1

{dropEffect: 'copy'} μ‚¬μš©ν•˜λ©΄ λ¬Έμ œκ°€ κ°€λ €μ§‘λ‹ˆλ‹€ (녹색과 항상 보이게 함). ν•˜μ§€λ§Œ μ œλŒ€λ‘œ μˆ˜μ •ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

λ˜ν•œ {dropEffect: 'move'} μ»€μ„œκ°€ 4 점 μ‹­μžμ„ μœΌλ‘œ μ„±κ³΅μ μœΌλ‘œ λ§Œλ“€μ–΄μ§€μ§€ μ•ŠλŠ” 것 κ°™μŠ΅λ‹ˆλ‹€.

Chrome 버전 : 55.0.2883.95 (곡식 λΉŒλ“œ) (64 λΉ„νŠΈ)

이 라이브러리의 κΈ°λŠ₯이 μ•„λ‹Œ 것 같아이 문제λ₯Ό λ§ˆλ¬΄λ¦¬ν•©λ‹ˆλ‹€.

@fredguest에 λŒ€ν•œ 해결책을 찾은 적이 μžˆμŠ΅λ‹ˆκΉŒ?

@Yamikamisama μŠ¬ν”„κ²Œλ„ μ•„λ‹ˆ.

λ‚΄ canDrop ν•¨μˆ˜κ°€ falseλ₯Ό λ°˜ν™˜ ν•  λ•ŒκΉŒμ§€ 녹색 λ”ν•˜κΈ° λ²„νŠΌμ΄ ν‘œμ‹œλ˜μ§€ μ•Šκ³  λ‚˜νƒ€λ‚©λ‹ˆλ‹€.

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

이것은 ν¬λ‘¬μ—μ„œ λ‚˜λ₯Ό μœ„ν•΄ μΌν–ˆμŠ΅λ‹ˆλ‹€. dataTransfer 객체에 μ•‘μ„ΈμŠ€ ν•  μˆ˜μžˆλŠ” μœ μΌν•œ μ΄λ²€νŠΈμ΄λ―€λ‘œ "dragstart"및 "dragend"μ΄λ²€νŠΈμ— λ„£μœΌμ‹­μ‹œμ˜€.

이것은 λ‚˜λ₯Ό 돕지 μ•Šμ•˜λ‹€

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

cursor: 'grab' μ—μ„œ cursor: 'grabbing' μ‚¬μ΄μ˜ μž μ‹œ λ™μ•ˆ 만 λ°œμƒν•©λ‹ˆλ‹€.
λΆˆν–‰νžˆλ„ gif ν˜•μ‹μœΌλ‘œ ν‘œμ‹œλ˜μ§€ μ•Šμ§€λ§Œ gif μ•„λž˜μ˜ 그림은 문제λ₯Ό λ³΄μ—¬μ€λ‹ˆλ‹€.

greenplus

screen shot 2018-08-01 at 12 57 15 pm

이 λ¬Έμ œλ„ λ°œμƒν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. Chrome의 λ²„κ·Έμ²˜λŸΌ λ³΄μž…λ‹ˆλ‹€.

+1

+1 크둬 버전 84.0.4147.89

νŽΈμ§‘ : 이것은 미리보기 μ΄λ―Έμ§€κ°€μ—†λŠ” λ‹€μŒ μ½”λ“œλ₯Ό μ‚¬μš©ν•  λ•Œλ§Œ λ°œμƒν•©λ‹ˆλ‹€.

useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true });
  }, [preview]);

미리보기λ₯Ό κ΅¬ν˜„ν•˜λ©΄μ΄ λ¬Έμ œκ°€ ν•΄κ²°λ©λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰