js实现div拖拽互换位置

最新推荐文章于 2025-09-01 17:13:13 发布

原创

最新推荐文章于 2025-09-01 17:13:13 发布 · 4.4k 阅读

收录于

这篇博客展示了如何使用JavaScript实现两个div元素的拖拽交互功能，允许用户通过拖拽来改变div的顺序。通过设置`ondragstart`、`ondrop`和`ondragover`事件监听器，实现了元素的拖放操作。示例中，两个具有不同背景颜色的div可以被拖动并交换其内容。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #div1, #div2 {
            float: left;
            width: 100px;
            height: 35px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            line-height:35px;