实现将元素从a区域拖拽到b区域

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
    .dropZone {
        width: 500px;
        height: 200px;
        background-color: #f0f0f0;
        margin-top: 20px;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        border: 2px dashed transparent;
        transition: border-color 0.3s;
    }

    .draggableElement {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: #007bff;
        color: #fff;
        text-align: center;
        line-height: 100px;
        cursor: move;
        margin-bottom: 10px;
        margin-left: 12px;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .draggableElement.dragging {
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .dropZone.dragover {
        border-color: #007bff;
    }

    .actionButton {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 20px;
        height: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease-in-out;
        color: white;
        text-align: center;
        line-height: 17px;
        border-radius: 50%;
        cursor: pointer;
    }

    .removeButton {
        background-color: red;
    }

    .addButton {
        background-color: green;
    }

    .actionButton:hover {
        transform: scale(1.1);
    }
</style>
</head>
<body>

<div id="dropZone1" class="dropZone"></div>
<div id="dropZone2" class="dropZone"></div>

<button id="outputButton" onclick="outputElements()">Output</button>
<button id="resetButton" onclick="resetDraggableElements()">Reset</button>

<script>
    const elementsData = [
        { id: "dragElement1", text: "Drag Me 1" },
        { id: "dragElement2", text: "Drag Me 2" },
        { id: "dragElement3", text: "Drag Me 3" }
    ];

    const dropZone1 = document.getElementById("dropZone1");
    const dropZone2 = document.getElementById("dropZone2");

    function createDraggableElement(data) {
        const dragElement = document.createElement("div");
        dragElement.id = data.id;
        dragElement.className = "draggableElement";
        dragElement.draggable = true;
        dragElement.textContent = data.text;

        const removeButton = createButton("x", "removeButton", () => moveToDropZone(dragElement, dropZone1));
        const addButton = createButton("+", "addButton", () => moveToDropZone(dragElement, dropZone2));

        dragElement.appendChild(removeButton);
        dragElement.appendChild(addButton);

        dragElement.addEventListener("dragstart", (event) => {
            event.dataTransfer.setData("text/plain", event.target.id);
            event.target.classList.add("dragging");
        });

        dragElement.addEventListener("dragend", (event) => {
            event.target.classList.remove("dragging");
        });

        return dragElement;
    }

    function createButton(text, className, onClick) {
        const button = document.createElement("div");
        button.className = `actionButton ${className}`;
        button.textContent = text;
        button.addEventListener("click", (event) => {
            event.stopPropagation();
            onClick();
        });
        return button;
    }

    function moveToDropZone(element, targetZone) {
        targetZone.appendChild(element);
        updateButtonVisibility(element, targetZone === dropZone1);
    }

    function updateButtonVisibility(element, isInitial) {
        element.querySelector(".addButton").style.display = isInitial ? "block" : "none";
        element.querySelector(".removeButton").style.display = isInitial ? "none" : "block";
    }

    elementsData.forEach((data) => {
        const dragElement = createDraggableElement(data);
        dropZone1.appendChild(dragElement);
        updateButtonVisibility(dragElement, true);
    });

    document.querySelectorAll(".dropZone").forEach((dropZone) => {
        dropZone.addEventListener("dragover", (event) => {
            event.preventDefault();
            dropZone.classList.add("dragover");
        });

        dropZone.addEventListener("dragleave", () => {
            dropZone.classList.remove("dragover");
        });

        dropZone.addEventListener("drop", (event) => {
            event.preventDefault();
            dropZone.classList.remove("dragover");
            const data = event.dataTransfer.getData("text");
            const draggedElement = document.getElementById(data);
            if (draggedElement.parentElement !== dropZone) {
                moveToDropZone(draggedElement, dropZone);
            }
        });
    });

    function resetDraggableElements() {
        document.querySelectorAll("#dropZone2 .draggableElement").forEach((element) => {
            moveToDropZone(element, dropZone1);
        });
    }

    function outputElements() {
        const elementsInDropZone2 = Array.from(document.querySelectorAll("#dropZone2 .draggableElement"));
        const innerHTMLArray = elementsInDropZone2.map((element) => {
            return elementsData.find(data => data.id === element.id);
        });
        console.log(innerHTMLArray);
    }
</script>

</body>
</html>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现类似飞书日历的拖拽选择区域创建日程的功能,可以采用以下步骤: 1. 在 Vue 组件中引入 `vuedraggable` 和 `moment` 库,并注册 `vuedraggable` 组件。 ```vue <template> <div> <div ref="calendar" @mousedown="startDrag" @mousemove="dragging" @mouseup="endDrag" style="position: relative;"> <div v-for="day in days" :key="day" :style="{ width: columnWidth + 'px', display: 'inline-block' }"> {{ day }} </div> <div v-for="event in events" :key="event.id" :style="{ top: event.top + 'px', left: event.left + 'px', width: event.width + 'px', height: event.height + 'px', position: 'absolute', backgroundColor: event.color }"> {{ event.title }} </div> <div v-show="isDragging" :style="{ top: dragTop + 'px', left: dragLeft + 'px', width: dragWidth + 'px', height: dragHeight + 'px', position: 'absolute', backgroundColor: dragColor, opacity: 0.5 }"></div> </div> </div> </template> <script> import moment from 'moment'; import VueDraggable from 'vuedraggable'; export default { components: { VueDraggable, }, data() { return { days: [], // 日历的日期列表 events: [], // 日程列表 columnWidth: 100, // 每个日期列的宽度 isDragging: false, // 是否正在拖拽选择区域 dragStartX: 0, // 拖拽选择区域的起始 X 坐标 dragStartY: 0, // 拖拽选择区域的起始 Y 坐标 dragEndX: 0, // 拖拽选择区域的结束 X 坐标 dragEndY: 0, // 拖拽选择区域的结束 Y 坐标 dragTop: 0, // 拖拽选择区域的顶部位置 dragLeft: 0, // 拖拽选择区域的左侧位置 dragWidth: 0, // 拖拽选择区域的宽度 dragHeight: 0, // 拖拽选择区域的高度 dragColor: '#4285F4', // 拖拽选择区域的颜色 }; }, computed: { calendarWidth() { return this.days.length * this.columnWidth; }, }, mounted() { // 初始化日历日期列表 const startDate = moment().startOf('week'); this.days = Array.from({ length: 7 }, (_, i) => startDate.clone().add(i, 'days').format('YYYY-MM-DD')); // 初始化日程列表 this.events = [ { id: 1, title: '日程1', start: moment().add(1, 'hours').toDate(), end: moment().add(2, 'hours').toDate(), color: '#DB4437' }, { id: 2, title: '日程2', start: moment().add(1, 'days').add(2, 'hours').toDate(), end: moment().add(1, 'days').add(3, 'hours').toDate(), color: '#F4B400' }, { id: 3, title: '日程3', start: moment().add(2, 'days').add(1, 'hours').toDate(), end: moment().add(2, 'days').add(2, 'hours').toDate(), color: '#0F9D58' }, ]; this.updateEventsLayout(); }, methods: { startDrag(event) { if (event.target === this.$refs.calendar) { this.isDragging = true; this.dragStartX = event.clientX; this.dragStartY = event.clientY; this.dragEndX = event.clientX; this.dragEndY = event.clientY; this.dragTop = Math.min(this.dragStartY, this.dragEndY); this.dragLeft = Math.min(this.dragStartX, this.dragEndX); this.dragWidth = Math.abs(this.dragEndX - this.dragStartX); this.dragHeight = Math.abs(this.dragEndY - this.dragStartY); } }, dragging(event) { if (this.isDragging) { this.dragEndX = event.clientX; this.dragEndY = event.clientY; this.dragTop = Math.min(this.dragStartY, this.dragEndY); this.dragLeft = Math.min(this.dragStartX, this.dragEndX); this.dragWidth = Math.abs(this.dragEndX - this.dragStartX); this.dragHeight = Math.abs(this.dragEndY - this.dragStartY); } }, endDrag() { if (this.isDragging) { this.isDragging = false; const start = moment(this.$refs.calendar).add(this.dragLeft, 'px').add(this.dragTop, 'px').toDate(); const end = moment(this.$refs.calendar).add(this.dragLeft + this.dragWidth, 'px').add(this.dragTop + this.dragHeight, 'px').toDate(); const event = { id: this.events.length + 1, title: '新日程', start, end, color: '#4285F4' }; this.events.push(event); this.updateEventsLayout(); } }, updateEventsLayout() { for (const event of this.events) { const startMoment = moment(event.start); const endMoment = moment(event.end); const startDate = startMoment.format('YYYY-MM-DD'); const startHour = startMoment.hour(); const startMinute = startMoment.minute(); const endDate = endMoment.format('YYYY-MM-DD'); const endHour = endMoment.hour(); const endMinute = endMoment.minute(); const startColumnIndex = this.days.indexOf(startDate); const endColumnIndex = this.days.indexOf(endDate); event.top = startHour * 60 + startMinute; event.left = startColumnIndex * this.columnWidth; if (startColumnIndex === endColumnIndex) { event.width = this.columnWidth; } else { event.width = (endColumnIndex - startColumnIndex + 1) * this.columnWidth; } event.height = (endHour - startHour) * 60 + (endMinute - startMinute); } }, }, }; </script> ``` 在上面的代码中,我们使用 `ref` 属性引用了日历容器元素,并监听 `mousedown`、`mousemove` 和 `mouseup` 事件,实现拖拽选择区域的功能。在 `startDrag` 方法中初始化了选择区域的起始坐标,在 `dragging` 方法中更新了选择区域的结束坐标和位置、大小等信息,在 `endDrag` 方法中根据选择区域的位置和大小创建了新的日程,并更新了日程列表和日程的布局。 为了方便计算日程的布局,我们使用了 `moment` 库来处理日期和时间,使用了 `lodash` 库的 `indexOf` 方法来查找日期在日期列表中的索引。在计算日程布局时,我们先获取开始时间和结束时间的小时和分钟,然后根据日期和时间计算出日程的位置、大小等信息,并将这些信息保存到日程对象中。最后,在模板中使用 `v-for` 指令将日历中的日期和日程渲染出来。 需要注意的是,上面的代码只实现了基本的拖拽选择区域创建日程的功能,还需要根据实际需求对代码进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值