用js写一个能在父盒子范围内拖动效果、放大效果

我可以给你一些建议，你可以使用jQuery UI的draggable插件，它可以提供拖放功能，以及可以调整大小的resizable插件。你也可以使用更加可定制的拖动框架，比如Interact.js、Draggable.js、Sortable.js等等。

相关问题

用vue2写一个可拖动可放大缩小的盒子

以下是一个简单的用Vue 2实现可拖动可放大缩小的盒子的示例：

<template>
  <div class="box" ref="box"
    :style="{ top: boxTop + 'px', left: boxLeft + 'px', width: boxWidth + 'px', height: boxHeight + 'px' }"
    @mousedown="startDrag"
    @mousemove="dragBox"
    @mouseup="stopDrag"
    @mousewheel="zoomBox">
  </div>
</template>

<script>
export default {
  data() {
    return {
      boxTop: 0,
      boxLeft: 0,
      boxWidth: 200,
      boxHeight: 200,
      isDragging: false,
      mouseStartX: 0,
      mouseStartY: 0,
      originalBoxTop: 0,
      originalBoxLeft: 0,
      originalMouseX: 0,
      originalMouseY: 0,
    };
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.mouseStartX = event.clientX;
      this.mouseStartY = event.clientY;
      this.originalBoxTop = this.boxTop;
      this.originalBoxLeft = this.boxLeft;
      this.originalMouseX = event.clientX;
      this.originalMouseY = event.clientY;
    },
    dragBox(event) {
      if (this.isDragging) {
        const deltaX = event.clientX - this.mouseStartX;
        const deltaY = event.clientY - this.mouseStartY;
        this.boxTop = this.originalBoxTop + deltaY;
        this.boxLeft = this.originalBoxLeft + deltaX;
      }
    },
    stopDrag() {
      this.isDragging = false;
    },
    zoomBox(event) {
      event.preventDefault();
      const zoomFactor = event.deltaY > 0 ? 0.9 : 1.1;
      this.boxWidth *= zoomFactor;
      this.boxHeight *= zoomFactor;
      this.boxTop -= (this.boxHeight * (zoomFactor - 1)) / 2;
      this.boxLeft -= (this.boxWidth * (zoomFactor - 1)) / 2;
    },
  },
};
</script>

<style scoped>
.box {
  position: absolute;
  background-color: #ccc;
  border: 1px solid #000;
  cursor: move;
}
</style>

这个组件包含一个`<div>`元素，它的位置和大小可以通过计算属性`boxTop`，`boxLeft`，`boxWidth`和`boxHeight`来控制。`<div>`元素绑定了`mousedown`、`mousemove`、`mouseup`和`mousewheel`事件，用来实现拖动和缩放功能。

当用户按下鼠标左键时，`startDrag`方法被调用，记录鼠标的起始位置和盒子的原始位置。当用户移动鼠标时，`dragBox`方法被调用，计算鼠标移动的距离，并更新盒子的位置。当鼠标左键松开时，`stopDrag`方法被调用，设置`isDragging`为`false`，停止拖动。

当用户滚动鼠标滚轮时，`mousewheel`事件被触发，调用`zoomBox`方法实现缩放功能。根据滚轮滑动的方向，计算缩放因子，并更新盒子的大小和位置。

在样式中，盒子使用`position: absolute`定位，设置了背景颜色和边框，并指定了移动鼠标时的光标样式为`cursor: move`。scoped属性用于将CSS样式限制在当前组件内。

vue一个盒子内部包含另一个盒子，内部盒子可以自由移动，放大及缩小

你可以使用Vue.js结合CSS3和HTML5的Draggable API来实现一个盒子内部包含另一个盒子，内部盒子可以自由移动、放大和缩小的效果。下面是一个示例代码，可以实现这个效果：

HTML结构：

<div id="app">
  <div class="container" ref="container">
    <div class="box">
      <div class="inner-box" 
           ref="innerBox" 
           :style="{ transform: `translate(${x}px, ${y}px) scale(${scale})` }"
           @mousedown="handleMouseDown"
           @mouseup="handleMouseUp">
        Inner Box
      </div>
    </div>
  </div>
</div>

CSS样式：

.container {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  position: relative;
}

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  position: absolute;
  top: 100px;
  left: 100px;
}

.inner-box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  position: absolute;
  top: 50px;
  left: 50px;
  cursor: move;
}

Vue.js代码：

new Vue({
  el: '#app',
  data: {
    x: 0,
    y: 0,
    scale: 1,
    isDragging: false,
    initialMouseX: 0,
    initialMouseY: 0,
    initialX: 0,
    initialY: 0,
  },
  methods: {
    handleMouseDown(event) {
      this.isDragging = true;
      this.initialMouseX = event.clientX;
      this.initialMouseY = event.clientY;
      this.initialX = this.x;
      this.initialY = this.y;
    },
    handleMouseUp(event) {
      this.isDragging = false;
    },
  },
  mounted() {
    const innerBox = this.$refs.innerBox;
    const container = this.$refs.container;
    const containerRect = container.getBoundingClientRect();
    const innerBoxRect = innerBox.getBoundingClientRect();
    const aspectRatio = innerBoxRect.width / innerBoxRect.height;

    innerBox.style.width = `${innerBoxRect.width}px`;
    innerBox.style.height = `${innerBoxRect.height}px`;

    const resizeObserver = new ResizeObserver(() => {
      const innerBoxRect = innerBox.getBoundingClientRect();
      innerBox.style.width = `${innerBoxRect.width}px`;
      innerBox.style.height = `${innerBoxRect.width / aspectRatio}px`;
    });

    resizeObserver.observe(innerBox);

    document.addEventListener('mousemove', (event) => {
      if (this.isDragging) {
        const deltaX = event.clientX - this.initialMouseX;
        const deltaY = event.clientY - this.initialMouseY;

        this.x = this.initialX + deltaX;
        this.y = this.initialY + deltaY;
      }
    });

    document.addEventListener('wheel', (event) => {
      const delta = event.deltaY;
      const scaleFactor = delta < 0 ? 1.1 : 0.9;

      this.scale *= scaleFactor;
    });
  },
});

在上面的代码中，我们使用了Vue.js的响应式数据来控制内部盒子的位置和缩放比例。当鼠标按下时，我们记录下初始位置和初始鼠标位置，并将isDragging标志设置为true，表示正在拖动内部盒子。当鼠标抬起时，我们将isDragging标志设置为false，表示停止拖动。

我们还添加了一个ResizeObserver来监听内部盒子的大小变化，并根据它的宽高比来调整内部盒子的高度。

最后，我们在document上监听鼠标移动事件和鼠标滚轮事件，当鼠标移动时，根据鼠标的偏移量来更新内部盒子的位置；当鼠标滚动时，根据滚动的方向来更新内部盒子的缩放比例。