前端培训-中级阶段(19）-拖拽API

var drapDOM = null;
window.addEventListener('mousedown', function(e){
    if(e.target.classList.contains('drap')){
        drapDOM = e.target;
    }
})
window.addEventListener('mousemove', function(e){
    if(drapDOM){
        drapDOM.style.position = 'fixed';
        drapDOM.style.pointerEvents =  'none';
        drapDOM.style.left = e.clientX + 'px'
        drapDOM.style.top = e.clientY + 'px'
        console.log(e)
    }
})
window.addEventListener('mouseup', function(e){
    console.log(e.target)
    if(drapDOM){
        drapDOM.style.position = 'initial';
        drapDOM.style.pointerEvents =  'initial';
        drapDOM.style.left = '0'
        drapDOM.style.top = '0';
        if(drapDOM.parentNode != e.target){
            e.target.appendChild(drapDOM)
        }
        drapDOM = null
    }
})

var dragged;
function allowDrop(ev){
    // console.log('allowDrop', ev)
    ev.preventDefault();
}
function drag(ev){
    // console.log('drag', ev)
}
function drop(ev){
    console.log('drop', ev)
    ev.preventDefault();
    if(!$(ev.target).find(dragged).length){
        $(ev.target).append(dragged)
    }
}
function dragstart(ev){
    dragged = ev.target;
}
$(function(){
    $('ul').off().on('drop', drop).on('dragover', allowDrop)
    $('li[draggable="true"]').off().on('drag', drag).on('dragstart', dragstart)
})