html5-api——拖拽接口

拖拽接口

<div class="box1">
    <!--在h5中，如果想拖拽元素，就必须为元素添加 draggable="true" 。图片和超链接默认就可以拖拽-->
    <p class="text" draggable="true">来拖拽我啊！</p>
</div>
<div class="box2"></div>

 /*拖拽事件*/
    var p = document.querySelector(".text");
    var aim = document.querySelector(".box2");
    /*应用于被拖拽元素的事件
    ondrag：整个拖拽过程都会调用——持续
    ondragstart：拖拽开始时调用
    ondragleave：鼠标离开拖拽元素时调用
    ondragend：拖拽结束时调用*/
    p.ondragstart = function () {
        console.log('obj + ondragstart');
    };
    p.ondragend = function () {
        console.log('obj + ondragend');
    };
    p.ondragleave = function () {
        console.log('obj + ondragleave');
    };
    p.ondrag = function () {
        // console.log('obj + ondrag');
    };

    /*应用于目标元素的事件
    ondragenter：当拖拽元素进入时调用
    ondragover：当停留在目标元素上时调用——持续
    ondrop：当在目标元素上松开鼠标时调用
    ondragleave：当鼠标离开目标元素时调用*/
    aim.ondragenter = function () {
        console.log('aim + ondragenter');
    };
    aim.ondragover = function (e) {
        // console.log('aim + ondragover');
        /*如果想触发ondrop事件，那么必须在这里阻止浏览器的默认行为*/
        e.preventDefault();
    };
    /*浏览器默认会阻止ondrop事件：必须在ondragover中阻止浏览器的默认行为*/
    aim.ondrop = function () {
        console.log('aim + ondrop');
        /*添加被拖拽的元素到当前目标元素*/
        this.appendChild(p);
    };
    aim.ondragleave = function () {
        console.log('aim + ondragleave');
    };

拖拽优化（实现任意元素拖拽）

被拖拽元素需要定义 id

<div class="box1">
    <!--在h5中，如果想拖拽元素，就必须为元素添加 draggable="true" 。图片和超链接默认就可以拖拽-->
    <p class="text" id="text1" draggable="true">来拖拽我啊！1</p>
    <p class="text" id="text2" draggable="true">来拖拽我啊！2</p>
</div>
<div class="box2"></div>
<div class="box3"></div>

    /*拖拽事件*/

    /*应用于被拖拽元素的事件*/
    document.ondragstart = function (e) {
        /*随意添加的拖拽样式*/
        e.target.style.opacity = 0.1;
        e.target.style.backgroundColor='red';

        /*通过dataTransfer来实现数据的储存与获取
        * setData(format,data):
        * format:数据的类型：text/html  text/uri-list
        * data:数据：一般来说是字符串值*/
        e.dataTransfer.setData('text/html', e.target.id)
    };
    document.ondragend = function (e) {
        e.target.style.opacity = 1;
        e.target.style.backgroundColor='skyblue';
    };
    document.ondragleave = function () {};
    document.ondrag = function () {};

    /*应用于目标元素的事件*/
    document.ondragenter = function () {};
    document.ondragover = function (e) {
        e.preventDefault();
    };
    document.ondrop = function (e) {
        /*通过e.dataTransfer.setData储存的数据，只能在drop事件中获取*/
        var id = e.dataTransfer.getData('text/html');
        // console.log(id);
        e.target.appendChild(document.getElementById(id))
    };
    document.ondragleave = function () {};

自由移动

function dragFunc(id) {
    var Drag = document.getElementById(id);
    Drag.onmousedown = function(event) {
        var ev = event || window.event;
        event.stopPropagation();
        var disX = ev.clientX - Drag.offsetLeft;
        var disY = ev.clientY - Drag.offsetTop;
        document.onmousemove = function(event) {
            var ev = event || window.event;
            Drag.style.left = ev.clientX - disX + "px";
            Drag.style.top = ev.clientY - disY + "px";
            Drag.style.cursor = "move";
        };
    };
    Drag.onmouseup = function() {
        document.onmousemove = null;
        this.style.cursor = "default";
    };
};
dragFunc("idOuterDiv");