JS原生拖拽和input联想和自动补全

js原生实现拖拽，并改变容器的背景色

//var _origin = {x: div1.offsetLeft, y:div1.offsetTop}
var _newele = document.createElement('div')

var div1Style = getComputedStyle(div1)

var dropFlag = 0, dragFlag = 0

div1.addEventListener('mousedown', (event) => {

    var _ele = event.target

    _newele.style.width = div1Style.width

    _newele.style.height  = div1Style.height

    _newele.style.backgroundColor = div1Style.backgroundColor

    _newele.style.position = 'absolute'

    _newele.style.left = _ele.offsetLeft + 'px'

    _newele.style.top = _ele.offsetTop + 'px'

    _newele.style.zIndex = 1

    _ele.style.position = 'absolute'

    _ele.style.left = _newele.style.left

    _ele.style.top = _newele.style.top

    _ele.style.margin = '0'

    _ele.style.opacity = .5

    _ele.style.zIndex = 2

    document.body.append(_newele)

    dragFlag = 1

})


div1.addEventListener('mouseup', (event) => {

    dragFlag = 0

    console.log(dropFlag)
    // 恢复原样，简易版就直接干掉div1，否则应该存储所有的style值，干掉new div,让div1回归原位
    if(!dropFlag){

        document.body.removeChild(div1)
    }

    else{

        console.log('now drop in div2')

        div2.style.backgroundColor = '#ccc000'
    }
})

div1.addEventListener('mousemove',(event) => {

    if(!dragFlag) return false;

    var _ele = event.target

    _ele.style.left = event.clientX  - parseInt(div1Style.width)/2 + 'px'

    _ele.style.top = event.clientY - parseInt(div1Style.height)/2 + 'px'

    if(isEnter({left: event.clientX, top: event.clientY}, div2)){

        dropFlag = 1

        div1.style.cursor = 'copy'
    }

    else{

        dropFlag = 0

        div1.style.cursor = 'move'
    }

})

//mouseenter事件直到mouseup事件触发后才触发，不能用mouseenter了,只能用函数判断鼠标坐标是不是在div2元素的范围内了

function isEnter( point = {left : 0 ,top : 0}, ele ){

    var minLeft = ele.offsetLeft, maxLeft = ele.offsetLeft + ele.offsetWidth

    var minTop = ele.offsetTop, maxTop = ele.offsetTop + ele.offsetHeight

    if( point.left > minLeft && point.left < maxLeft && point.top > minTop && point.top < maxTop){

        //console.log('enter', ele)

        return true
    }  

    return false
}

页面内有一个 input 输入框，实现在数组 arr 查询命中词并和 autocomplete 效果

var arr = ['a','apple','abandon','bilibili','beep','before','become','being','highmaintains','by','bye','banana']

input.addEventListener('input', function(event){

    var _value = event.target.value.trim()

    if(_value){

        autoComplete(_value, arr)
    }

    else{

        ul.innerHTML = ''
    }

})


function autoComplete(str, arr){

    var lis = []

    arr.forEach( (word)=>{

        if(word.startsWith(str)){

            lis.push('<li>' + word + '</li>')
        }
    })

    ul.innerHTML = lis.join('')
}

function addToInput(li){

    var _txt = li.innerText

    input.value = _txt
}

ul.addEventListener('click', function(event){

    if(event.target.tagName.toLowerCase() === 'li'){

        addToInput(event.target)
    }
})

参考：https://blog.csdn.net/github_36487770/article/details/80077294