React-dnd: प्रश्न: गोल-कोने वाले तत्व को खींचते समय वर्गाकार कोनों को पारदर्शी कैसे बनाया जाए?

क्या आप ड्रैगप्रेव्यू के लिए CustomDragLayer का उपयोग कर रहे हैं? चौकोर कोने दिखाई देते हैं
राउंडर वाले के साथ?

एक स्क्रीनशॉट को यह देखने में मदद करनी चाहिए कि क्या हो रहा है।

बुध, 7 जून 2017 00:53 nottoseethesun पर पर [email protected] लिखा है:

मेरे पास गोलाकार कोनों के साथ खींचने योग्य तत्व है, और जब इसे खींचा जाता है,
तत्व के वर्गाकार कोने हल्के भूरे रंग में दिखाई देते हैं, भिन्न
तत्व के निर्दिष्ट पृष्ठभूमि रंग से।

मैं चाहता हूं कि यह दूर हो जाए, इसलिए केवल इसके गोल कोनों वाला तत्व
दिखाता है।

क्या इसे बंद करने के लिए कुछ किया जा सकता है? जैसे किसी भूत के साथ
छवि जिसे लागू किया जा सकता है?

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने इस थ्रेड की सदस्यता ली है।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/react-dnd/react-dnd/issues/788 , या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj
.

>

सादर,
गगन

धन्यवाद - CustomDragLayer का उपयोग नहीं कर रहे हैं; सब कुछ सादा है।

स्क्रीनशॉट पर, दुर्भाग्य से उस पर संभव नहीं है, लेकिन मैं बेहतर वर्णन कर सकता हूं: ड्रैगगेबल गोल कोनों (सीमा त्रिज्या 10px) के साथ प्रत्येक तरफ एक इंच के बारे में एक वर्ग div है। ड्रैग करने योग्य, जब घसीटा जाता है तो सभी मामलों में सामान्य दिखता है (इसमें अभी भी इसके गोल कोने और उचित रंग हैं) एक चीज़ को छोड़कर: चार अगोचर कोनों में से प्रत्येक भी दिखाई देता है, जैसे कि यदि तत्व पर कोई सीमा त्रिज्या नहीं होती है, सिवाय इसके कि अनियंत्रित हिस्से का रंग ड्रैगगेबल के मूल तत्व का है (वह मूल तत्व जहां से इसे खींचा गया था)। तो प्रत्येक गोलाकार कोने दुखी रूप से केवल क्रोम ब्राउज़र (फ़ायरफ़ॉक्स या सफारी नहीं) पर, थोड़ा "टोपी" के साथ होता है जो कि div के शेष सतह क्षेत्र के रूप में गोलाकार कोनों के बिना होगा।

यह लगभग वैसा ही है जैसे क्रोम डिव को स्नैपशॉट कर रहा है और उसे मेमोरी में होल्ड कर रहा है। इससे पहले मुझे वास्तव में endDrag साथ समस्या थी और जब मैंने डेस्कटॉप पर वेब ब्राउज़र के बाहर क्लिक किया, तो मैं वर्णित के रूप में खींचने योग्य देख सकता था।

मैंने WebkitTapHighlightColor (प्रतिक्रिया पहचानकर्ता प्रारूप) को transparent पर सेट करने का प्रयास किया, लेकिन इससे यह ठीक नहीं हुआ।

यह आश्चर्यजनक है। यदि आप CustomPreview का उपयोग नहीं कर रहे हैं, तो ठीक वैसा ही
आपके द्वारा खींचना शुरू करने से पहले प्रदान की गई चीज़ पूर्वावलोकन होनी चाहिए (जैसा कि हम करेंगे
तत्व के ब्राउज़र स्नैपशॉट के आधार पर हो)

क्या आप जांच सकते हैं कि क्या आप इसमें वर्णित के अलावा कुछ अतिरिक्त कर रहे हैं?
यह उदाहरण -
http://react-dnd.github.io/react-dnd/examples-drag-about-naive.html ?

यदि आप इस रेपो को क्लोन करते हैं और इस उदाहरण में बॉर्डररेडियस जोड़ते हैं, तो आप देखेंगे
यह बिल्कुल ठीक काम कर रहा है!

बुध, 7 जून 2017 09:19 nottoseethesun पर पर [email protected] लिखा है:

धन्यवाद - CustomDragLayer का उपयोग नहीं करना; सब कुछ सादा है।

स्क्रीनशॉट पर, दुर्भाग्य से उस पर संभव नहीं है लेकिन मैं वर्णन कर सकता हूं
बेहतर: ड्रैग करने योग्य प्रत्येक तरफ एक इंच के बारे में एक वर्ग div है, जिसमें
गोल कोने (सीमा त्रिज्या 10px)। घसीटने योग्य, घसीटे जाने पर दिखता है
सभी तरह से सामान्य (इसमें अभी भी इसके गोल कोने और उचित रंग हैं)
एक बात को छोड़कर: चार अगोलाकर कोनों में से प्रत्येक के रूप में प्रकट
ठीक है, जैसा कि वे करेंगे यदि तत्व पर कोई सीमा त्रिज्या नहीं है,
सिवाय इसके कि चारों ओर के भाग का रंग जनक का होता है
ड्रैग करने योग्य का तत्व (मूल तत्व जहां से इसे खींचा गया था)। इसलिए
प्रत्येक गोल कोना दुर्भाग्य से साथ है, केवल क्रोम ब्राउज़र पर (नहीं
फ़ायरफ़ॉक्स या सफारी), थोड़ी "टोपी" के साथ जो कि बाकी सतह है
div का क्षेत्रफल जैसा कि यह गोल कोनों के बिना होगा।

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

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।

इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795 ,
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
.

>

सादर,
गगन

धन्यवाद - मैंने उस उदाहरण पर border-radius की कोशिश की और वास्तव में आप सही हैं। हालाँकि, यह सही दिखने का कारण यह है कि संपूर्ण कार्य क्षेत्र एक ही पृष्ठभूमि का रंग है। एक बार क्रोम में एचटीएमएल तत्व देशी भूत छवि को एक अलग पृष्ठभूमि रंग पर खींच लिया जाता है, तो वे कोने दिखाई देते हैं। मेरे मामले में, मेरे पास वह स्थिति है। भूत छवि निर्दिष्ट करके इसे सफलतापूर्वक हल किया जा सकता है।

इसी मुद्दे में भाग गया। अंततः मेरे ड्रैग पूर्वावलोकन के रूप में इच्छित नोड में transform: 'translate(0, 0)' जोड़कर इसे ठीक करने में कामयाब रहा। इस पृष्ठ से कुछ अंतर्दृष्टि प्राप्त हुई: https://kryogenix.org/code/browser/custom-drag-image.html क्योंकि यह उदाहरण दिखाता है कि कोने कहाँ हैं और वे कहाँ चले गए हैं।

@douweknook इसके लिए धन्यवाद। समाधान खोजने में काफी समय लगा है।

@douweknook भयानक समाधान!

एक साधारण सीएसएस कार्यान्वयन कुछ ऐसा दिखाई देगा:

    .sortable-chosen {
        transform: translate(0, 0);
    }

यह सुनिश्चित करने के लिए कि शैली विश्व स्तर पर लागू नहीं है, मैं आपके सॉर्ट करने योग्य तत्व वर्ग में .sortable-चुने गए को श्रृंखलाबद्ध करूंगा। उदाहरण के लिए, यदि आपका सॉर्ट करने योग्य तत्व वर्ग "आइटम" है, तो इसके बजाय .item.sortable-chosed का उपयोग करें!

@douweknook YAY ....... धन्यवाद, इसने शुद्ध जावास्क्रिप्ट टैंक में भी समस्या हल कर दी है

@douweknook आप एक सज्जन और विद्वान हैं। इसने सीमा त्रिज्या के मुद्दे को ठीक करने के लिए काम किया, लेकिन यह अभी भी बॉक्स छाया से दूर है। नोट: यह फ़ायरफ़ॉक्स में ठीक से काम करता है।

रुचि रखने वाले किसी भी व्यक्ति के लिए मैंने इसके लिए एक अलग मुद्दा बनाया है। https://github.com/react-dnd/react-dnd/issues/2762