React-dnd: Pertanyaan: Bagaimana cara membuat sudut persegi transparan saat menyeret elemen sudut bulat?

Apakah Anda menggunakan CustomDragLayer untuk DragPreview? Sudut persegi muncul
bersama dengan yang lebih bulat?

Tangkapan layar akan membantu melihat apa yang terjadi.

Pada Rabu, 7 Jun 2017 at 00:53 nottoseethesun [email protected] menulis:

Saya memiliki elemen yang dapat diseret dengan sudut membulat, dan ketika diseret,
sudut persegi elemen muncul dalam warna abu-abu muda, berbeda
dari warna latar belakang elemen yang ditetapkan.

Saya ingin itu hilang, jadi hanya elemen dengan sudut membulatnya
muncul.

Apakah ada sesuatu yang bisa dilakukan untuk mematikan ini? Seperti dengan hantu
gambar yang mungkin diterapkan?

—
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/react-dnd/react-dnd/issues/788 , atau bisukan utasnya
https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj
.

>

Salam,
gagan

Terima kasih - tidak menggunakan CustomDragLayer ; semuanya polos.

Pada tangkapan layar, sayangnya tidak mungkin, tetapi saya dapat menjelaskan dengan lebih baik: Yang dapat diseret adalah div persegi sekitar satu inci di setiap sisi, dengan sudut membulat (radius batas 10px). Draggable, ketika diseret terlihat normal dalam segala hal (masih memiliki sudut bulat dan warna yang tepat) kecuali untuk satu hal: Masing-masing dari empat penjuru unrounded muncul juga, karena mereka akan jika tidak ada radius perbatasan pembulatan pada elemen, kecuali bahwa warna bagian yang tidak dibulatkan adalah warna elemen induk dari yang dapat diseret (elemen induk dari mana ia diseret). Jadi setiap sudut bulat sayangnya disertai, hanya pada browser Chrome (bukan Firefox atau Safari), dengan sedikit "topi" yang merupakan sisa luas permukaan div seperti tanpa sudut membulat.

Ini hampir seperti Chrome memotret div dan menyimpannya di memori. Sebelumnya dengan ini saya sebenarnya punya masalah dengan endDrag dan ketika saya mengklik di luar browser web di desktop, saya bisa melihat draggable seperti yang dijelaskan.

Saya mencoba mengatur WebkitTapHighlightColor (Format pengenal Bereaksi) ke transparent , tetapi itu tidak memperbaikinya.

Itu aneh. Jika Anda tidak menggunakan CustomPreview, maka sama persis
hal yang diberikan sebelum Anda mulai menyeret harus menjadi pratinjau (seperti yang akan kami lakukan
tergantung pada snapshot browser dari elemen)

Bisakah Anda memeriksa apakah Anda melakukan sesuatu yang lebih dari yang dijelaskan di
contoh ini -
http://react-dnd.github.io/react-dnd/examples-drag-around-naive.html ?

Jika Anda mengkloning repo ini dan menambahkan borderRadius ke contoh ini, Anda akan melihat
itu bekerja dengan baik!

Pada Rabu, 7 Jun 2017 at 09:19 nottoseethesun [email protected] menulis:

Terima kasih - tidak menggunakan CustomDragLayer; semuanya polos.

Pada tangkapan layar, sayangnya tidak mungkin, tetapi saya dapat menjelaskan
lebih baik: Draggable adalah div persegi sekitar satu inci di setiap sisi, dengan
sudut membulat (radius batas 10px). Dapat diseret, ketika diseret terlihat
normal dalam segala hal (masih memiliki sudut membulat dan warna yang tepat)
kecuali untuk satu hal: Masing-masing dari empat sudut yang tidak dibulatkan muncul sebagai
baik, seperti jika tidak ada pembulatan radius batas pada elemen,
kecuali bahwa warna bagian yang tidak dibulatkan adalah warna induknya
elemen yang dapat diseret (elemen induk dari mana ia diseret). Jadi
setiap sudut membulat sayangnya disertai, hanya di browser Chrome (bukan
Firefox atau Safari), dengan sedikit "topi" di permukaannya
area div seperti tanpa sudut membulat.

Ini hampir seperti Chrome memotret div dan menahannya
Penyimpanan. Sebelumnya dengan ini saya sebenarnya punya masalah dengan endDrag dan kapan
Saya mengklik di luar browser web di desktop, saya bisa melihat
dapat ditarik seperti yang dijelaskan.

—
Anda menerima ini karena Anda berkomentar.

Balas email ini secara langsung, lihat di GitHub
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
.

>

Salam,
gagan

Terima kasih - Saya mencoba border-radius pada contoh itu dan memang Anda benar. Namun alasannya terlihat benar adalah karena seluruh area kerja memiliki warna latar belakang yang sama. Setelah gambar hantu asli elemen html di Chrome diseret ke warna latar belakang yang berbeda, sudut-sudut itu akan muncul. Dalam kasus saya, saya memiliki situasi itu. Ini dapat diatasi meskipun berhasil dengan menentukan gambar hantu.

Berlari ke masalah yang sama ini. Akhirnya berhasil memperbaikinya dengan menambahkan transform: 'translate(0, 0)' ke simpul yang saya inginkan sebagai pratinjau seret saya. Dapatkan beberapa wawasan dari halaman ini: https://kryogenix.org/code/browser/custom-drag-image.html karena ini menunjukkan contoh di mana sudut-sudutnya ada dan ke mana mereka pergi.

@douweknook terima kasih untuk ini. Menemukan solusi telah memakan banyak waktu.

@douweknook solusi luar biasa!

Implementasi css sederhana akan terlihat seperti:

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

Saya akan menghubungkan .sortable-chosen ke kelas elemen sortable Anda untuk memastikan bahwa gaya tidak diterapkan secara global. Misalnya, jika kelas elemen yang dapat diurutkan adalah "item", gunakan .item.sortable-chosen sebagai gantinya!

@douweknook YAY ....... terima kasih, itu memecahkan masalah bahkan dalam tangki javaScript murni Anda

@douweknook Anda seorang pria dan sarjana. Ini berfungsi untuk memperbaiki masalah radius perbatasan, tetapi masih memotong bayangan kotak. Catatan: ini berfungsi dengan baik di Firefox.

Saya membuat masalah terpisah untuk ini, untuk siapa pun yang tertarik. https://github.com/react-dnd/react-dnd/issues/2762