React-dnd: Draggable घटक के अंदर आदानों और textareas के साथ समस्या

यह selectstart इवेंट के पंजीकरण के कारण होता है, जो जाहिरा तौर पर केवल IE संगतता के लिए आवश्यक है।
अगर मेरी तरह आपको IE संगतता की आवश्यकता नहीं है, तो यहां मेरा त्वरित समाधान था जो आपके लिए काम कर सकता है:
https://github.com/dperetti/react-dnd/commit/06f74ef97e07a9a24c10eab8593f3e2121d4f2ed

रिपोर्टिंग के लिए धन्यवाद! मुझे यह तय करते हुए पीआर स्वीकार करने में खुशी हो रही है।

मेरी दो आवश्यकताएं हैं:

• यह अभी भी है कि IE ठीक करने की जरूरत है।
• कृपया सत्यापित करें कि क्या अन्य ब्राउज़रों के लिए preventDefault() की आवश्यकता है। मुझे लगता है कि आपने जो भी खींचने की कोशिश की थी, वह पाठ चयन को रोकता है। यदि यह वास्तव में अन्य ब्राउज़रों में अवांछित चयन को रोकने में मदद करता है, तो आप e.preventDefault() को कुछ चेक के साथ la e.target.tagName !== 'input' (लेकिन अधिक होशियार) के रूप में घेरना चाह सकते हैं।

<div contentEditable={isEditing} /> साथ एक ही बग।
इसके अलावा मैं इसे संपादित नहीं कर सकता। Ctrl+A और Shift + Arrows काम नहीं करता है।

अगले तीन हफ्तों में मैं व्यस्त रहने वाला हूं और मेरे पास इसे ठीक करने का समय नहीं है।
जैसा कि मैंने कहा कि मुझे https://github.com/gaearon/react-dnd/issues/178#issuecomment -108110202 में वर्णित एक फिक्स के साथ एक पीआर को स्वीकार करने में खुशी हो रही है।

में देख रहा था। अगर मैं पूरे handleSelectStart फ़ंक्शन के शरीर पर टिप्पणी करता हूं, तो सब कुछ अपेक्षित रूप से काम करता है। IE11 में यह परीक्षण किया गया है और वहां भी अच्छा लगता है।

@ अगर आप जानते हैं कि घटना के लिए विशिष्ट उपयोग का मामला या सेटअप क्यों है तो घटना को कैसे नियंत्रित किया जाना चाहिए? IE10? एक ड्रैगेबल नोड में textarea / input से अलग सेटअप? मुझे पाठ चयन के मुद्दे नहीं मिलते हैं, और मुझे आश्चर्य है कि यदि आवश्यक हो तो CSS user-select इस पर preventDefault काम करता है।

मूल मुद्दा https://github.com/gaearon/react-dnd/issues/128 था
यदि आप एक PR तैयार कर सकते हैं जो समस्या को ठीक करता है, लेकिन https://github.com/gaearon/react-dnd/issues/128 को भी काम करता है, तो यह बहुत बड़ी मदद होगी।

देखूंगा कि क्या मैं इस पर गौर कर सकता हूं। IE9 के लिए एक साधारण परीक्षण केस सेट करने का तरीका जानने की जरूरत है।

मुझे लगता है कि # 128 तय होने से पहले IE9 पर sortable-simple उदाहरण विफल हो गया।

@gaearon हाँ का उपयोग करने के लिए एक अच्छा उदाहरण था, धन्यवाद। कुछ नोट:

1. कोई अन्य ब्राउज़र (परीक्षण किए गए नवीनतम Chrome, Safari, FF और IE 11) इसकी परवाह नहीं करते हैं। घटना को जो भी नियंत्रित करने की आवश्यकता नहीं है।
2. IE9 केवल _need_ e.target.dragDrop() कॉल के लिए प्रकट होता है। पाठ चयन को अक्षम करना एक ऐसे हैंडल को बनाकर किया जा सकता है जो पूरे ड्रैगेबल को कवर करता है, ड्रैगेबल नोड को connectDragPreview में हैंडल करता है और connectDragSource में हैंडल को संभालता है। हालांकि यह बुरा लग सकता है, AFAIK आप आधिकारिक तौर पर IE9 का समर्थन नहीं कर रहे हैं ताकि एक उचित समाधान हो, खासकर जब उस ब्राउज़र में अन्य समस्याएं उत्पन्न होने की संभावना हो?
3. बिंदु संख्या दो वैसे भी उपयोगी है जब आपके पास ड्रैगेबल के भीतर एक पाठ इनपुट होता है। उपयोगकर्ता अपने चूहों को खींचकर पाठ का चयन नहीं कर सकते हैं यदि connectDragSource पूरे नोड को लागू किया जाता है (यह पाठ को चुनने के बजाय नोड को खींचता है), हालांकि एक अदृश्य हैंडल पर लागू होता है जो पूरे नोड का आकार है। बहुत अच्छी तरह से काम करता है।

यह पता लगाना कि आप इसे कैसे संभालना चाहते हैं। यूए चेकिंग का सहारा लिए बिना, मुझे नहीं पता कि इससे निपटने का एक शानदार तरीका है और यह मुझे ऐसा लगता है कि यह अनौपचारिक रूप से समर्थित ब्राउज़र का समर्थन करने के लिए कार्यक्षमता जोड़ रहा है जो अच्छे ब्राउज़रों को तोड़ रहा है जो एक रखरखाव छेद खोद सकता है। लेकिन यह सब मेरी राय है। इसके बावजूद, इस समस्या का एक समाधान है जो अन्य मुद्दों को भी हल करता है।

Chrome में selectstart लिए इवेंट श्रोता को निकालना Chrome में contentEditable काम करता है, लेकिन फिर भी यह Safari में काम नहीं कर रहा है।

Https://github.com/gaearon/react-dnd/commit/0a36033693868a7985ea2348105da4fb2cef8a00 द्वारा निश्चित

चयनकर्ता के लिए ईवेंट श्रोता को हटाने से Chrome में संतोषप्रद कार्य हो जाता है, लेकिन फिर भी यह सफारी में काम नहीं कर रहा है।

यह सफारी में एचटीएमएल 5 ड्रैग एंड ड्रॉप एपीआई इश्यू है। इसके बारे में हम कुछ नहीं कर सकते।

इस मुद्दे के लिए फिक्स [email protected] में जारी किया गया था।
कृपया सत्यापित करें कि यह काम करता है।

पुष्टि की गई कि Ctrl / Cmd-A एक ड्रैग करने योग्य घटक के अंदर <input> में काम करता है।

टचपैड / माउस के साथ इनपुट या टेक्स्टारिया सामग्री का चयन करने का प्रयास मूल तत्व को खींचना शुरू कर देता है

मैं देख रहा हूं कि यह तय नहीं है, एक नया मुद्दा बनाएं?

एक खींचें करने योग्य माता-पिता कंटेनर के अंदर contentEditable सेट के साथ तत्व मुझे पाठ का चयन करने या किसी भी तरह से उनके साथ बातचीत करने की अनुमति नहीं देंगे। कुछ खुदाई के बाद, मुझे यह बग रिपोर्ट मिली: https://bugs.chromium.org/p/chromium/issues/detail?id=170139

ऐसा प्रतीत होता है कि Chrome ने समस्या को ठीक कर दिया है। इस बीच सीएसएस के साथ सफारी का व्यवहार तय किया जा सकता है:

.contenteditable-element {
  user-select: text;
}

@trevorsmith यह अभी भी फ़ायरफ़ॉक्स के व्यवहार को ठीक नहीं कर रहा है। क्या आप फ़ायरफ़ॉक्स के लिए कोई वर्कअराउंड जानते हैं?

@ rahul1995 - मुझे अभी एक समाधान मिला है: बस false :

const Test = () => {
  const ref = useRef(null);
  const [focused, setFocused] = useState(false);
  const [_, drag] = useDrag({ item: { type: 'test' } });

  useEffect(() => {
    if (ref.current) {
      ref.current.setAttribute('draggable', !focused);
    }
  }, [focused]);

  return drag(
    <textarea ref={ref} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}></textarea>
  );
};

यह फ़ायरफ़ॉक्स के लिए चाल करना चाहिए: पलक: