Lock items in list

[LauwersA]

I'm currently working on dragging in nested lists, but i can't seem to find a way to lock specific items from being draggable. I have a list of users with events, but some items shouldn't be moveable from one user to another

[soju-ti]

Hi, you can prevent dragging by adding a handle prop to the draggable component. the value for the prop is a class. add that class to place where you only want dragging. Also, you can prevent dropping by listening to move callback. Please see code

<draggable v-model="grid_posts" :end="dragEnd" handle=".handle" :move="onMoveCallback">
     <transition-group tag="div" class="grid" name="grid">
		<div class="post-image" v-bind:class="{ handle: index>3 }" v-for="(grid_post,index) in grid_posts" :key="grid_post.id">
			<img :src="grid_post.media_url" style="width: 100%">
		</div>
	</transition-group> 
</draggable>

<script>
onMoveCallback(evt){
            //prevent dropping if index is 7  see https://github.com/SortableJS/Vue.Draggable#user-content-move
            if(evt.relatedContext.index==7){
                return false;
            }
            
 },
dragEnd(e){
            console.log(this.grid_posts);
},
</script>