<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue图片框选拖拽功能</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);color: #333;min-height: 100vh;padding: 20px;display: flex;justify-content: center;align-items: center;}.container {display: flex;flex-direction: column;width: 100%;max-width: 1200px;background: rgba(255, 255, 255, 0.92);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);overflow: hidden;}header {text-align: center;padding: 25px;background: linear-gradient(to right, #3494E6, #EC6EAD);color: white;}h1 {font-size: 2.5rem;margin-bottom: 10px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);}.subtitle {font-size: 1.2rem;opacity: 0.9;}.content {display: flex;padding: 30px;min-height: 600px;gap: 30px;}.panel {flex: 1;padding: 25px;border-radius: 12px;background: #f8f9fa;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);transition: all 0.3s ease;display: flex;flex-direction: column;}.panel-header {margin-bottom: 20px;padding-bottom: 15px;border-bottom: 2px solid #e0e0e0;display: flex;justify-content: space-between;align-items: center;}.panel-title {font-size: 1.8rem;color: #2c3e50;font-weight: 600;}.counter {background: #3498db;color: white;padding: 5px 12px;border-radius: 20px;font-weight: bold;font-size: 1.1rem;}.images-container {flex: 1;display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));gap: 20px;padding: 10px;overflow-y: auto;max-height: 450px;}.image-item {position: relative;border-radius: 10px;overflow: hidden;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);cursor: pointer;transition: all 0.3s ease;aspect-ratio: 1/1;}.image-item img {width: 100%;height: 100%;object-fit: cover;display: block;}.image-item.selected {transform: scale(0.95);box-shadow: 0 0 0 4px #3498db, 0 8px 16px rgba(0, 0, 0, 0.2);}.image-item.selected::after {content: "✓";position: absolute;top: 10px;right: 10px;width: 24px;height: 24px;background: #3498db;color: white;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-weight: bold;}.instructions {margin-top: 15px;padding: 15px;background: #e3f2fd;border-radius: 8px;font-size: 0.95rem;}.instructions h3 {margin-bottom: 8px;color: #1565c0;}.instructions ul {padding-left: 20px;}.instructions li {margin: 5px 0;}.drag-over {background: rgba(52, 152, 219, 0.15);box-shadow: inset 0 0 0 4px #3498db;}.fade-move {transition: transform 0.5s;}@media (max-width: 768px) {.content {flex-direction: column;}.panel {min-height: 400px;}}</style>
</head><body><div id="app"><div class="container"><header><h1>Vue图片框选拖拽功能</h1><div class="subtitle">鼠标框选图片后拖拽到目标区域</div></header><div class="content"><div class="panel" :class="{ 'drag-over': isDragOverSource }" @dragover.prevent="handleDragOver('source')"@dragleave="handleDragLeave('source')" @drop="handleDrop($event, 'source')"><div class="panel-header"><h2 class="panel-title">图片库</h2><div class="counter">{{ sourceImages.length }} 张图片</div></div><div class="images-container" @mousedown="startSelection" @mousemove="updateSelection" @mouseup="endSelection"@dragstart="handleGroupDragStart" draggable="true" ref="sourceContainer"><div v-for="(image, index) in sourceImages" :key="'source-' + image.id" class="image-item":class="{ 'selected': selectedImages.includes(image.id) }" @click="toggleSelect($event, image.id)":ref="'source-img-' + image.id"><img :src="image.url" :alt="'图片' + image.id"></div><div class="selection-box" v-if="isSelecting" :style="selectionBoxStyle"></div></div><div class="instructions"><h3>操作指南</h3><ul><li>点击图片进行选择（按住 Ctrl/Command 可多选）</li><li>按住鼠标<strong>拖动框选</strong>多个图片</li><li>拖拽选中图片到右侧收藏夹</li></ul></div></div><div class="panel" :class="{ 'drag-over': isDragOverTarget }" @dragover.prevent="handleDragOver('target')"@dragleave="handleDragLeave('target')" @drop="handleDrop($event, 'target')"><div class="panel-header"><h2 class="panel-title">我的收藏夹</h2><div class="counter">{{ targetImages.length }} 张图片</div></div><div class="images-container" @mousedown="startSelection" @mousemove="updateSelection" @mouseup="endSelection"@dragstart="handleGroupDragStart" draggable="true" ref="targetContainer"><div v-for="(image, index) in targetImages" :key="'target-' + image.id" class="image-item":class="{ 'selected': selectedImages.includes(image.id) }" @click="toggleSelect($event, image.id)":ref="'target-img-' + image.id"><img :src="image.url" :alt="'图片' + image.id"></div><div class="selection-box" v-if="isSelecting" :style="selectionBoxStyle"></div></div><div class="instructions"><h3>提示</h3><ul><li>已选择 <span class="highlight">{{ selectedImages.length }}</span> 张图片</li><li>从收藏夹拖回图片到图库可移除</li><li>支持跨区域拖拽操作</li></ul></div></div></div><div class="status-bar"><div>当前状态: {{ statusMessage }}</div><div>已选择: {{ selectedImages.length }} 张图片</div></div></div></div><script>function getImageUrl(id) {return `https://picsum.photos/200/200?random=${id}`;}new Vue({el: '#app',data: {sourceImages: Array.from({ length: 15 }, (_, i) => ({id: i + 1,url: getImageUrl(i + 1)})),targetImages: [],selectedImages: [],isDragOverSource: false,isDragOverTarget: false,lastSelectedIndex: -1,isSelecting: false,selectionStart: { x: 0, y: 0 },selectionEnd: { x: 0, y: 0 },currentContainer: null,statusMessage: "就绪"},computed: {selectionBoxStyle() {const left = Math.min(this.selectionStart.x, this.selectionEnd.x);const top = Math.min(this.selectionStart.y, this.selectionEnd.y);const width = Math.abs(this.selectionEnd.x - this.selectionStart.x);const height = Math.abs(this.selectionEnd.y - this.selectionStart.y);return {left: `${left}px`,top: `${top}px`,width: `${width}px`,height: `${height}px`,display: width > 2 && height > 2 ? 'block' : 'none'};}},methods: {startSelection(event) {if (event.target.classList.contains('image-item') ||event.target.parentElement.classList.contains('image-item')) {return;}this.isSelecting = true;this.currentContainer = event.currentTarget;const rect = this.currentContainer.getBoundingClientRect();this.selectionStart = {x: event.clientX - rect.left,y: event.clientY - rect.top};this.selectionEnd = { ...this.selectionStart };this.statusMessage = "框选操作中...";},updateSelection(event) {if (!this.isSelecting) return;const rect = this.currentContainer.getBoundingClientRect();this.selectionEnd = {x: event.clientX - rect.left,y: event.clientY - rect.top};const left = Math.min(this.selectionStart.x, this.selectionEnd.x);const top = Math.min(this.selectionStart.y, this.selectionEnd.y);const right = Math.max(this.selectionStart.x, this.selectionEnd.x);const bottom = Math.max(this.selectionStart.y, this.selectionEnd.y);const containerId = this.currentContainer === this.$refs.sourceContainer ? 'source' : 'target';const images = containerId === 'source' ? this.sourceImages : this.targetImages;images.forEach(image => {const imgRef = this.$refs[`${containerId}-img-${image.id}`][0];if (!imgRef) return;const imgRect = imgRef.getBoundingClientRect();const containerRect = this.currentContainer.getBoundingClientRect();const imgLeft = imgRect.left - containerRect.left;const imgTop = imgRect.top - containerRect.top;const imgRight = imgLeft + imgRect.width;const imgBottom = imgTop + imgRect.height;const isOverlapping =imgLeft < right &&imgRight > left &&imgTop < bottom &&imgBottom > top;if (isOverlapping) {if (!this.selectedImages.includes(image.id)) {this.selectedImages.push(image.id);}}});},endSelection() {if (!this.isSelecting) return;this.isSelecting = false;this.statusMessage = `已选择 ${this.selectedImages.length} 张图片`;},toggleSelect(event, imageId) {event.stopPropagation();if (event.shiftKey && this.lastSelectedIndex !== -1) {const currentIndex = this.findImageIndex(imageId);const start = Math.min(this.lastSelectedIndex, currentIndex);const end = Math.max(this.lastSelectedIndex, currentIndex);const allImages = [...this.sourceImages, ...this.targetImages];const range = allImages.slice(start, end + 1);this.selectedImages = range.map(img => img.id);} else if (event.ctrlKey || event.metaKey) {const index = this.selectedImages.indexOf(imageId);if (index > -1) {this.selectedImages.splice(index, 1);} else {this.selectedImages.push(imageId);}this.lastSelectedIndex = this.findImageIndex(imageId);} else {if (this.selectedImages.includes(imageId) && this.selectedImages.length === 1) {this.selectedImages = [];} else {this.selectedImages = [imageId];}this.lastSelectedIndex = this.findImageIndex(imageId);}this.statusMessage = `已选择 ${this.selectedImages.length} 张图片`;},findImageIndex(imageId) {const allImages = [...this.sourceImages, ...this.targetImages];return allImages.findIndex(img => img.id === imageId);},handleGroupDragStart(event) {if (this.selectedImages.length === 0) {event.preventDefault();return;}event.dataTransfer.setData('text/plain', JSON.stringify(this.selectedImages));event.dataTransfer.effectAllowed = 'move';this.statusMessage = "拖拽操作中...";},handleDragOver(area) {if (area === 'source') {this.isDragOverSource = true;this.isDragOverTarget = false;} else {this.isDragOverSource = false;this.isDragOverTarget = true;}},handleDragLeave(area) {if (area === 'source') {this.isDragOverSource = false;} else {this.isDragOverTarget = false;}},handleDrop(event, targetArea) {event.preventDefault();this.isDragOverSource = false;this.isDragOverTarget = false;const imageIdsToMove = JSON.parse(event.dataTransfer.getData('text/plain'));if (imageIdsToMove.length === 0) return;const sourceArea = this.sourceImages.some(img => imageIdsToMove.includes(img.id)) ? 'source' : 'target';if (sourceArea === targetArea) return;this.moveImages(imageIdsToMove, sourceArea, targetArea);this.selectedImages = [];this.statusMessage = `已移动 ${imageIdsToMove.length} 张图片`;},moveImages(imageIds, sourceArea, targetArea) {const sourceArray = sourceArea === 'source' ? this.sourceImages : this.targetImages;const targetArray = targetArea === 'source' ? this.sourceImages : this.targetImages;const imagesToMove = sourceArray.filter(img => imageIds.includes(img.id));if (sourceArea === 'source') {this.sourceImages = sourceArray.filter(img => !imageIds.includes(img.id));} else {this.targetImages = sourceArray.filter(img => !imageIds.includes(img.id));}if (targetArea === 'source') {this.sourceImages = [...this.sourceImages, ...imagesToMove];} else {this.targetImages = [...this.targetImages, ...imagesToMove];}}}});</script>
</body></html>
