这里对于鼠标经过input时,使得拖动失效,因此通过对input绑定onmouseover事件,获取鼠标经过的标签name
var inputName;
boxid.onmouseover = function (event) {
inputName = event.target.name;//鼠标每经过一个元素,获取name
}
获取所需拖动的div
var div=document.getElementById("divId");
对div绑定点击事件,在绑定鼠标移动事件时,判断鼠标经过的元素是否为当前所需要排除的input元素(这里通过设置元素的name进行判断)
draggableBox(div, "name")
function draggableBox(boxid, name) {//拖动事件
var draggable = true;
var inputName;
boxid.onmouseover = function (event) {
inputName = event.target.name;//鼠标每经过一个元素,就把该元素赋值给变量el
}
boxid.onmousedown = function (evt) {
var oEvent = evt || event; //获取事件对象,兼容写法
var disX = oEvent.clientX - parseInt(boxid.offsetLeft);
var disY = oEvent.clientY - parseInt(boxid.offsetTop);
if (name != inputName) {
document.onmousemove = function (evt) { //实时改变目标元素obox的位置
var oEvent = evt || event;
boxid.style.left = oEvent.clientX - disX + 'px';
boxid.style.top = oEvent.clientY - disY + 'px';
}
}
//停止拖动
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
}