jQuery UI Draggable-光标不与Draggable元素保持一致

Question

I'm trying to create a popup that has the Jquery UI draggable() functionality. I've gotten it to work, but the cursor does not stay with the popup element. When you click on the popup (the div that was made draggable), if you drag it to the left, the mouse cursor goes past the div element and does not successfully drag the div element all the way to the left of the page.

To see what I'm talking about see this jsfiddle http://jsfiddle.net/lennox02/LvmSG/

And Here's the code:

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);

});

}

I've tried using the cursorAt:{} option, but although it shifts where the element is when it's initial clicked, it doesn't fix the cursor overshooting the element when the element is dragged.

Answer 1

You can set the elements left position so that it's centered by getting the windows width divided by two then minus half the width of the element.

Like this

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

here's your fiddle with the above code

Or you could remove the margins in the start event of the draggable function.

Like this

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

here's your fiddle with this code