আমি রিঅ্যাক্ট-ডিএনডি বাস্তবায়িত করেছি , সম্পূর্ণ ডিওএম নিয়ন্ত্রণের সাথে প্রতিক্রিয়াটির জন্য একটি নমনীয় এইচটিএমএল 5 ড্র্যাগ-অ্যান্ড-ড্রপ মিক্সিন।
বিদ্যমান ড্র্যাগ অ্যান্ড ড্রপ লাইব্রেরিগুলি আমার ব্যবহারের ক্ষেত্রে ফিট করে না তাই আমি আমার নিজের লেখা। এটি স্ট্যাম্পসি ডটকম-এ আমরা প্রায় এক বছর ধরে চালাচ্ছি এমন কোডের মতো, তবে প্রতিক্রিয়া এবং ফ্লাক্সের সুবিধা নিতে পুনরায় লিখে।
মূল প্রয়োজনীয়তাগুলি আমার ছিল:
- এর নিজস্ব শূন্য ডিওএম বা সিএসএস নির্গত করুন, এটি গ্রাসকারী উপাদানগুলিতে রেখে দেয়;
- গ্রাসকারী উপাদানগুলিতে যতটা সম্ভব কাঠামো চাপিয়ে দিন;
- এইচটিএমএল 5 টানুন এবং প্রাথমিক ব্যাকএন্ড হিসাবে ড্রপ ব্যবহার করুন তবে ভবিষ্যতে বিভিন্ন ব্যাকএন্ড যুক্ত করা সম্ভব করে দিন;
- আসল এইচটিএমএল 5 এপিআই-এর মতো, ডেটা টেনে আনার উপর জোর দিন এবং কেবল "ড্র্যাগেবল ভিউ" নয়;
- গ্রাহক কোড থেকে এইচটিএমএল 5 এপিআই কিরকগুলি লুকান;
- বিভিন্ন উপাদান বিভিন্ন ধরণের ডেটার জন্য "টেনে আনার উত্স" বা "ড্রপ লক্ষ্যমাত্রা" হতে পারে;
- একটি উপাদানকে কয়েকটি টানা উত্স থাকতে দেয় এবং যখন প্রয়োজন হয় তখন লক্ষ্যগুলি ফেলে দেয়;
- যদি সামঞ্জস্যপূর্ণ ডেটা টেনে আনে বা আটকানো হয় তবে ড্রপ লক্ষ্যগুলি তাদের চেহারা পরিবর্তন করা সহজ করে দিন;
- ব্রাউজারের কীর্তিগুলিকে পরিবর্তন করে অ্যালিমেন্টের স্ক্রিনশটগুলির পরিবর্তে থাম্বনেইলগুলির জন্য চিত্রগুলি ব্যবহার করা সহজ করুন।
এই শব্দগুলি যদি আপনার পরিচিত হয় তবে পড়ুন।
ব্যবহার
সাধারণ টানা উত্স
প্রথমে এমন ধরণের ডেটা ঘোষণা করুন যা টেনে আনা যায়।
এগুলি টেনে আনার উত্সের "সামঞ্জস্য" এবং ড্রপ লক্ষ্যগুলি পরীক্ষা করতে ব্যবহৃত হয়:
module.exports = {
BLOCK: 'block',
IMAGE: 'image'
};
(আপনার যদি একাধিক ডেটা প্রকার না থাকে তবে এই লিবারিটি আপনার জন্য নাও হতে পারে))
তারপরে, আসুন একটি খুব সহজ ড্রাগেবল উপাদান যা টেনে আনার সময় উপস্থাপন করে IMAGE:
var { DragDropMixin } = require('react-dnd'),
ItemTypes = require('./ItemTypes');
var Image = React.createClass({
mixins: [DragDropMixin],
configureDragDrop(registerType) {
registerType(ItemTypes.IMAGE, {
dragSource: {
beginDrag() {
return {
item: this.props.image
};
}
}
});
},
render() {
return (
<img src={this.props.image.url}
{...this.dragSourceFor(ItemTypes.IMAGE)} />
);
}
);
নির্দিষ্ট করে configureDragDrop, আমরা DragDropMixinএই উপাদানটির ড্রাগ-ড্রপ আচরণটি বলি । উভয় ড্রাগযোগ্য এবং ড্রপযোগ্য উপাদান একই মিশ্রণ ব্যবহার করে।
এর ভিতরে configureDragDrop, registerTypeআমাদের প্রতিটি কাস্টমকে কল করতে হবে ItemTypesযা উপাদানটি সমর্থন করে। উদাহরণস্বরূপ, আপনার অ্যাপ্লিকেশনটিতে চিত্রগুলির বেশ কয়েকটি উপস্থাপনা থাকতে পারে এবং প্রত্যেকটির dragSourceজন্য একটি সরবরাহ করা হবে ItemTypes.IMAGE।
এ dragSourceহ'ল কেবলমাত্র একটি অবজেক্ট যা নির্দিষ্ট করে ড্রাগ ড্রাগ কীভাবে কাজ করে। আপনি beginDragযে আইটেমটি টেনে আনছেন সেই ডেটার প্রতিনিধিত্ব করে এবং allyচ্ছিকভাবে, কয়েকটি বিকল্প যা ড্র্যাগিং ইউআই সামঞ্জস্য করে তা প্রত্যাবর্তন করতে আপনাকে অবশ্যই প্রয়োগ করতে হবে । আপনি canDragটেনে আনতে নিষেধ করতে , বা endDrag(didDrop)ড্রপটি ঘটে (বা হয়নি) কিছু যুক্তি সম্পাদন করতে optionচ্ছিকভাবে প্রয়োগ করতে পারেন । এবং আপনি এই যুক্তিটি উপাদানগুলির মধ্যে ভাগ করে নিতে পারেন dragSourceতাদের জন্য একটি ভাগ করা মিক্সিন জেনারেট করে।
অবশেষে, আপনাকে অবশ্যই ড্রাগ {...this.dragSourceFor(itemType)}(কিছু বা একাধিক) উপাদান ব্যবহার করতে হবে renderড্রাগ হ্যান্ডলার সংযুক্ত করার জন্য। এর অর্থ আপনার একটি উপাদানে বেশ কয়েকটি "ড্রাগন হ্যান্ডলগুলি" থাকতে পারে এবং এগুলি বিভিন্ন আইটেমের ধরণেরও হতে পারে। (আপনি যদি জেএসএক্স স্প্রেড অ্যাট্রিবিউট সিনট্যাক্সের সাথে পরিচিত না হন তবে এটি পরীক্ষা করে দেখুন)।
সাধারণ ড্রপ লক্ষ্যমাত্রা
ধরা যাক আমরা এর ImageBlockজন্য একটি ড্রপ টার্গেট হতে চাই IMAGE। এটি বেশ প্রায় একই, আমাদের registerTypeএকটি dropTargetবাস্তবায়ন দেওয়ার প্রয়োজন ব্যতীত :
var { DragDropMixin } = require('react-dnd'),
ItemTypes = require('./ItemTypes');
var ImageBlock = React.createClass({
mixins: [DragDropMixin],
configureDragDrop(registerType) {
registerType(ItemTypes.IMAGE, {
dropTarget: {
acceptDrop(image) {
DocumentActionCreators.setImage(this.props.blockId, image);
}
}
});
},
render() {
return (
<div {...this.dropTargetFor(ItemTypes.IMAGE)}>
{this.props.image &&
<img src={this.props.image.url} />
}
</div>
);
}
);
উত্স + ড্রপ টার্গেট এক অংশে টেনে আনুন
বলুন আমরা এখন ব্যবহারকারীকে কোনও চিত্র বাইরে নিয়ে যেতে সক্ষম করতে চাই ImageBlock। আমাদের কেবল dragSourceএটিতে উপযুক্ত সংযোজন এবং কয়েকটি হ্যান্ডলারের প্রয়োজন:
var { DragDropMixin } = require('react-dnd'),
ItemTypes = require('./ItemTypes');
var ImageBlock = React.createClass({
mixins: [DragDropMixin],
configureDragDrop(registerType) {
registerType(ItemTypes.IMAGE, {
dragSource: {
canDrag() {
return !!this.props.image;
},
beginDrag() {
return {
item: this.props.image
};
}
}
dropTarget: {
acceptDrop(image) {
DocumentActionCreators.setImage(this.props.blockId, image);
}
}
});
},
render() {
return (
<div {...this.dropTargetFor(ItemTypes.IMAGE)}>
{/* Add {...this.dragSourceFor} handlers to a nested node */}
{this.props.image &&
<img src={this.props.image.url}
{...this.dragSourceFor(ItemTypes.IMAGE)} />
}
</div>
);
}
);
আর কি সম্ভব?
আমি সমস্ত কিছু কভার করি নি তবে আরও কয়েকটি উপায়ে এই API ব্যবহার করা সম্ভব:
- টেনে আনতে সক্রিয় কিনা তা ব্যবহার
getDragState(type)এবং getDropState(type)শিখতে এবং এটি CSS ক্লাস বা বৈশিষ্ট্যগুলিতে টগল করতে ব্যবহার করুন;
- চিত্রগুলি টানা স্থানধারক হিসাবে ব্যবহার
dragPreviewকরতে হবে Imageতা নির্দিষ্ট করুন ( ImagePreloaderMixinসেগুলি লোড করার জন্য ব্যবহার করুন);
- বলুন, আমরা
ImageBlocksপুনরায় অর্ডারযোগ্য করতে চাই। আমাদের কেবল তাদের বাস্তবায়ন করা প্রয়োজন dropTargetএবং এর dragSourceজন্য ItemTypes.BLOCK।
- মনে করুন আমরা অন্যান্য ধরণের ব্লক যুক্ত করি। আমরা তাদের পুনর্বিন্যাস যুক্তিটিকে একটি মিশ্রণে রেখে পুনরায় ব্যবহার করতে পারি।
dropTargetFor(...types) এক সাথে একাধিক প্রকার নির্দিষ্ট করার অনুমতি দেয়, তাই একটি ড্রপ অঞ্চল অনেকগুলি বিভিন্ন ধরণের ধরতে পারে।- যখন আপনার আরও সূক্ষ্ম-নিয়ন্ত্রণযুক্ত নিয়ন্ত্রণের দরকার হয়, বেশিরভাগ পদ্ধতিগুলি টেনে নিয়ে যাওয়ার ঘটনাটি পাস করে যা তাদের শেষ প্যারামিটার হিসাবে তৈরি করে।
আপ-টু-ডেট ডকুমেন্টেশন এবং ইন্সটলেশন নির্দেশাবলীর জন্য, গিথুব-এ রি-টি-ডেন্ডো রেপোতে যান ।