React-dnd: मैं ड्रॉप लक्ष्य कंटेनर के सापेक्ष अपने गिराए गए आइटम के निर्देशांक कैसे प्राप्त करूं?

ऐसा लगता है कि getClientOffset मुझे व्यूपोर्ट के सापेक्ष स्थिति लौटाता है। तो मुझे बस इतना करना है कि मेरे ड्रॉप लक्ष्य में मेरा ऑफसेट मिल जाए। क्या आपको लगता है कि यह अभी भी ड्रॉप लक्ष्य के सापेक्ष एक सुविधा पद्धति के लायक है?

हाँ, मुझे लगता है कि हमारे पास यह समरूपता के लिए हो सकता है। अभी के लिए, आप केवल findDOMNode(component).getBoundingClientRect() उपयोग कर सकते हैं, लेकिन अगर अधिक लोग समर्थन करते हैं तो मुझे इसे जोड़ने में कोई आपत्ति नहीं होगी। आइए इसे खुला रखें और देखें कि दूसरे क्या कहते हैं।

मैं भी कुछ ऐसा ही चाहूंगा। मुझे ड्रॉप लक्ष्य के बाउंडिंग रेक्ट/निर्देशांक प्राप्त करने की आवश्यकता है, इसलिए जब मैं उस पर कुछ होवर करता हूं तो मैं गणना कर सकता हूं कि यह ड्रॉप लक्ष्य के अंदर बाएं, दाएं, ऊपर या नीचे की तरफ है या नहीं।

सापेक्ष निर्देशांक अन्य उपयोग के मामलों के लिए उपयोगी हो सकते हैं। ट्रेलो-जैसे ऐप के लिए, जब आप किसी कार्ड को किसी सूची के ऊपर खींचते हैं, तो ड्रॉप क्षेत्र के निचले भाग के पास मँडराते समय सूची नीचे की ओर स्क्रॉल करती है, और शीर्ष के पास होवर करते समय ऊपर की ओर स्क्रॉल करती है।

उपयोगकर्ता स्थान पर लागू करने के लिए तुच्छ।

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

मुझे नहीं लगता कि वास्तव में getBoundingClientRect तक पहुंच के बिना ऐसा करने का कोई तरीका है क्योंकि आप कभी नहीं जानते कि आइटम स्थानांतरित हो गया है या नहीं।

ट्रेलो-जैसे ऐप के लिए, जब आप किसी कार्ड को किसी सूची के ऊपर खींचते हैं, तो ड्रॉप क्षेत्र के निचले भाग के पास मँडराते समय सूची नीचे की ओर स्क्रॉल करती है, और शीर्ष के पास होवर करते समय ऊपर की ओर स्क्रॉल करती है।

यह एक अच्छा उपयोग मामला है।

परफेक्ट पेनल्टी वास्तव में महत्वपूर्ण है, और अगर इसे रिएक्ट डीएनडी में जोड़ा जाता है तो यह बर्बाद हो जाएगा लेकिन आपका ऐप इसका उपयोग नहीं करता है। इसलिए, मैं इसे रिएक्ट डीएनडी में नहीं जोड़ना चाहता।

यूजरलैंड में इसे लागू करना आसान है, और आप थ्रॉटल getBoundingClientRect कॉल जैसी चीजें करने में सक्षम होंगे, या संबंधित स्क्रॉलिंग कोड को एनीमेशन फ्रेम में डाल सकते हैं।

मैं सॉर्ट करने योग्य तनाव परीक्षण के लिए "नीचे होवर पर स्क्रॉल करें" _उदाहरण के रूप में_ जोड़ने के लिए तैयार हूं। इसमें कंटेनर स्तर पर एक और ड्रॉप लक्ष्य जोड़ना शामिल होगा जो केवल hover को सुनता है और एक एनीमेशन फ्रेम के अंदर स्क्रॉल करता है।

हालांकि मैं ऊपर वर्णित कारणों के लिए प्रतिक्रिया डीएनडी में डीओएम समन्वय विधियों को नहीं जोड़ूंगा।

@gaearon मुझे सामान्यीकृत समाधान में दिलचस्पी है। हम सीधे getBoundingClientRect बजाय react-dnd-html5-backend उपयोग कैसे कर सकते हैं?

मैंने इसे DropTargetMonitor फ़ंक्शन getInitialSourceClientOffset और getSourceClientOffset को मेरे onDrop ईवेंट के अंदर कॉलबैक फ़ंक्शन में पास करके हल किया। इस तरह, मेरा कॉलबैक फ़ंक्शन व्यू पोर्ट से संबंधित सही निर्देशांक की गणना कर सकता है।

// some code before...

const [, dropRef] = useDrop({
    accept: 'STICKY',
    drop(item, monitor) {
      move(
        item.id,
        monitor.getInitialSourceClientOffset(),
        monitor.getSourceClientOffset()
      );
    },
  });

// I'm updating my state with npm immer (immutable helper) throuthg the produce function...

const move = (id, initialPosition, finalPosition) => {
    setList(
      produce(list, draft => {
        list.map(item => {
          if (item.id === id) {
            item.position = getCorrectDroppedOffsetValue(
              initialPosition,
              finalPosition
            );
          }
          return item;
        });
      })
    );
  };

// and finally, my getCorrectDroppedOffsetValue function
const getCorrectDroppedOffsetValue = (initialPosition, finalPosition) => {
    // get the container (view port) position by react ref...
    const dropTargetPosition = ref.current.getBoundingClientRect();

    const { y: finalY, x: finalX } = finalPosition;
    const { y: initialY, x: initialX } = initialPosition;

    // calculate the correct position removing the viewport position.
   // finalY > initialY, I'm dragging down, otherwise, dragging up
    const newYposition =
      finalY > initialY
        ? initialY + (finalY - initialY) - dropTargetPosition.top
        : initialY - (initialY - finalY) - dropTargetPosition.top;

    const newXposition =
      finalX > initialX
        ? initialX + (finalX - initialX) - dropTargetPosition.left
        : initialX - (initialX - finalX) - dropTargetPosition.left;

    return {
      x: newXposition,
      y: newYposition,
    };
  };

findDOMNode कार्यात्मक घटक के साथ काम नहीं करता है, और useDrop#drop किसी भी component में पास नहीं करता है। अब अगर मैं अपने घटक का ref प्राप्त करना चाहता हूं तो मेरे पास है इसे अलग से स्टोर करने के लिए और इसे पास करने के लिए ड्रॉप कनेक्टर को मैन्युअल रूप से कॉल करें। क्या ऐसा करने का कोई और संक्षिप्त तरीका है?

function useCustomDrop(onDrop: (info: unknown, xy: Point) => void) {

    const ref = useRef<Element>();

    const [, dropTarget] = useDrop<any, void, unknown>({
        accept: 'item-type',
        drop(item, monitor) {
            const offset = monitor.getSourceClientOffset();
            if (offset && ref.current) {
                const dropTargetXy = ref.current.getBoundingClientRect();
                onDrop(item.data, {
                    x: offset.x - dropTargetXy.left,
                    y: offset.y - dropTargetXy.top,
                });
            }
        }
    });

    return (elem) => {
        ref.current = elem;
        dropTarget(ref);
    };
}

@quanganhtran क्या आपके पास कोई पूर्ण कोड नमूने हैं जिन्हें आप साझा करना चाहते हैं, कृपया?

@dendrochronology

एक काल्पनिक उदाहरण: https://codesandbox.io/s/elastic-liskov-00ldf

जब हमें ref खुद ( useGlobalDrop बनाम useLocalDrop ) स्टोर करने की आवश्यकता नहीं होती है तो एपीआई अच्छा होता है। अब यदि केवल ref , जो मुझे लगता है कि react-dnd पहले से ही प्राप्त हो चुका है, तो कहीं ~ monitor ऑब्जेक्ट~ से जुड़ा हुआ है ( drop में सुलभ, मेरे पास नहीं है राय कहाँ), यह इसे हल करेगा।

यह समाधान विश्वसनीय नहीं है, खासकर जब आप ब्राउज़र में ज़ूम इन करते हैं या डिवाइस रिज़ॉल्यूशन में बदलाव करते हैं। कोई विचार?

मेरे पास एक ही सवाल है @ sepehr09

कुछ Google खोजों के बाद बस गुजर रहा है ... मूल प्रश्न पर कोई अपडेट? (ड्रॉप लक्ष्य के सापेक्ष गिराई गई वस्तु का x/y प्राप्त करना)

मुझे लगता है कि मैं उन लोगों की सूची में शामिल हो जाऊंगा, जिन्हें इसकी आवश्यकता है। कृपया कोई मदद?

मुझे लगता है कि यह सुविधा बहुत जरूरी है, पुस्तकालय में जोड़ने की जरूरत है। अभी, किसी ने भी इसके साथ काम किया है, कृपया हमारी मदद करें!