قرار دادن تصویر داخل textarea

سلام هر چیه سعی کردم توی کدپن پروژه بزارم نشد و امیدوارم صحبت ام مفهوم باشه من چندتا تصویر محصول سمت راست گذاشتم و یک تکست باکس اون وسط قرار گرفته که کاربر بتونه درگ دراپ کنه و تصویر و توضیحات محصول داخل اش قرار بگیره تونستم پیاده کنم و فقط موردی که هست اینه تصویر با درگ اول روی تکست باکس نمایش داده میشه من میخوام یک حلقه بنویسم که بگم تا زمان رسیدن به مختصات تکست باکس نمایش داده نشه و وقتی رسید نمایش داده بشه
با این فانکشن نمایش داده میشه پیش فرض

function drag(e){
  let transfer = e.dataTransfer.setData("text", e.target.alt);
  if (e.target.tagName == 'IMG'){
    //console.log(`${e.clientX} , ${e.clientY}`);
    txtbox.classList.add('active');
    txtbox.style.filter = "hue-rotate(260deg)";
    filter_img();
    e.dataTransfer.effectAllowed = "copy";
  }else{
    console.log('dosent work!')
  }

}

حالا اگه بخوام بگم تا رسیدن به تکست باکس نمایش داده بشه

for(const size = 0; e.clientX || e.clientY === txtbox; size+=1){
  if(e.clientX || e.clientY === txtbox){
    console.log(`${e.clientX} , ${e.clientY}`);
    txtbox.classList.add('active');
  }else{
    txtbox.removeProperty('background-image');
  }

}