আমি এগুলির সাথে অনেকগুলি লড়াই করেছিলাম, এমনকি এই সমস্ত উত্তর পড়ার পরেও, এবং ভেবেছিলাম যে আমি আমার সমাধানটি আপনার সাথে ভাগ করে নিতে পারি, কারণ আমি অনুভব করেছি যে এটি সহজ পদ্ধতির একটি হতে পারে, যদিও কিছুটা আলাদা। আমার চিন্তা কেবল বাদ দেওয়া ছিলdragleave ইভেন্ট শ্রোতাকে পুরোপুরি এবং ড্র্যাগেন্টার ইভেন্টগুলিকে অকারণে চালিত করা হবে না তা নিশ্চিত করে প্রতিটি নতুন ড্রেজেটার ইভেন্টের সাথে ড্র্যাগেরভে আচরণকে কোডিং করা ছিল।
নীচের আমার উদাহরণে, আমার একটি টেবিল রয়েছে, যেখানে আমি টানা সারি সামগ্রীগুলি একে অপরের সাথে টানুন এবং ড্রপ এপিআইয়ের মাধ্যমে বিনিময় করতে সক্ষম হতে চাই। চালু করার জন্য dragenter, আপনি বর্তমানে সারি উপাদানটিতে একটি সিএসএস শ্রেণি যুক্ত করা হবে যেখানে আপনি বর্তমানে আপনার উপাদানটি টানছেন, এটি হাইলাইট করার জন্য এবং dragleaveএই শ্রেণিটি সরানো হবে।
উদাহরণ:
খুব বেসিক এইচটিএমএল টেবিল:
<table>
<tr>
<td draggable="true" class="table-cell">Hello</td>
</tr>
<tr>
<td draggable="true" clas="table-cell">There</td>
</tr>
</table>
আর dragenter ইভেন্ট হ্যান্ডলার ফাংশন, প্রতিটি টেবিলের সেল সম্মুখের জোড়া হয়েছে (সরাইয়া dragstart, dragover, drop, এবং dragendহ্যান্ডেলার, যা এই প্রশ্নের নির্দিষ্ট নয়, তাই এখানে কপি না):
/*##############################################################################
## Dragenter Handler ##
##############################################################################*/
// When dragging over the text node of a table cell (the text in a table cell),
// while previously being over the table cell element, the dragleave event gets
// fired, which stops the highlighting of the currently dragged cell. To avoid
// this problem and any coding around to fight it, everything has been
// programmed with the dragenter event handler only; no more dragleave needed
// For the dragenter event, e.target corresponds to the element into which the
// drag enters. This fact has been used to program the code as follows:
var previousRow = null;
function handleDragEnter(e) {
// Assure that dragenter code is only executed when entering an element (and
// for example not when entering a text node)
if (e.target.nodeType === 1) {
// Get the currently entered row
let currentRow = this.closest('tr');
// Check if the currently entered row is different from the row entered via
// the last drag
if (previousRow !== null) {
if (currentRow !== previousRow) {
// If so, remove the class responsible for highlighting it via CSS from
// it
previousRow.className = "";
}
}
// Each time an HTML element is entered, add the class responsible for
// highlighting it via CSS onto its containing row (or onto itself, if row)
currentRow.className = "ready-for-drop";
// To know which row has been the last one entered when this function will
// be called again, assign the previousRow variable of the global scope onto
// the currentRow from this function run
previousRow = currentRow;
}
}
কোডগুলিতে খুব বুনিয়াদি মন্তব্যগুলি বাকী রয়েছে, যেমন এই কোডটি আরম্ভকারীদের পক্ষেও স্যুট। আশা করছি এটি তোমার সাহায্যে আসবে! মনে রাখবেন যে এটি অবশ্যই কাজ করার জন্য আপনার অবশ্যই প্রতিটি টেবিল সেলে আমি উল্লিখিত সমস্ত ইভেন্ট শ্রোতাদের যুক্ত করতে হবে।