【Vue】iview Modal拖拽的时候禁止拖拽到父元素外面

Z时代
2024-01-10
分类：技术分享

iview 的modal 使用了拖拽属性，但是modal可以拖拽到父元素的外面，这样子就无法继续选中拖拽了，曾经尝试给其添加mousemove时间，判断如果left小于0，就设置其css的left为0，效果不是很好，有大哥有解决思路吗，如果可以，不想改源码【Vue】iview Modal拖拽的时候禁止拖拽到父元素外面

回答

let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
let elementAll = document.querySelectorAll('.ivu-modal-content');
for(let i = 0; i < elementAll.length; i++){
    let element = document.querySelectorAll('.ivu-modal-content')[i]
    let observer = new MutationObserver((mutationList) => {
        let top = getComputedStyle(element).getPropertyValue('top')
        let left = getComputedStyle(element).getPropertyValue('left')
        if(top[0] == '-'){
          element.style.top = '2px'
        }
        if(left[0] == '-'){
          element.style.left = '2px'
        }
    })
    observer.observe(element, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })}