js 拖拽案例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style type="text/css">
        div {
            float: left;
            width: 100px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }

        img {
            width: 88px;
            height: 31px;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("eleId", ev.target.id);
        }

        function drop(ev) {
            // ev.preventDefault();
            var curId = ev.dataTransfer.getData("eleId");
            ev.target.appendChild(document.getElementById(curId));
        }
    </script>
</head>

<body>

    <div ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag1">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag2">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag3">
        <img src="./images/cainiaologo.png" draggable="true" ondragstart="drag(event)" id="drag4">
    </div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

解析:
1.设置元素可拖放

< img draggable="true">

2.阻止元素默认事件,默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。event.preventDefault()

3.拖拽,可以传递拖拽元素的信息,这里把被拖拽的元素id传递过去,这样目标容器就可以通过id找到元素,然后appendChild进去。

function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);}

4.放置在目标元素区内,会触发ondrop方法。
这里两个有drop方法,因为这里两个box可以来回拖动,放置在哪个box中,就触发哪个drop的方法,所以这里的ev.target就是要放置的目标box,所以直接appendchild就可以。

function drop(ev) {
     // ev.preventDefault();单写这里不行,因为这个只设置了目标盒子可拖动,而被拖走的盒子没设置,所以直接在两个盒子上设置οndragοver="allowDrop(event)"
     var data = ev.dataTransfer.getData("Text");
     ev.target.appendChild(document.getElementById(data));
 }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的拖拽对话框案例的实现步骤: 1. HTML 结构 首先我们需要在 HTML 中创建一个对话框的结构,包括标题栏、内容区和关闭按钮,如下所示: ``` <div class="dialog"> <div class="title">对话框标题</div> <div class="content">对话框内容</div> <div class="close-btn">X</div> </div> ``` 2. CSS 样式 接着我们需要为对话框添加一些样式,包括设置对话框的位置、大小、边框、背景色等,以及设置标题栏和关闭按钮的样式,如下所示: ``` .dialog { position: absolute; top: 50%; left: 50%; width: 400px; height: 300px; margin-top: -150px; margin-left: -200px; border: 1px solid #ccc; background-color: #fff; } .title { height: 30px; line-height: 30px; padding: 0 10px; background-color: #eee; cursor: move; } .close-btn { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background-color: #ccc; cursor: pointer; } ``` 其中,我们通过设置对话框的 `position` 属性为 `absolute`,然后再通过设置 `top`、`left`、`margin-top` 和 `margin-left` 属性将对话框居中显示。同时,我们还为标题栏设置了一个 `cursor` 属性为 `move`,以便用户可以通过拖拽标题栏来移动整个对话框。 3. JS 代码 最后,我们需要编写一些 JS 代码来实现对话框的拖拽功能。具体步骤如下: 首先,我们需要获取对话框、标题栏和关闭按钮的 DOM 元素: ``` var dialog = document.querySelector('.dialog'); var title = dialog.querySelector('.title'); var closeBtn = dialog.querySelector('.close-btn'); ``` 然后,我们需要定义一个变量 `dragging` 来表示当前是否正在拖拽对话框: ``` var dragging = false; ``` 接着,我们需要为标题栏添加 `mousedown` 事件监听器,用来开始拖拽对话框: ``` title.addEventListener('mousedown', function(e) { dragging = true; // 记录鼠标相对于对话框左上角的偏移量 var offsetX = e.clientX - dialog.offsetLeft; var offsetY = e.clientY - dialog.offsetTop; // 添加鼠标移动事件监听器 document.addEventListener('mousemove', function(e) { if (dragging) { // 计算对话框的新位置 var newLeft = e.clientX - offsetX; var newTop = e.clientY - offsetY; // 设置对话框的新位置 dialog.style.left = newLeft + 'px'; dialog.style.top = newTop + 'px'; } }); }); ``` 在 `mousedown` 事件监听器中,我们将 `dragging` 设置为 `true`,表示开始拖拽对话框。然后,我们记录鼠标相对于对话框左上角的偏移量,以便在后面计算对话框的新位置。接着,我们为 `document` 添加 `mousemove` 事件监听器,用来实时更新对话框的位置。 最后,我们需要为关闭按钮添加 `click` 事件监听器,用来关闭对话框: ``` closeBtn.addEventListener('click', function() { dialog.style.display = 'none'; }); ``` 完整的 JS 代码如下: ``` var dialog = document.querySelector('.dialog'); var title = dialog.querySelector('.title'); var closeBtn = dialog.querySelector('.close-btn'); var dragging = false; title.addEventListener('mousedown', function(e) { dragging = true; var offsetX = e.clientX - dialog.offsetLeft; var offsetY = e.clientY - dialog.offsetTop; document.addEventListener('mousemove', function(e) { if (dragging) { var newLeft = e.clientX - offsetX; var newTop = e.clientY - offsetY; dialog.style.left = newLeft + 'px'; dialog.style.top = newTop + 'px'; } }); }); document.addEventListener('mouseup', function() { dragging = false; }); closeBtn.addEventListener('click', function() { dialog.style.display = 'none'; }); ``` 这样,我们就实现了一个简单的拖拽对话框案例

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值