文章标题

来源：互联网发布：网络金融诈骗编辑：程序博客网时间：2024/06/05 13:33

今天项目开发中遇到了jQuery拖拽问题,因为本项目的用户大部分是使用360浏览器在360浏览器中遇到了无法拖拽报错的问题

源代码如下

function dragModalBox(id) {  var header = $('#modal' + id).find('.modal-header'),    content = $('#modal' + id).find('.modal-content'),    _x, _y, move = false;  header.mousedown(function(e) {    e.stopPropagation();    move = true;    _x = e.pageX - parseInt(content.css('left'));    _y = e.pageY - parseInt(content.css('top'));  });  $(document).mousemove(function(e) {    if (!move) return;    var Y = e.pageY - _y;    var X = e.pageX - _x;    content.css({'top': Y,'left': X});  }).mouseup(function() {    move = false;  });}

在源代码中mousemove事件在360浏览器中content.css('left')的值为NaN,需要给定一个默认值修改为content.css('left') || 0,需要拖拽的元素是relative定位,所以默认给0就ok了,下面是修改过后的代码,拖拽功能正常~

function dragModalBox(id) {  var header = $('#modal' + id).find('.modal-header'),    content = $('#modal' + id).find('.modal-content'),    _x, _y, move = false;  header.mousedown(function(e) {    e.stopPropagation();    move = true;    _x = e.pageX - (parseInt(content.css('left')) || 0);    _y = e.pageY - (parseInt(content.css('top')) || 0);  });  $(document).mousemove(function(e) {    if (!move) return;    var Y = e.pageY - _y;    var X = e.pageX - _x;    content.css({'top': Y,'left': X});  }).mouseup(function() {    move = false;  });}

多多累积,如有错误请指正!

阅读全文

0 0