如何让文字在掉落时消失

Question

我在左边有一个愿望清单，里面有可以拖放的div，右边是那些div被丢弃的框。我需要在这些框的背景中留下半透明的文字，这样如果有人从文本中消失的方框中删除左边的div。

    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
      var eleid = ev.dataTransfer.getData("Text");
      var el = ev.target;

      if (el.id != 'div1' && el.id != 'div2' && el.id != 'div3' && el.id != 'div4') {
        // el = el.parentNode;

        if (el.id != 'div6') {
          el = document.getElementById('div6');
        }
      }
      el.appendChild(document.getElementById(eleid));
      ev.preventDefault();
    }

    function change(box) {
      if ($(box).css('height') == '280px') {
        $(box).css({
          'width': '850px',
          'height': '480px',
          'z-index': '100'
        });
      } else {
        $(box).css({
          'width': '100%',
          'height': '280px',
          'z-index': '00'

        });
      }
    }
    <div class="row">
  <div class="col-md-4 me" >
  <div class="big-title pull-left">

    <h1 class="col-md-12" style="text-align:center;"><i class="fa fa-heart-o" style="color:"></i>

        Wishlist
    </h1>
</div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)" class="go">
  
      <ul>
 
   

      <li>
        <div id="drag9" class="gh col-md-12" style="background:#F5F5F5" draggable="true" ondragstart="drag(event)">
        <div class="col-md-4">
      <img  src="https://www.udemy.com/staticx/udemy/images/v5/logo-green.svg" />
      </div>
    
      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample title with a lot of words and letters</h3>
</div>

<ul class="col-md-12">
         
         
         <li class="col-md-5 "><i class="fa fa-credit-card" aria-hidden="true"> $200</i></li>
               
       <li class="col-md-7"><i class="fa fa-calendar" aria-hidden="true"> 6 weeks </i></li>
       <li class="col-md-5 "><i class="fa fa-star" aria-hidden="true"> 6/10</i></li>
       <li class="col-md-7"><i class="fa fa-university" aria-hidden="true"> course era </i></li>
        
         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-5">
         <a href="" type="submit" class="btn btn-mine pull-right">Go to course</a>
         </li>
         <li class="col-md-7">

         <a href="" type="submit" class="btn btn-default pull-">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li>
<li>
        <div id="drag9" class="gh col-md-12" style="background:#F5F5F5" draggable="true" ondragstart="drag(event)">
        <div class="col-md-4">
      <img  src="https://www.udemy.com/staticx/udemy/images/v5/logo-green.svg" />
      </div>
    
      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample title with a lot of words and letters</h3>
</div>

<ul class="col-md-12">
         
         
         <li class="col-md-5 "><i class="fa fa-credit-card" aria-hidden="true"> $200</i></li>
               
       <li class="col-md-7"><i class="fa fa-calendar" aria-hidden="true"> 6 weeks </i></li>
       <li class="col-md-5 "><i class="fa fa-star" aria-hidden="true"> 6/10</i></li>
       <li class="col-md-7"><i class="fa fa-university" aria-hidden="true"> course era </i></li>
        
         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-5">
         <a href="" type="submit" class="btn btn-mine pull-right">Go to course</a>
         </li>
         <li class="col-md-7">

         <a href="" type="submit" class="btn btn-default pull-">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li>
<li>
        <div id="drag9" class="gh col-md-12" style="background:#F5F5F5" draggable="true" ondragstart="drag(event)">
        <div class="col-md-4">
      <img  src="https://www.udemy.com/staticx/udemy/images/v5/logo-green.svg" />
      </div>
    
      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample title with a lot of words and letters</h3>
</div>

<ul class="col-md-12">
         
         
         <li class="col-md-5 "><i class="fa fa-credit-card" aria-hidden="true"> $200</i></li>
               
       <li class="col-md-7"><i class="fa fa-calendar" aria-hidden="true"> 6 weeks </i></li>
       <li class="col-md-5 "><i class="fa fa-star" aria-hidden="true"> 6/10</i></li>
       <li class="col-md-7"><i class="fa fa-university" aria-hidden="true"> course era </i></li>
        
         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-5">
         <a href="" type="submit" class="btn btn-mine pull-right">Go to course</a>
         </li>
         <li class="col-md-7">

         <a href="" type="submit" class="btn btn-default pull-">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li>
<li>
        <div id="drag9" class="gh col-md-12" style="background:#F5F5F5" draggable="true" ondragstart="drag(event)">
        <div class="col-md-4">
      <img  src="f" />
      </div>
    
      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample title with a lot of words and letters</h3>
</div>

<ul class="col-md-12">
         
         
         <li class="col-md-5 "><i class="fa fa-credit-card" aria-hidden="true"> $200</i></li>
               
       <li class="col-md-7"><i class="fa fa-calendar" aria-hidden="true"> 6 weeks </i></li>
       <li class="col-md-5 "><i class="fa fa-star" aria-hidden="true"> 6/10</i></li>
       <li class="col-md-7"><i class="fa fa-university" aria-hidden="true"> course era </i></li>
        
         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-5">
         <a href="" type="submit" class="btn btn-mine pull-right">Go to course</a>
         </li>
         <li class="col-md-7">

         <a href="" type="submit" class="btn btn-default pull-">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li>





         
         </ul>
         </div>
         </div>
         <br>
   
<div class="col-md-8" >

            <div class="row " >
                <div class="col-md-6 ">
                    <h2 style="color:#1FDA9A"><strong>Done</strong></h2>
                </div>
                <div class="col-md-6">
                    <h2 style="color:#28ABE3"><strong>Tracking</strong></h2>
                </div>
            </div>
            <div class="row boxes">
                <div class="col-md-6" >
                    <div class="box first" style="background:#1FDA9A" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
                        <button class="left btn btn-2" onclick="change('.first')" type="button"><i class="fa  fa-arrows-alt"></i></button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box second" style="background:#28ABE3;" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"">
                        <button class="right btn btn-32" onclick="change('.second')" type="button"><i class="fa fa-arrows-alt" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-6">
                    <h2 style="color:#DB3340"><strong>Pursuing</strong></h2>
                </div>
                <div class="col-md-6">
                    <h2 style="color:#E8B71A"><strong>Dropped</strong></h2>
                </div>
            </div>
            <div class="row boxes">
                <div class="col-md-6">
                    <div class="box third" style="background:#DB3340" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">

                        <button class="left btn btn-4" onclick="change('.third')" type="button"><i class="fa fa-arrows-alt" aria-hidden="true"></i></button>

<div >
                           <h1  style="z-index: 100">Drag and drop something to traack it</h1>
                           </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box fourth" id="div4" style="background:#E8B71A" ondrop="drop(event)" ondragover="allowDrop(event)">
                        <button class="right btn btn-5" onclick="change('.fourth')" type="button"><i class="fa fa-arrows-alt" aria-hidden="true"></i></button>
                    </div>
               
            </div>
        </div>
</div>
</div>
</div>