js 实现禁用内部拖拽

• #js

给 div 添加 draggable=”true” 属性，div 就变成一个可拖曳的方块（鼠标左键按住下面方块拖动试一试）。

HTML 代码如下：

<style>
    .card {
        width: 200px;
        height: 200px;
        background-color: antiquewhite;
    }

    .card-title {   
        width: 200px;
        height: 50px;
    }

    .card-body {
        width: 200px;
        height: 150px;
        background-color:darkcyan;
    }
</style>
<div class="card" draggable="true">
    <div class="card-title">
        card title
    </div>
    <div class="card-body">
        card body
    </div>
</div>

现在有一个需求：鼠标在 card body 上点击禁用拖曳，在 card title 上点击才可以拖曳。

我的第一反应是给 div.card-body 元素添加 draggable="false"，代码如下，测试点击 card body 还是可以拖曳。

<div class="card" draggable="true">
    <div class="card-title">
        card title
    </div>
    <div class="card-body" draggable="false">
        card body
    </div>
</div>

第二反应是给 div.card-body 元素添加 ondragstart 事件，阻止默认拖曳行为，代码如下，测试点击 card body 仍能拖曳。

<div class="card" draggable="true">
    <div class="card-title">
        card title
    </div>
    <div class="card-body" ondragstart="startDrag()">
        card body
    </div>
</div>
<script>
    function startDrag() {
        window.event.preventDefault()
    }
</script>

最后我发现要同时设置 draggable 属性和 ondragstart 事件，才能实现禁用内部拖曳，代码如下：

<div class="card" draggable="true">
    <div class="card-title">
        card title
    </div>
    <div class="card-body" draggable="true" ondragstart="startDrag()">
        card body
    </div>
</div>
<script>
    function startDrag() {
        window.event.preventDefault()
    }
</script>

如下所示，拖动 card-body 发现没有移动效果，成功禁用内部拖曳。拖动 card title 仍可以拖曳。

↶ 返回首页 ↶