可拖动弹出 - 滚动问题

时间:2013-11-26 06:36:32

标签: javascript jquery css draggable

我使用下面的代码片段来制作一个可拖动的弹出窗口。我面临的问题是没有检测到滚动条,弹出窗口移动而不是滚动。我确实看到了一些类似的问题,但实施情况似乎有所不同,你能帮忙吗?

$('#Div1').mousedown(function(ev) {
    divToMove = document.getElementById('Div1');
    var divName = '#Div1';
    dragHandler(ev,divName);
});

function dragHandler(e,divName){
    var offSet = $(divName).position();
    dragOK = true;
    dragXoffset = e.clientX - offSet.left;
    dragYoffset = e.clientY - offSet.top;
    $(divName).mousemove(function(ev){ moveHandler(ev) });
    $(divName).mouseup(function(ev){ cleanup(ev, divName) });
    return false;
}

function cleanup(e, divName) {
    $(divName).mousemove = null;
    $(divName).mouseup = null;
    dragOK = false;
}

function moveHandler(e) {
    if (e == null) { e = window.event }
    if (e.button <= 1 && dragOK) {
        divToMove.style.left = e.clientX - dragXoffset + 'px';
        divToMove.style.top = e.clientY - dragYoffset + 'px';
        return false;
    }
}

请在js小提琴中看到这个例子。问题不会发生在chrome中,只发生在IE和ff中。 http://jsfiddle.net/6g6Xr/74/

1 个答案:

答案 0 :(得分:1)

我想评论但没有足够的分数。我看到你在jsfiddle中包含了jQuery UI,如果你已经使用了UI,是否可以使用它的可拖动组件?如果是这样,您可以使用此答案的第二部分中显示的句柄属性: https://stackoverflow.com/a/8793280/2603735

jQuery UI handle reference