JQuery와 브라우저에 대한 오프셋 값을

HTML

<div id="cbox" class="cbox" name="cbox"> 
    <div id="box" class="box" name="box"></div> 
    </div> 
    <span id="posX"></span> 
    <span id="posmX"></span> 
    <span id="posY"></span> 
    <span id="posmY"></span> 
    <span id="finalX"></span> 
    <span id="finalXm"></span> 
    <span id="finalY"></span> 
    <span id="finalYm"></span>

CSS

#cbox { 
width:1350px; 
height: 600px; 
border:1px solid #000; 
position: relative; 
} 

#box{ 
    position:absolute; 
    top:40%; 
    left:25%; 
width: 180px; 
    height: 200px; 
border:1px solid #000; 
background-color: #fff; 
padding:10px; 
z-index:300; 
    }

에게 자바 스크립트가

$('#box').draggable({ containment:'parent', cursor:'pointer',drag: function(){ 
      var offset = $(this).offset(); 
      var xPos = offset.left; 
      var xmPos = offset.left + $('#box').outerWidth(); 
      var yPos = offset.top; 
      var ymPos = offset.top + $('#box').outerHeight(); 
      $('#posX').text('xmin: ' + xPos); 
      $('#posmX').text('xmax: ' + xmPos); 
      $('#posY').text('ymin: ' + yPos); 
      $('#posmY').text('ymax: ' + ymPos); 
     }, 
      stop: function(){ 
       var finalOffset = $(this).offset(); 
      var finalxPos = finalOffset.left; 
      var finalxmPos = finalOffset.left + $('#box').width(); 
      var finalyPos = finalOffset.top; 
      var finalymPos = finalOffset.top + $('#box').height(); 

    $('#finalX').text('Final Xmin: ' + finalxPos); 
    $('#finalXm').text('Final Xmax: ' + finalxmPos); 
    $('#finalY').text('Final Ymin: ' + finalyPos); 
    $('#finalYm').text('Final Ymax: ' + finalymPos); 
     } 

         });

기본적으로 상자가 드래그됨에 따라 오프셋 값이 각각의 스팬 필드에 입력됩니다. 모든 것이 완벽하게 작동하지만 오프셋 값이 ie8 +와 opera에서 다른 abit 인 것으로 나타났습니다. 어쨌든 오프셋 값을 동일하게 만들 수 있습니까? 모든 브라우저에서 사용할 수 있습니까? 많은 감사.

출처

2011-10-12 Anonymous

브라우저간에 일관성이 없습니다. http://jsfiddle.net/Xzzhf/ –

흠 나는 jsfiddle 및 일관성을 검사했지만 브라우저를 사용하여 브라우저를 조금씩 다르게 테스트했습니다 (예 : 상자가있는 경우). xbox 11과 ymin 11을 ie8에 표시하지만 크롬과 moz에는 xmin 9와 ymin 9가 표시됩니다. –

뭔가 다른 것이 그 위치에 영향을 미치고 있습니다. –

필자는 마진과 패딩 값이 실제로 요소의 위치와 오프셋 값에 영향을 준다는 것을 알아 냈습니다.

출처

2011-10-17 14:15:41

JQuery와 브라우저에 대한 오프셋 값을

답변

관련 문제