Question

我正在尝试创建一个具有Jquery UI draggable（）功能的弹出窗口。我已经让它工作，但光标不会留在弹出元素。单击弹出窗口（可拖动的div）时，如果将其拖动到左侧，鼠标光标将越过div元素，并且不会将div元素一直拖动到页面左侧。< / p>

要查看我正在谈论的内容，请参阅此jsfiddle http://jsfiddle.net/lennox02/LvmSG/

以下是代码：

document.getElementById("clicked").onclick = function iframe_open() {


var div = document.createElement('div');
div.style.position = 'absolute';
div.style.backgroundColor = 'rgba(0,0,0,0.1)';
div.style.minHeight = '100%';
div.style.minWidth = '100%';
div.style.top = '0px';
div.style.left = '0px';
div.id = 'overlay';
div.style.zIndex = '10000000';
document.body.appendChild(div);

var z = document.createElement('div');
z.style.position = 'absolute';
z.style.top = '150px';
z.style.marginLeft = 'auto';
z.style.marginRight = 'auto';
z.style.left = '0';
z.style.right = '0';
z.style.backgroundColor = 'black';
z.style.width = '325px';
z.style.height = '175px';
z.id = 'popup';
z.style.zIndex = '10000001';
document.body.appendChild(z);



$( "#popup" ).draggable();

$("#overlay").click(function() {

    var elem = document.getElementById("overlay");

    elem.parentNode.removeChild(elem);

    var elem2 = document.getElementById("popup");

    elem2.parentNode.removeChild(elem2);

});

}

我尝试过使用cursorAt：{}选项，但是虽然它在初始点击时移动了元素，但是当拖动元素时，它不会修复光标超过元素。

Answer 1

您可以将元素左侧位置设置为使其居中，方法是将窗口宽度除以2然后减去元素宽度的一半。

喜欢这个

z.style.left = (($(window).width() - $(z).outerWidth()) / 2) + "px";

这是您的fiddle以上代码

或者您可以删除可拖动功能的开始事件中的边距。

喜欢这个

$("#popup").draggable({
    start: function( event, ui ) {   
        $(this).css('margin-right', '');
        $(this).css('margin-left', '');
    }
});

这是您的fiddle此代码

Jquery UI Draggable - 游标不会停留在draggable元素中

1 个答案: