实现指定区域自由拖拽、打印功能的攻略如下：

准备

安装Vue和Vue-draggable插件

npm install vue vue-draggable

自由拖拽

在Vue的template中，使用vue-draggable插件的vuedraggable组件定义拖拽区域。

<template>
  <div>
    <h1>可拖拽项目列表</h1>
    <vuedraggable v-model="list">
      <div v-for="(item, index) in list" :key="index">
        {{ item.name }}
      </div>
    </vuedraggable>
  </div>
</template>

在Vue的script中，定义拖拽区域的数据，并在mounted钩子函数中绑定事件。

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        { name: '项目1' },
        { name: '项目2' },
        { name: '项目3' },
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      const draggableElement = document.querySelector(".drag-container");
      const draggable = new Draggable.Sortable(draggableElement, {
        draggable: ".draggable-item",
        handle: ".draggable-handle",
      });
    });
  },
};
</script>

对于绑定的事件，可以采用Draggable.js进行拖拽处理，此处为初始化时进行绑定。

打印功能

在Vue的template中，使用原生HTML定义打印区域。

<template>
  <div>
    <h1>打印区域</h1>
    <div ref="printableContent">
      <p v-for="(item, index) in list" :key="index">{{ item.name }}</p>
    </div>
    <button @click="print">打印</button>
  </div>
</template>

在Vue的script中，定义需要打印的数据，并使用window.print()进行打印。

<script>
export default {
  data() {
    return {
      list: [
        { name: '项目1' },
        { name: '项目2' },
        { name: '项目3' },
      ]
    };
  },
  methods: {
    print() {
      const printableContent = this.$refs.printableContent;
      const content = printableContent.innerHTML;

      const popup = window.open("", "_blank", "width=600,height=600");
      popup.document.open();
      popup.document.write(`
        <html>
          <head>
            <title>打印</title>
          </head>
          <body>
            ${content}
          </body>
        </html>
      `);
      popup.document.close();
      popup.focus();
      popup.print();
      popup.close();
    },
  },
};
</script>

以上就是实现指定区域自由拖拽、打印功能的攻略，示例代码详见以下链接：