css - Guides not properly display when moving jquery-ui-draggable boxes inside element has position relative and margin auto -
i've tried sample @ here https://stackoverflow.com/a/10246981/3892316 if put element inside parent div position relative , center div margin auto -> not working properly.
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 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 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 "snap" guide var guides = []; // no guides available ... var inneroffsetx, inneroffsety; // we'll use 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( ), computeguidesforelement ); inneroffsetx = event.originalevent.offsetx; inneroffsety = event.originalevent.offsety; offset = $(this).offset(); }, drag: function( event, ui ){ // iterate guides, remember closest h , 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 }, // can add _any_ other guides here (e.g. guide 10 pixels left of 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%; } demo (only work in small window):
Comments
Post a Comment