js设置div可以拖动之后 div里面的input无法输入

本问题的解决方法:根据鼠标点击的标签名判断是否可以拖动。谢谢各位!另外还找到一种不太好的方法,就是给input加上一个默认的焦点,即使用$(input).focus(),有用但,不够灵活。

 document.getElementById("log_window").onmousedown = function (e) {
            var obj = document.elementFromPoint(event.clientX, event.clientY);
            if (obj.tagName.toLowerCase() === 'input' || obj.tagName.toLowerCase() === 'textarea') {
                return false;
            }
            getObject(this, e || event);
        };

大概代码如下:

 <style type="text/css">
#div_add {    
HEIGHT: 796px; 
WIDTH: 1420px;  
background-color:#000;    
position:absolute;    
top:0;    
left:0;    
z-index:2;    
opacity:0.1;        
filter: alpha(opacity=10);    
display:none;
}
#log_window {    
BORDER-LEFT-WIDTH: 1px; 
CURSOR: default; 
FONT-SIZE: 9pt; 
HEIGHT: 200px; 
BORDER-RIGHT-WIDTH: 1px; 
WIDTH: 550px; 
BORDER-BOTTOM-WIDTH: 1px; 
POSITION: absolute; 
LEFT: 435px; 
Z-INDEX: 10002; 
TOP: 123px; 
BORDER-TOP-WIDTH: 1px;
display:none;
background-color:#ffffff;  
}</style>
 <div id="div_add"></div>
 <div id="log_window" style="width:550px;height:200px;top:123px;left:435px;"></div>
 <script>
function shield(){
var html='';
html+='<input id="ipt_qty"  value="" type= "text" />';
$('#log_window').html(html);
}

//下面是设置div可以拖动,现在不可以输入,屏蔽之后input可以输入
var o,X, Y; 
        function getObject(obj, e) {
            o = obj;
            document.all ? o.setCapture() : window.captureEvents(Event.MOUSEMOVE);
            X = e.clientX - parseInt(o.style.left);
            Y = e.clientY - parseInt(o.style.top); 
        }
        document.getElementById("log_window").onmousedown = function (e) {
            getObject(this, e || event); 
        };
        document.onmousemove = function (dis) { 
            if (!o) {
                return;
            }
            if (!dis) {
                dis = event;
            }
            o.style.left = dis.clientX - X + "px";
            o.style.top = dis.clientY - Y + "px";
        };
        document.onmouseup = function () { 
            if (!o) {
                return;
            }
            document.all ? o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP)
            o = '';
        };
</script>

这个代码需要在IE下运行。这只是我的部分代码,还有很多代码感觉贴出来没有用。大概都是这样的。在网上找到一个方法,就是设置拖拽以后给input加一个焦点,这样是可以输入的,但是鼠标无论放在哪个位置拖动整个div都跟着拖动,还有按钮button的点击样式和经过样式都没有了,怎么写才可以像平时打开的网页一样只可以拖动标题那一栏啊。
还有input框用js写的onblur验证都没有触发。

7个回答

function getObject(obj, e) {
    // 如果目标元素是input则跳出滑动事件
    if(e.target.nodeName.toLowerCase() === 'input'){
        return false;
    }
        o = obj;
        document.all ? o.setCapture() : window.captureEvents(Event.MOUSEMOVE);
        X = e.clientX - parseInt(o.style.left || 0);
        Y = e.clientY - parseInt(o.style.top || 0); 
} 
liumingliao
力O 根据你提供的思路,我查找了一下方法,这些改写就可以了,老哥牛!document.getElementById("log_window").onmousedown = function (e) { var obj = document.elementFromPoint(event.clientX, event.clientY); if (obj.tagName.toLowerCase() === 'input' ) { return false; } getObject(this, e || event); };
接近 3 年之前 回复
liumingliao
力O 这样写的话div就不可以拖动了。
接近 3 年之前 回复

这代码看的我眼花。不敢看啊~

你可以先试试不动态添加input标签的情况,直接将input写在div中进行拖动。

liumingliao
力O 试过了,还是一样的。
接近 3 年之前 回复

应该是 每次点击的时候 input 都重新构建了一次,所以你看着是无法输入的样子 其实是一直在刷新input输入框。

liumingliao
力O 应该是一直在执行拖动的方法,这个要怎么解决呢?
接近 3 年之前 回复

在chrome里面看没有问题


<style type="text/css">
        #div_add {    
            height: 796px; 
            width: 1420px;  
            background-color:#000;    
            position:absolute;    
            top:0;    
            left:0;    
            z-index:2;    
            opacity:0.1;        
            filter: alpha(opacity=10);    
        }
        #log_window {    
            border:1px solid #eee; 
            cursor: default; 
            font-size: 9pt; 
            height: 200px; 
            width: 550px; 
            position: absolute; 
            z-index: 10002; 
            margin:123px 0 0 435px;
            background-color:#ffffff;  
        }
    </style>

    <div id="div_add"></div>
    <div id="log_window"></div>

    <script>
        function shield(){
            var html='';
            html+='<input id="ipt_qty"  value="" type= "text" />';
            document.querySelector('#log_window').innerHTML = html
            }
        shield();

        //下面是设置div可以拖动,现在不可以输入,屏蔽之后input可以输入
        var o,X, Y; 
        function getObject(obj, e) {
            o = obj;
            document.all ? o.setCapture() : window.captureEvents(Event.MOUSEMOVE);
            X = e.clientX - parseInt(o.style.left || 0);
            Y = e.clientY - parseInt(o.style.top || 0); 
        }
        document.getElementById("log_window").onmousedown = function (e) {
            getObject(this, e || event); 
        };
        document.onmousemove = function (dis) { 
            if (!o) {
                return;
            }
            if (!dis) {
                dis = event;
            }
            o.style.left = dis.clientX - X + "px";
            o.style.top = dis.clientY - Y + "px";
        };
        document.onmouseup = function () { 
            if (!o) {
                return;
            }
            document.all ? o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP)
            o = '';
        };
    </script>

stopllL
white_g 回复_leoliao: 判断一下mousedown的时候是否点在了input 如果是input上面就return出来不执行后面的就OK了
接近 3 年之前 回复
liumingliao
力O 谷歌是没有问题,但是这个网站是在IE下运行的,内部系统要求用IE。
接近 3 年之前 回复

单纯这样看,觉得可能是你的代码顺序导致的问题,加载进去input后,拖拽,但是拖拽的方法里面可没有再加载input啊,你看下拖拽后,上面的div里面是不是已经没有input了,你可以发给我,我帮你弄,求点积分!

大概是鼠点上去一直在执行方法吧

liumingliao
力O 应该是一直在执行拖动的方法,这个要怎么解决呢?
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问