Vue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
<div id="app">
  <p>
    Dropping anything on 333333333 position should be signalized with red background.
  </p>
  <hr />
  <p>
    Dropping on 333333333 - {{ warnMove }}
  </p>
  <hr />
  <div :class="{'warn-move': warnMove}">
    <draggable
      v-model="list"
      :move="canItBeDropped" >

      <div
        v-for="(num, index) in list"
        :key="index" >
        <div class="num-item">
          {{ num }}
        </div>
      </div>
    </draggable>
  </div>
</div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.num-item {
  padding: 5px 10px;
  border: 1px solid black;
  margin-bottom: 5px;
  background: white;
  cursor: pointer;
}

.sortable-ghost {
  opacity: 50%;
  .num-item {
    background: yellow !important;
    border: 1px solid red;
  }
}

.warn-move .sortable-ghost {
  opacity: 25%;
  .num-item {
    background: #FFA491 !important;
  }
}

.warn-move .sortable-drag {
  opacity: 25%;
  .num-item {
    background: blue !important;
  }
}

Vue

new Vue({
  el: "#app",
  data: {
    list: [
    	'1111111111',
      '2222222222',
      'Do not drop here',
      '4444444444',
      '5555555555',
    ],
    warnMove: false,
  },
  methods: {
  	canItBeDropped(event) {
      if (this.list[event.draggedContext.futureIndex] === 'Do not drop here') {
        this.warnMove = true;
      } else {
      	this.warnMove = false;
      }
    },
  }
})