Resizable-Methode in Jquery hat ein seltsames Verhalten mit großen Zahlen

Question

Ich habe die folgenden Beispiele, die auf seltsame Weise funktionieren, wenn Sie versuchen, die Größe des Kindes nach links zu ändern.

Irgendeine Idee von was kann falsch sein?

$(document).ready(function($) { 
 
    
 
    var $parent = $('div.parent'); 
 

 
    $parent.find('.child').resizable({ 
 
    handles: 'e, w' 
 
    }); 
 
    
 
});

@import url("//code.jquery.com/ui/1.12.1/themes/start/jquery-ui.min.css"); 
 

 
@left: 15000000px; 
 

 
.wrapper{ 
 
    width: 300px; 
 
    height: 40px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    border: 1px solid red; 
 
    top: 50px; 
 
    left: 60px; 
 
} 
 

 
.parent { 
 
     position: absolute; 
 
     left: -15000000px; 
 
     width: 1500000000px; 
 
     height: 40px; 
 
     background-color: grey; 
 
} 
 

 
.child { 
 
     position: absolute; 
 
     left: 15000050px; 
 
     width: 50px; 
 
     height: 100%; 
 
     background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <div class="parent"> 
 
     <div class="child"> 
 

 
     </div> 
 
    </div> 
 
</div>

Answer 1

Das Problem aufgrund Ihrer sehr seltsam Verwendung von left: -15000000px auf dem Elternteil und left: 15000050px auf das Kind. Wenn Sie left: 50px für das untergeordnete Element only festlegen, funktioniert die Größenanpassung einwandfrei.

$(document).ready(function($) { 
 
    var $parent = $('div.parent'); 
 

 
    $parent.find('.child').resizable({ 
 
    handles: 'e, w' 
 
    }); 
 
});

@import url("//code.jquery.com/ui/1.12.1/themes/start/jquery-ui.min.css"); 
 
@left: 15000000px; 
 
.wrapper { 
 
    width: 300px; 
 
    height: 40px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    border: 1px solid red; 
 
    top: 50px; 
 
    left: 60px; 
 
} 
 

 
.parent { 
 
    position: absolute; 
 
    width: 1500000000px; 
 
    height: 40px; 
 
    background-color: grey; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    left: 50px; 
 
    width: 50px; 
 
    height: 100%; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <div class="parent"> 
 
    <div class="child"></div> 
 
    </div> 
 
</div>

Answer 2

Anscheinend gibt es ein Problem in jQuery selbst, wird die CSS-Funktion, um den richtigen Wert nicht erhalten.

$(document).ready(function($) { 
 
    
 
    var $parent = $('div.parent'); 
 
    var child = $parent.find('.child'); 
 

 
    child.css('left', Math.pow(15,15)); 
 

 
    console.log('from jQuery css get',child.css('left')); 
 
    console.log('from javascript DOM',child[0].style.left); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <div class="parent"> 
 
     <div class="child"> 
 

 
     </div> 
 
    </div> 
 
</div>