title: Problem showing background when dragging a draggable element into a droppable element vues?
body: <p>I have a Vuejs application that uses vuedraggable (<a href="https://www.npmjs.com/package/vuedraggable" rel="nofollow noreferrer">https://www.npmjs.com/package/vuedraggable</a>). What I want is that when moving the elements in the list will show the background color for the areas containing those elements. My idea is to create a true/false variable and pass in the @dragenter and @drop events. You can see how I do it below. the problem is I am catching the background color cancellation when the user drops an element in the dropable area. But the background color won't disappear if drop the element into a non-dropable area. How can this be fixed? Here is my description.</p>
  <pre><code>&lt;div class=&quot;border p-3 h--160 overflow-y-auto position-relative&quot;&gt;
                  &lt;Loading v-if=&quot;!isOrderFormat ? isEcLoading : isErpLoading&quot; /&gt;
                  &lt;div
                    v-for=&quot;item, index in !isOrderFormat ? listFormatEC : listFormatERP&quot;
                    v-else
                    :key=&quot;index&quot;
                    class=&quot;d-flex align-items-center mb-2 item&quot;
                  &gt;
                    &lt;label
                      class=&quot;mb-0 pr-3 w--25 text-line-clamp-1 fwb&quot;
                    &gt;{{ !isOrderFormat ? item.fieldName : item.erpFieldName }}&lt;/label&gt;
                    &lt;div
                      ref=&quot;mappingContainer&quot;
                      class=&quot;d-flex flex-1 border minh--9 w--50 overflow-x-auto&quot;
                      :class=&quot;isHover &amp;&amp; selectedList === (!isOrderFormat ? item.erpMapping : item.ecMapping) ? 'bg-secondary-tint-2': ''&quot;
                    &gt;
                      &lt;draggable
                        :list=&quot;!isOrderFormat ? item.erpMapping : item.ecMapping&quot;
                        :group=&quot;{name: `formatEC${index}`, put: ['all', `formatEC${index}`]}&quot;
                        class=&quot;d-flex align-items-center flex-1&quot;
                        :class=&quot;!isOrderFormat &amp;&amp; item.requiredFlag === 1 ? 'required-field' : ''&quot;
                        @dragenter.native=&quot;checkDroppable(true, !isOrderFormat ? item.erpMapping : item.ecMapping)&quot;
                        @drop.native=&quot;checkDroppable(false)&quot;
                        @change=&quot;checkDuplicate($event, item, 'child')&quot;
                      &gt;
                        &lt;span
                          v-for=&quot;i, subIndex in !isOrderFormat ? item.erpMapping : item.ecMapping&quot;
                          :key=&quot;subIndex&quot;
                          class=&quot;text-center text-truncate cursor-move bg-secondary-tint px-2 py-1 rounded m-1 minw--20&quot;
                        &gt;{{ !isOrderFormat ? i.erpFieldName : i.fieldName
                        }}&lt;/span&gt;
                      &lt;/draggable&gt;
                    &lt;/div&gt;
                    &lt;div
                      class=&quot;w--9 h--9 item-setting flex-center align-self-start cursor-pointer&quot;
                      @click=&quot;openModalMappingSetting(item)&quot;
                    &gt;
                      &lt;i class=&quot;fs-15 fas fa-cog&quot; /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  </code></pre>
  <p><strong>And the function</strong></p>
  <pre><code>checkDroppable(status: boolean, list: []): void {
      this.selectedList = list
      if (status) {
        this.isHover = true
      } else {
        this.isHover = false
      }
    }
  </code></pre>