React-dnd: سؤال: كيف تجعل الزوايا المربعة شفافة عند سحب عنصر الزاوية المستديرة؟

هل تستخدم CustomDragLayer لـ DragPreview؟ تظهر الزوايا المربعة
جنبا إلى جنب مع تلك المستديرة؟

يجب أن تساعد لقطة الشاشة في معرفة ما يحدث.

يوم الأربعاء ، 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 ؛ كل شيء عادي.

في لقطة الشاشة ، غير ممكن في ذلك لسوء الحظ ولكن يمكنني أن أصف بشكل أفضل: إن السحب هو عبارة عن div مربع حوالي بوصة واحدة من كل جانب ، مع زوايا مستديرة (نصف قطر الحد 10 بكسل). يبدو السحب ، عند السحب ، طبيعيًا من جميع النواحي (لا يزال لديه زوايا دائرية ولونه مناسب) باستثناء شيء واحد: تظهر كل زاوية من الزوايا الأربعة غير المستديرة أيضًا ، كما لو لم يكن هناك دائرة نصف قطرها على العنصر ، فيما عدا أن لون الجزء غير المقطوع هو لون العنصر الأصل للجزء القابل للسحب (العنصر الأصل الذي تم سحبه منه). لذلك فإن كل ركن مستدير يكون مصحوبًا بشكل مؤسف ، في متصفح Chrome فقط (وليس Firefox أو Safari) ، مع "قبعة" صغيرة تمثل باقي مساحة سطح div كما هو الحال بدون الزوايا المستديرة.

يبدو الأمر كما لو أن Chrome يلتقط مقطع div ويحتفظ به في الذاكرة. في وقت سابق مع هذا ، واجهت بالفعل مشكلة مع endDrag وعندما نقرت خارج متصفح الويب على سطح المكتب ، كان بإمكاني رؤية أداة السحب كما هو موضح.

حاولت تعيين WebkitTapHighlightColor (تنسيق معرف React) على transparent ، لكن ذلك لم يصلح ذلك.

هذا غريب. إذا كنت لا تستخدم CustomPreview ، فحينئذٍ نفس الشيء
يجب أن يكون الشيء الذي يتم عرضه قبل أن تبدأ في السحب هو المعاينة (كما سنفعل
تعتمد على لقطة المتصفح للعنصر)

هل يمكنك التحقق مما إذا كنت تفعل أي شيء أكثر مما هو موصوف في
هذا المثال -
http://react-dnd.github.io/react-dnd/examples-drag-around-naive.html ؟

إذا قمت باستنساخ هذا الريبو وإضافة borderRadius إلى هذا المثال ، فسترى
انها تعمل بشكل جيد!

يوم الأربعاء ، 7 يونيو 2017 الساعة 09:19 nottoseethesun [email protected] كتب:

شكرًا - عدم استخدام CustomDragLayer ؛ كل شيء عادي.

على لقطة الشاشة ، لا يمكن ذلك للأسف ولكن يمكنني الوصف
أفضل: القابل للسحب عبارة عن div مربع حوالي بوصة واحدة من كل جانب ، مع
الزوايا الدائرية (نصف قطر الحد 10 بكسل). السحب ، عندما تبدو مسحوبة
طبيعي من جميع النواحي (لا يزال لديه زوايا دائرية ولونه مناسب)
باستثناء شيء واحد: كل زاوية من الزوايا الأربع غير المقوسة تظهر على شكل
حسنًا ، كما لو لم يكن هناك تقريب نصف قطر الحد على العنصر ،
فيما عدا أن لون الجزء غير المقطوع هو لون الأصل
عنصر قابل للسحب (العنصر الأصلي الذي تم سحبه منه). وبالتالي
كل زاوية مستديرة مصحوبة بشكل مؤسف ، على متصفح Chrome فقط (ليس
Firefox أو Safari) ، مع "قبعة" صغيرة تمثل باقي السطح
منطقة div كما هي بدون الزوايا المستديرة.

يبدو الأمر كما لو أن Chrome يلتقط عنصر div ويحتفظ به
ذاكرة. في وقت سابق مع هذا كان لدي بالفعل مشكلة مع endDrag ومتى
نقرت خارج متصفح الويب على سطح المكتب ، ويمكنني رؤية ملف
قابل للسحب تمامًا كما هو موضح.

-
أنت تتلقى هذا لأنك علقت.

قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
.

>

يعتبر،
جاجان

شكرًا - لقد جربت border-radius في هذا المثال وأنت محق حقًا. ومع ذلك ، فإن السبب الذي يجعله يبدو صحيحًا هو أن منطقة العمل بأكملها هي نفس لون الخلفية. بمجرد سحب صورة شبح أصلية لعنصر html في Chrome إلى لون خلفية مختلف ، تظهر تلك الزوايا. في حالتي ، لدي هذا الوضع. يمكن العمل عليها بنجاح من خلال تحديد صورة شبح.

ركض في نفس هذه القضية. تمكنت في النهاية من إصلاحها عن طريق إضافة transform: 'translate(0, 0)' إلى العقدة التي أردتها كمعاينة السحب الخاصة بي. حصلت على بعض الأفكار من هذه الصفحة: https://kryogenix.org/code/browser/custom-drag-image.html لأنها تعرض أمثلة حيث توجد الزوايا وأين ذهبوا.

douweknook شكرا على هذا. استغرق البحث عن حل قدرا كبيرا من الوقت.

douweknook حل رائع!

قد يبدو تنفيذ css البسيط كما يلي:

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

أود ربط .sortable المختار بفئة العنصر القابل للفرز لضمان عدم تطبيق النمط عالميًا. على سبيل المثال ، إذا كانت فئة العنصر القابل للفرز هي "item" ، فاستخدم .item.sortable-selected بدلاً من ذلك!

douweknook YAY ....... شكرًا لك ، لقد حل المشكلة حتى في خزان جافا سكريبت النقي

douweknook أنت رجل نبيل وعالم. نجح هذا في إصلاح مشكلة نصف قطر الحدود ، لكنه لا يزال يحصد ظل الصندوق. ملاحظة: هذا يعمل بشكل صحيح في Firefox.

لقد أنشأت عددًا منفصلاً لهذا ، لأي شخص مهتم. https://github.com/react-dnd/react-dnd/issues/2762