练习H5-1：拖曳

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #app {
            border: 1px #ff0 solid;
            width: 200px;
            height: 200px;
        }

        #data {
            padding: 10px;
            border: 1px #ccc solid;
            position: relative;
        }
    </style>

    <span id="data" draggable="true" ondragstart="drap(event)">dragable</span>
    <div id="app" ondrop="onndrop(event)" ondragover="over(event)"></div>
    <script>
        function drap(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
            //获取div初始位置距离窗口的偏移量
            ev.dataTransfer.setData("Left", ev.target.offsetLeft);
            ev.dataTransfer.setData("Top", ev.target.offsetTop);
            //获取开始拖动时，鼠标的初始位置
            var e = event || window.event;
            var mouseX = e.clientX;
            var mouseY = e.clientY;
            ev.dataTransfer.setData("X1", mouseX);
            ev.dataTransfer.setData("Y1", mouseY);
        }

        function onndrop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            var left = ev.dataTransfer.getData("Left");
            var top = ev.dataTransfer.getData("Top");
            var X1 = ev.dataTransfer.getData("X1");
            var Y1 = ev.dataTransfer.getData("Y1");


            var domObj = document.getElementById(data);
            var h = domObj.clientHeight;
            var w = domObj.clientWidth;
            domObj.style.position = "absolute";


            var e = event || window.event;
            var mouseX = e.clientX;
            var mouseY = e.clientY;

            domObj.style.top = top - (Y1 - mouseY) + "px";
            domObj.style.left = left - (X1 - mouseX) + "px";
        }

        function over(ev) {
           ev.preventDefault();
        }

    </script>
</body>

</html>

练习H5-1：拖曳

关键代码

<span id=“data” draggable=“true” ondragstart=“drap(event)”>dragable
<div id=“app” ondrop=“onndrop(event)” ondragover=“over(event)”>

ev.preventDefault();

var h = domObj.clientHeight;
var w = domObj.clientWidth;

总结：偏移位置

参考：:https://www.cnblogs.com/myzhibie/p/4256164.html
offsetLeft offsetTop
window.event.clientX window.event.clientY

拖曳改变位置，注意 position：absolute 位置计算

position：absolute 相对于父级/祖级是非static，若没有，相对窗口。

位置偏移

width

box-sizing：content-border => width指
box-sizing：box-border => width指

1）clientWidth和clientHeight

参考链接：https://www.cnblogs.com/myzhibie/p/4256164.html
该属性指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高

<style>
        .one{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid #000000;
            overflow: auto;
        }
    </style>

练习H5-1：拖曳
元素本来设定为宽高都是200，即可视部分宽高都是200，但是由于出现了垂直方向的滚动条，占据了可视部分的宽度，所以clientWidth变成了183，而clientHeight依然是200.

2）offsetWidth和offsetHeight

这一对属性指的是元素的border+padding+content的宽度和高度，该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关

练习H5-1：拖曳