Interface Package for Vue (like Photoshop, PhpStorm, ...)

One option for building an interface with drag and drop functionality in Vue is to use the Vuedraggable package. This package provides a draggable component that can be used to create draggable lists, grids, and other elements. Additionally, you can use other Vue packages like Vuetify or BootstrapVue to create the panels and windows for your interface.

Here's an example of how you could use Vuedraggable to create a draggable list of images:

<template>
  <div>
    <draggable v-model="images">
      <div v-for="image in images" :key="image.id">
        <img :src="image.src" />
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      images: [
        { id: 1, src: 'image1.jpg' },
        { id: 2, src: 'image2.jpg' },
        { id: 3, src: 'image3.jpg' }
      ]
    }
  }
}
</script>

This code creates a draggable list of images using the Vuedraggable component. You can customize the appearance of the images and the list using CSS and other Vue components.