当元素内部移动jquery-ui-draggable框时，指南不能正确显示位置相对和边距自动

Question

我在这里尝试了样本https://stackoverflow.com/a/10246981/3892316，但是如果我把元素放在父div中，其中position是relative，中心div是margin auto - ＆gt;它将无法正常工作。

HTML：

<div class="well grid-guide" style="height: 1123px; width: 794px;" id="droptarget" data-role="droptarget">
    <div class="canvas" id="6182df68-a629-4258-9329-571ea313379b_ui-id-1" style="position: absolute; top: 86px; left: 329px;">
        <div style="padding:5px;border-radius:7px;" class="elementContainer">
            <label class="canvas-span" id="label_6182df68-a629-4258-9329-571ea313379b_ui-id-1">Click here to change
            </label>
            <div class="ui-wrapper" style="overflow: hidden; width: 200px; height: 30px; padding-right: 0px; padding-bottom: 0px;">
                <input style="width: 200px; height: 30px; display: block; margin: 0px; resize: none; position: static; zoom: 1;" class="k-textbox" id="input_6182df68-a629-4258-9329-571ea313379b_ui-id-1">
            </div>
        </div>
    </div>
    <div class="canvas" id="6182df68-a629-4258-9329-571ea313379b_ui-id-2" style="position: absolute; top: 201px; left: 272px;">
        <div style="padding: 5px; border-radius: 7px; cursor: default;" class="elementContainer">
            <label class="canvas-span" id="label_6182df68-a629-4258-9329-571ea313379b_ui-id-2">Click here to change
            </label>
            <div class="ui-wrapper" style="overflow: hidden; width: 200px; height: 30px; padding-right: 0px; padding-bottom: 0px;">
                <input style="width: 200px; height: 30px; display: block; margin: 0px; resize: none; position: static; zoom: 1;" class="k-textbox" id="input_6182df68-a629-4258-9329-571ea313379b_ui-id-2">
            </div>
        </div>
    </div>


</div>

使用Javascript：

var MIN_DISTANCE = 10; // minimum distance to "snap" to a guide
var guides = []; // no guides available ... 
var innerOffsetX, innerOffsetY; // we'll use those during drag ... 
var offset;

$( ".canvas" ).draggable({
    start: function( event, ui ) {
         $("#droptarget").append($("<div id=\"guide-h\" class=\"guide\"></div>"));
         $("#droptarget").append($("<div id=\"guide-v\" class=\"guide\"></div>"));
        guides = $.map( $( ".canvas" ).not( this ), computeGuidesForElement );
        innerOffsetX = event.originalEvent.offsetX;
    innerOffsetY = event.originalEvent.offsetY;
        offset = $(this).offset();
    }, 
    drag: function( event, ui ){
        // iterate all guides, remember the closest h and v guides
        var guideV, guideH, distV = MIN_DISTANCE+1, distH = MIN_DISTANCE+1, offsetV, offsetH; 
        var chosenGuides = { top: { dist: MIN_DISTANCE+1 }, left: { dist: MIN_DISTANCE+1 } }; 
        var $t = $(this);
var pos = { top: event.originalEvent.pageY - innerOffsetY, left: event.originalEvent.pageX - innerOffsetX }; 
        var w = $t.outerWidth() - 1; 
        var h = $t.outerHeight() - 1; 
        var elemGuides = computeGuidesForElement( null, pos, w, h ); 
        $.each( guides, function( i, guide ){
            $.each( elemGuides, function( i, elemGuide ){
                if( guide.type == elemGuide.type ){
                    var prop = guide.type == "h"? "top":"left"; 
                    var d = Math.abs( elemGuide[prop] - guide[prop] ); 
                    if( d < chosenGuides[prop].dist ){
                        chosenGuides[prop].dist = d; 
                        chosenGuides[prop].offset = elemGuide[prop] - pos[prop]; 
                        chosenGuides[prop].guide = guide; 
                    }
                }
            } ); 
        } );

        if( chosenGuides.top.dist <= MIN_DISTANCE ){
            $( "#guide-h" ).css( "top", chosenGuides.top.guide.top ).show(); 
            ui.position.top = chosenGuides.top.guide.top - chosenGuides.top.offset;
        }
        else{
            $( "#guide-h" ).hide(); 
            ui.position.top = pos.top; 
        }

        if( chosenGuides.left.dist <= MIN_DISTANCE ){
            $( "#guide-v" ).css( "left", chosenGuides.left.guide.left ).show(); 
            ui.position.left = chosenGuides.left.guide.left - chosenGuides.left.offset; 
        }
        else{
            $( "#guide-v" ).hide(); 
            ui.position.left = pos.left; 
        }
    }, 
    stop: function( event, ui ){
        $( "#guide-v, #guide-h" ).remove(); 
    }
});


function computeGuidesForElement( elem, pos, w, h ){
    if( elem != null ){
        var $t = $(elem); 
        pos = $t.offset(); 
        w = $t.outerWidth() - 1; 
        h = $t.outerHeight() - 1; 
    }

    return [
        { type: "h", left: pos.left, top: pos.top }, 
        { type: "h", left: pos.left, top: pos.top + h }, 
        { type: "v", left: pos.left, top: pos.top }, 
        { type: "v", left: pos.left + w, top: pos.top },
        // you can add _any_ other guides here as well (e.g. a guide 10 pixels to the left of an element)
        { type: "h", left: pos.left, top: pos.top + h/2 },
        { type: "v", left: pos.left + w/2, top: pos.top } 
    ]; 
}

CSS：

body{
    font-family: courier new, courier; 
    font-size: 12px; 
}

#droptarget {

    background: #ccc;
    margin: 0 auto;
    position: relative;
}

.canvas{
    border: 1px solid #ccc; 

    cursor: move;
    position: absolute;         
}

.guide{
    display: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
}

#guide-h{
    border-top: 1px dashed #55f; 
    width: 100%; 
}

#guide-v{
    border-left: 1px dashed #55f; 
    height: 100%; 
}

演示（仅在小窗口中正常工作）：

http://jsfiddle.net/pmL4p3fL/