React-dnd: मॉनीटर से कनेक्ट करना ।getClientOffset को एक ड्रॉपटैग से प्रॉपर रीफ्रेश नहीं करना है

ओह, अच्छी बात है। यह सही है, मैंने इस उपयोग का अनुमान नहीं लगाया था। वर्तमान में, ट्रैकिंग क्लाइंट ऑफ़सेट में चयन करने का एकमात्र तरीका DragLayer । अन्यथा, प्रदर्शन कारणों से, यह केवल सहारा को अद्यतन करता है अगर _drop लक्ष्य के विषय में कुछ बदल गया है।

मैं कहूंगा कि यह एक एपीआई समस्या है, और इसके कई समाधान हो सकते हैं:

• में पहुँच न करे getClientOffset() और अंदर से समान तरीकों collect समारोह और उपयोग करने के लिए बता DragLayer बजाय (आसान लेकिन गूंगा);
• स्वचालित रूप से यह पता लगाएं कि उपयोगकर्ता ऑफ़सेट ट्रैक करना चाहता है और ऑफ़सेट परिवर्तनों की सदस्यता लेना चाहता है यदि यह मामला है (कठिन लेकिन अधिक सुसंगत)।

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

मैंने दूसरे विकल्प पर ध्यान दिया, लेकिन यह मुश्किल है क्योंकि संग्रह एक फ़ंक्शन है, इसलिए यह पता लगाना संभव नहीं है / आसान है कि कौन से मॉनिटर फ़ंक्शन कहे जा सकते हैं।

मेरा उपयोग मामला उन विजेट्स के इर्द-गिर्द खींच रहा है, जो संभवतः स्थान पर तड़क-भड़क में हैं, संभवतः अन्य विजेट्स को अपेक्षाकृत जटिल तरीके से विस्थापित करना है (एंड्रॉइड पर प्रोग्राम आइकनों को खींचें)। यह वास्तव में लक्ष्य है कि सटीक होवर स्थान के आधार पर खुद को पुनर्व्यवस्थित करना है, जबकि ड्रैग ही एचटीएमएल 5 स्नैपशॉट के रूप में पूरी तरह से ठीक है। मैं लक्ष्य घटक की स्थिति को लक्ष्य घटक की स्थिति को अपडेट करने के साथ कर सकता हूं। इसलिए मैं इसे अभी के लिए छोड़ दूंगा और इसके आसपास काम करूंगा। एक अद्भुत पुस्तकालय के लिए धन्यवाद; मेरे पास काम के कुछ घंटों में कुछ अच्छा काम है।

चलिए अब इसे खुला रखते हैं। यह # 172 के समान है: मैंने canDrop या संग्रह फ़ंक्शन के अंदर डेल्टास का उपयोग करने वाले लोगों का अनुमान नहीं लगाया था। मैं इसे अभी ठीक करने नहीं जा रहा हूं, लेकिन एक-एक महीने में मैं मुक्त हो जाऊंगा।

मैं भी इस मुद्दे पर भाग गया। परिवर्तनों को ऑफसेट करने के लिए ग्राहकों को DropTarget में ध्वज को पास करने देने के बारे में आपके विचार क्या हैं? यह उपयोगकर्ता के लिए एक और "गोचा" है, लेकिन ऑफ़सेट में मैन्युअल रूप से सदस्यता / सदस्यता रद्द करने की तुलना में सरल है।

क्या आप शायद RxJS-DOM का उपयोग तत्व पर ड्रैगओवर इवेंट को देखने और माउस निर्देशांक के साथ राज्य को अपडेट करने के लिए नहीं कर सकते हैं? हैकी समाधान शायद।

  componentDidMount() {
    this._events.dragOver = DOM.fromEvent(findDOMNode(this.refs.grid), 'dragover')
                            .throttle(200)
                            .subscribe(this.getMouseCoords)
  }

मैंने मॉनिटर को हथियाने और ड्रैगलेयर जैसे परिवर्तनों को ऑफसेट करने के लिए सदस्यता समाप्त कर दी। मैंने स्थानों में आंतरिक रजिस्ट्री में दोहन को भी समाप्त कर दिया। मुझे नहीं लगता कि मैं जो करना चाहता हूं वह _too_ असामान्य है, इसलिए IMO इसे सरल एपीआई परिवर्तनों द्वारा संबोधित किया जा सकता है।

क्या इसमें से कुछ आया है? मैं कस्टम ड्रैग लेयर के बजाय अपने DropTarget में क्लाइंट ऑफसेट की निगरानी करना चाहूंगा क्योंकि मुझे ऐसा लगता है कि DropTarget की संरचना को बदलना आसान है जब मैं कस्टम ड्रैग लेयर के बजाय DropTarget से होवर स्थान तक पहुँच सकता हूँ।

+1 मैं बिल्कुल वही करना चाहूंगा जो

+1। इसमें भागना और बहुत समय बर्बाद करना यह समझने की कोशिश करना कि getClientOffset () canDrop () में ठीक काम करता है - जिसे बार-बार कॉल किया जाता है ... - लेकिन मेरे नियंत्रण में 'जहां' हम जिस आइटम पर हैं, उसे आगे बढ़ाने का कोई तरीका नहीं है। मुझे एक ट्रीनोड के ऊपर और नीचे डालने में सक्षम होने की आवश्यकता है, न कि केवल "उस पर"। canDrop () के पास ऐसा कोई तरीका नहीं है जिससे मैं यह पता लगा सकूँ कि वास्तव में मेरे घटक को बताता है कि नोड के कितने "प्रकार" बूंदों में से हैं ताकि मेरा नियंत्रण तदनुसार फिर से हो सके। कैनड्रॉप में प्रोप को बदलने से एक त्रुटि हुई। OnMouseMove की सदस्यता ड्रैग और ड्रॉप ऑपरेशन के दौरान काम नहीं करती है। यह समय की एक बड़ी बर्बादी है ... किसी भी मदद की सराहना की जाएगी।

@ आइबैश , क्या आप अपनी समस्या को हल करने के लिए आपने जो कुछ किया है, उसके बारे में

होवर का उपयोग करने के लिए स्विच करना आखिरकार मेरे लिए था।

`मंडराना: (सहारा: MyProps, मॉनिटर: DropTargetMonitor, घटक: ReportItemRow) => {
अगर (घटक! = अशक्त) {
const clientOffset = monitor.getClientOffset ();

        // Is the dragging node dragged above/below us as opposed to "on" us?

        const elementRect = document.elementFromPoint(clientOffset.x, clientOffset.y).getBoundingClientRect();

        const percentageY = (clientOffset.y - elementRect.top) / elementRect.height;

        // Divide the box up into .25 .5 .25
        const insertDragAndDropMagnetPercent = .25;

        if (insertDragAndDropMagnetPercent >= percentageY) {
            component.setState({ dropTarget: "above" });
        }
        else if (1 - insertDragAndDropMagnetPercent >= percentageY) {
            component.setState({ dropTarget: "inside" });
        }
        else {
            component.setState({ dropTarget: "below" });
        }
    }
},`

@ noah79 , इस के आने के लिए कुछ इंतजार करने के बीच में, आप ड्रॉप टारगेट्स की एक संख्या बनाकर और उन्हें अपने ट्रीनोड्स के नीचे रखकर अपनी समस्या को हल कर सकते हैं। कुछ इस तरह से:

         _____
         _____| <-- drop div1 (above treenode1/below top of list)
treenode1_____| <-- drop div2 (on treenode1)
         _____| <-- drop div3 (below treenode1/above treenode2)
treenode2_____| <-- drop div4 (on treenode 2)
         _____| <-- drop div5 (below treenode2/above bottom of list)

आप 2n + 1 ड्रॉप लक्ष्य के साथ समाप्त होते हैं, जहां n आपकी सूची में तत्वों की संख्या है। फिर, इस पर आधारित है कि किस विभाग के ऊपर मंडरा रहा है, आप बदल सकते हैं कि पेड़ की सूची कैसी दिखती है। मैंने इसके लिए कुछ ऐसा ही किया है, ताकि अब तक के लिए getClientOffset () का उपयोग नहीं किया जा सके और मैंने प्रदर्शन पर कोई ध्यान नहीं दिया। प्रत्येक ड्रॉप डिव की ऊंचाई ट्रीनोडे 1 लाइन की ऊंचाई 1/2 होनी चाहिए और पहली ड्रॉप डिव, ट्रिनोडे 1 लाइन की ऊंचाई 1/4 की पहली लाइन से अधिक होनी चाहिए। यही है, आपके सीएसएस को इस तरह दिखना चाहिए:

.dropdiv-container {
    position: absolute;
    top: -0.25em; /* If the top of this container is aligned with the top of the treenode list initially */
}
.dropdiv {
    height: 0.5em; /* If the height of treenode1 line is 1em with no padding */
}

<div className='dropdiv-container'>
    { renderDropTargets(2 * listLength + 1) }
</div>

क्या इसका कोई मतलब है?

यहां बताया गया है कि मैंने इसे कैसे हल किया। चाल में बस तक पहुँचने के लिए है
रिएक्ट-डंड इंटर्नल्स और सीधे वैश्विक मॉनिटर का उपयोग करें। जरा गौर करें
DragDropMonitor.js स्रोत क्या तरीकों उपलब्ध हैं की एक विचार प्राप्त करने के लिए।
रेफरी: https://github.com/gaearon/dnd-core/blob/master/src/DragDropMonitor.js

आपको कॉफ़ीस्क्रिप्ट का बहाना करना होगा :)

  # in the component being dragged, get access to the dragDropManager by adding
  # it to the contextTypes
  #
  # dragDropManager is an instance of this:
  # https://github.com/gaearon/dnd-core/blob/master/src/DragDropManager.js

  <strong i="11">@contextTypes</strong>: {
    dragDropManager: React.PropTypes.object
  }

  # because we can receive events after the component is unmounted, we need to
  # keep track of whether the component is mounted manually.
  #
  # <strong i="12">@_monitor</strong> is what lets us access all the nice internal state - it is an instance of this:
  # https://github.com/gaearon/dnd-core/blob/master/src/DragDropMonitor.js

  componentWillMount: () =>
    <strong i="13">@_isMounted</strong> = true
    <strong i="14">@_monitor</strong> = @context.dragDropManager.getMonitor()

    <strong i="15">@_unsubscribeToStateChange</strong> = @_monitor.subscribeToStateChange(@_onStateChange)
    <strong i="16">@_unsubscribeToOffsetChange</strong> = @_monitor.subscribeToOffsetChange(@_onOffsetChange)

  componentWillUnmount: () =>
    <strong i="17">@_isMounted</strong> = false
    <strong i="18">@_monitor</strong> = null

    @_unsubscribeToStateChange()
    @_unsubscribeToOffsetChange()

  # we can access dragging / dropping state by accessing the monitor 

  _onStateChange: () =>
    return unless <strong i="19">@_isMounted</strong>

    # When we stop dragging reset the counter state and hide all cursors.
    if <strong i="20">@_previousIsDragging</strong> && !@_monitor.isDragging()
      console.log('no longer dragging')
    <strong i="21">@_previousIsDragging</strong> = @_monitor.isDragging()

  _onOffsetChange: () =>
    return unless <strong i="22">@_isMounted</strong>

    # mouse is the x/y coordinates
    mouse = @_monitor.getClientOffset()

    # item is the drag item
    item = @_monitor.getItem()

    # if you want to check if a dragged item is over a target, you need the
    # targetId -- in the DropTarget wrapper you can pass it in like:
    #
    #   (connect, monitor) ->
    #     {
    #       targetId: monitor.targetId,
    #       connectDropTarget: connect.dropTarget()
    #     }
    #
    # and then you can use it like below

    @_monitor.isOverTarget(@props.targetId))

इसका कोई मतलब भी है क्या? यदि नहीं तो मैं और विवरण जोड़ सकता हूं

मैं भी आज इसमें भाग रहा था और कुछ घंटे बर्बाद हो गए। DropTarget के तहत प्रलेखन में इसके बारे में एक नोट छोड़ने के बारे में क्या है -> संग्रह समारोह? कम से कम कुछ अन्य लोगों को निराशा के लिए छोड़ना होगा।

Btw। इस मुद्दे के आसपास एक दूसरे को वास्तव में बदसूरत हैक निर्देशांक _as राज्य_ में dropTarget.hover() से भेजने के लिए हो सकता है:

const dropTarget = {
    hover(props, monitor, component) {
        // HACK! Since there is an open bug in react-dnd, making it impossible
        // to get the current client offset through the collect function as the
        // user moves the mouse, we do this awful hack and set the state (!!)
        // on the component from here outside the component.
        component.setState({
            currentDragOffset: monitor.getClientOffset(),
        });
    },
    drop() { /* ... */ },
};

निश्चित रूप से ऐसा करने के लिए और अधिक सही तरीके हैं जो इस तरह से सेटस्टेट के दुरुपयोग से बचेंगे। लेकिन कम से कम यह छोटी हैक बहुत संघनित है और यह काम तब तक कर सकता है जब तक कि यह मुद्दा आखिरकार तय न हो जाए। यह आपको अन्य घटकों और / या फ़ाइलों को बदलने और लाइब्रेरी के इंटीरियर पर भरोसा किए बिना बग के आसपास हैक करने देता है।

संपादित करें: यह मूल रूप से नूह के जैसा ही है, मैंने अभी से पहले उसका कोड नहीं पढ़ा था।

क्या वास्तव में ड्रॉप पर माउस की स्थिति प्राप्त करने का कोई तरीका नहीं है? मेरे लक्ष्य घटक को इसके बारे में जानने की आवश्यकता नहीं है, इसलिए setState मेरे लिए कोई विकल्प नहीं है। मुझे केवल एक redux एक्शन को ट्रिगर करने के लिए निर्देशांक की आवश्यकता है।

कृपया मेरे अंतिम संदेश को अनदेखा करें। अब मैं देखता हूं कि drop और endDrag कार्यक्षमता के दो अलग-अलग टुकड़े हैं, और drop भीतर कर्सर की स्थिति प्राप्त करना उम्मीद के

मेरे परीक्षणों से, प्रतिक्रिया-dnd माउस चाल की घटनाओं का उपभोग कर रहा है जैसे ही एक आइटम को लक्ष्य पर खींचा जा रहा है। यदि यह html- बैकेंड के लिए इस घटना का उपभोग नहीं करना संभव था, तो लक्ष्य घटक केवल एक सामान्य मूसमोव श्रोता को सशर्त रूप से तब रख सकता है जब आइसओवर संपत्ति सही पर सेट हो। इसके बाद यह श्रोता माउस की स्थिति (सामान्य तरीके से) उठा सकता है, जब उस पर कुछ खींचा जा रहा हो। मुझे अस्थायी रूप से ड्रैग से सेटस्टैट का उपयोग करके काम करने के लिए मिला () विधि प्रतिक्रिया एक रेंडर संक्रमण के बीच में राज्य की स्थापना के बारे में चेतावनी दे रही है।

इसने मुझे भी उलझा दिया। एपीआई समाधान के लिए +1 या एफएक्यू पर कम से कम कुछ।

क्या इसका समर्थन करने की कोई योजना है?
मेरे पास हैक-फ्री वर्कअराउंड के लिए एक विचार है: DropTarget लिए एक रैपर बनाओ जो संग्रह फ़ंक्शन के लिए एक और कॉल ट्रिगर करने के लिए hover भी लपेटता है और यदि संग्रह फ़ंक्शन नए मान लौटाता है ।

इस मुद्दे के लिए +1। उपयोग मामला मेरे पास है मेरे पास कई ड्रॉप लक्ष्य हैं जो एक दूसरे के करीब हैं। यह अजीब लगता है कि जब मँडरा, उचित ड्रॉप लक्ष्य पर प्रकाश डाला जाता है, लेकिन वास्तव में छोड़ने पर आप किस दिशा से मँडराते हैं, इस पर निर्भर करता है।

मैं इस मुद्दे पर ठोकर खा गया कि शोध क्यों अपडेट नहीं कर रहे हैं, ऐसा लगता है जैसे इसे अभी भी वर्कअराउंड की आवश्यकता है।
मैंने @ jedwards1211 का आइडिया लिया और यहां मैं जो लेकर आया हूं। HOC में ज्यादातर वैनिला DropTarget के समान ही इंटरफ़ेस होता है, लेकिन इसके विकल्पों में collectRapidly को स्वीकार करता है जो कि संग्रह समारोह के माध्यम से क्वेरी करने की एक सूची है। एकत्रित समारोह से अंधाधुंध रूप से सभी प्रॉप्स को पास करने से कुछ अजीबता हुई और हम कलेक्टर को connect पास नहीं कर सके, इसलिए connectDropTarget "तेजी से" क्वेरी करने के खिलाफ एक गार्ड है।

तो के बजाय DropTarget(types, target, collect) आप का प्रयोग करेंगे RapidFireDropTarget(types, target, collect, {collectRapidly: ['offset']}) , जहां offset संभवतः से अपने मूल्य प्राप्त करने के लिए कुछ है monitor.getOffset कार्यों का परिवार।

import React from 'react';
import {DropTarget} from 'react-dnd';
import pick from 'lodash/pick';

function RapidFireDropTarget(types, spec, collect, options={}) {
  let collectProps = {};
  const prevHover = spec.hover;
  const {collectRapidly = []} = options;

  const dummyConnect = {
    dropTarget: () => () => {
      throw new Error('Rapidly collected props cannot include results from `connect`');
    }
  };

  const WrappedComponent = Component => {
    return class extends React.Component {
      render() {
        return <Component {...this.props} {...collectProps} />;
      }
    };
  };

  spec.hover = (props, monitor, component) => {
    const allCollectProps = collect(dummyConnect, monitor);

    collectProps = pick(allCollectProps, collectRapidly);
    component.forceUpdate();

    if (prevHover instanceof Function) {
      prevHover(props, monitor, component);
    }
  }

  return (Component) => {
    return DropTarget(types, spec, collect, options)(WrappedComponent(Component));
  };
}

export default RapidFireDropTarget;

इस मुद्दे को स्वचालित रूप से बासी के रूप में चिह्नित किया गया है क्योंकि इसमें हाल की गतिविधि नहीं थी। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।