React-dnd: Posisi DragPreview salah saat menggunakan translate3d pada node turunan
Hei!
Kami mencoba membuat elemen dapat diseret, yang berisi gaya css translate3d di beberapa titik. Sayangnya ini mereposisi seluruh drag-layer. Saya tidak begitu mengerti mengapa, karena translate3d tidak berada pada elemen root, tetapi pada node turunannya.
Saya mengumpulkan contoh yang sangat sederhana, menunjukkan masalahnya kepada Anda. (Untuk membuatnya bekerja, Anda perlu menempatkan ReactDnD.min.js di folder "./scripts/react-dnd-1.1.4/dist", karena saya tidak menemukan CDN yang menjadi host ReactDnD).
Terimakasih atas bantuannya!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DragPreview with wrong position example</title>
<script src="http://fb.me/react-with-addons-0.13.3.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="scripts/react-dnd-1.1.4/dist/ReactDnD.min.js"></script>
<style>
.ReactDnDElement {
background: red;
overflow: hidden;
width: 200px;
height: 100px;
}
.ReactDnDElement .wrapper {
display: flex;
align-items: center;
width: 600px;
height: 100%;
transform: translate3d(-275px, 0, 0);
}
.ReactDnDElement .wrapper div {
width: 150px;
height: 50%;
}
.ReactDnDElement .wrapper div.green { background: green; }
.ReactDnDElement .wrapper div.blue { background: blue; }
.ReactDnDElement .wrapper div.yellow { background: yellow; }
.ReactDnDElement .wrapper div.magenta { background: magenta; }
</style>
</head>
<body>
<script type="text/jsx">
/* ReactDnDApp */
var ReactDnDApp = React.createClass({
render: function() {
return (
<ReactDnDElement></ReactDnDElement>
);
}
});
ReactDnDApp = ReactDnD.DragDropContext(ReactDnD.HTML5)(ReactDnDApp)
/* ReactDnDElement */
var ReactDnDElement = React.createClass({
render: function() {
return this.props.connectDragSource(
this.props.connectDragPreview(
<div className="ReactDnDElement">
<div className="wrapper">
<div className="green"></div>
<div className="blue"></div>
<div className="yellow"></div>
<div className="magenta"></div>
</div>
</div>
)
);
}
});
ReactDnDElement = ReactDnD.DragSource("dndElement", {
beginDrag: function(props) {
return {};
}
}, function(connect, monitor) {
return {
connectDragSource: connect.dragSource(),
connectDragPreview: connect.dragPreview()
};
})(ReactDnDElement);
/* RUN IT! */
React.render(React.createElement(ReactDnDApp), document.body);
</script>
</body>
</html>
delijah
Semua 5 komentar
Sepertinya ada masalah dengan fungsionalitas seret dan lepas html5 asli juga. Jika saya mencoba hal yang sama dengan metode drag and drop html5 asli, itu berfungsi dengan benar untuk firefox dan safari, tetapi tidak untuk chrome dan opera.
Dengan react-dnd masalah ini tidak ada di safari, tetapi untuk chrome, opera DAN FIREFOX ada.
Saya telah membuka masalah untuk chromium: https://code.google.com/p/chromium/issues/detail?id=525604
delijah
pada 26 Agu 2015
Ada niat untuk memperbaiki bug ini?
delijah
pada 8 Sep 2015
Hal-hal buruk. Saya hanya menghabiskan dua jam untuk ini dan saya tidak tahu bagaimana membuatnya bekerja.
Ini sepertinya salah satu inkonsistensi browser yang mengerikan. Nilai x dan y diteruskan ke dataTransfer.setDragImage diinterpretasikan oleh browser secara berbeda ketika setiap anak dari elemen yang berinteraksi dengan Anda diposisikan dengan offset negatif ke induknya. Perhatikan bagaimana mengubah transformasi menjadi positif secara ajaib membuatnya berhasil.
Alasan Anda tidak melihat masalah ini pada beberapa contoh seret dan lepas HTML5 vanilla di Firefox kemungkinan besar karena mereka tidak menentukan x dan y , dan nilai default berubah menjadi "bekerja saja ". Namun kami _membutuhkan_ untuk menentukannya agar item yang diseret muncul di tempat yang benar dalam banyak kasus.
Saya ragu ada solusi yang layak di sini. Jika salah satu turunan yang sangat bertingkat dari node sumber seret berada di luar batas ke kiri atau tepi atas, setDragImage(node, x, y) berhenti berfungsi dengan benar di beberapa browser. Sekali lagi, meskipun kami mencoba memperbaikinya untuk beberapa browser, kami pasti akan merusaknya di browser lain, jadi saya rasa kami tidak dapat memperbaikinya dengan andal.
Saya akan menutup, tetapi jangan ragu untuk mencari solusinya! Untuk saat ini, saya sarankan untuk menghindari transformasi negatif di dalam sumber drag. Perhatikan bahwa Anda dapat memindahkan connectDragSource _inside_ pembungkus yang telah diubah:
.ReactDnDElement {
background: red;
overflow: hidden;
width: 200px;
height: 100px;
}
.ReactDnDElement .transform {
transform: translate3d(-275px, 0, 0);
width: 100%;
height: 100%;
}
.ReactDnDElement .wrapper {
display: flex;
align-items: center;
width: 600px;
height: 100%;
}
.ReactDnDElement .wrapper div {
width: 150px;
height: 50%;
}
.ReactDnDElement .wrapper div.green { background: green; }
.ReactDnDElement .wrapper div.blue { background: blue; }
.ReactDnDElement .wrapper div.yellow { background: yellow; }
.ReactDnDElement .wrapper div.magenta { background: magenta; }
var ReactDnDElement = React.createClass({
render: function() {
return (
<div className="ReactDnDElement">
<div className="transform">
{this.props.connectDragSource(
<div className="wrapper">
<div className="green"></div>
<div className="blue"></div>
<div className="yellow"></div>
<div className="magenta"></div>
</div>
)}
</div>
</div>
);
}
});
Namun cara ini hanya bagian anak yang akan digunakan sebagai gambar tarik — tidak yakin apakah Anda menginginkannya.
Sayangnya ini yang terbaik yang bisa saya sarankan. Jika ini adalah masalah besar bagi Anda, harap pertimbangkan untuk menggunakan backend React DnD alternatif daripada HTML5: misalnya, backend mouse seperti di # 70, yang tidak akan mengalami masalah ini karena tidak bergantung pada setDragImage . Pilihan lainnya adalah tetap menggunakan backend HTML5, tetapi gunakan lapisan seret khusus yang tidak bergantung pada setDragImage .
gaearon
pada 17 Sep 2015
Hei! Terima kasih telah melihat ini. Ya memang hal-hal buruk! Saya harap teman-teman browser segera memperbaiki masalah ini ..
delijah
pada 23 Sep 2015
Saya harap teman-teman browser segera memperbaiki masalah ini ..
Tidak mungkin. Seret dan lepas HTML5 distandarisasi di atas perilaku IE5, dan telah rusak serta tidak konsisten selama berabad-abad. Karena web menjadi lebih kompleks, saya menduga itu hanya akan menjadi lebih buruk, bukan lebih baik. Penanganan mouse dan sentuh khusus adalah solusi yang lebih baik dan saya berharap backend React DnD tersebut dipublikasikan.
gaearon
pada 24 Sep 2015
Masalah terkait
bebbi
·
3Komentar
user1736
·
3Komentar
yaoyuande
·
3Komentar
vickyvxr
·
3Komentar
croraf
·
3Komentar
Komentar yang paling membantu
Tidak mungkin. Seret dan lepas HTML5 distandarisasi di atas perilaku IE5, dan telah rusak serta tidak konsisten selama berabad-abad. Karena web menjadi lebih kompleks, saya menduga itu hanya akan menjadi lebih buruk, bukan lebih baik. Penanganan mouse dan sentuh khusus adalah solusi yang lebih baik dan saya berharap backend React DnD tersebut dipublikasikan.