HTML5拖拽功能实现

    
    
    
    


    

    

        
HTML5

        
CSS3

        
Javascript

        
PHP

    

window.Onload= function() {
    const box = document.getElementById('box');
    const con = document.getElementById('con');
    const items = document.querySelectorAll('.list-item');

    items.forEach(item => {
        item.flag = false;
        item.Ondragstart= function() {
            this.flag = true;
        };
        item.Ondragend= function() {
            this.flag = false;
        };
    });

    [box, con].forEach(element => {
        element.Ondragenter= element.Ondragover= element.Ondragleave= function(e) {
            e.preventDefault();
        };

        element.Ondrop= function(e) {
            items.forEach(item => {
                if (item.flag) {
                    element.appendChild(item);
                }
            });
            e.preventDefault();
        };
    });
};