Clever Geek Handbook

Jquery-ui draggable widget doesn't work well in firefox on scrollbar

Hi I ran into a problem in firefox, here is a snippet:

$(function() {
    $( "#draggable" ).draggable();
  });
      

        
        
        
      

    
#draggable{
	width:200px;
	height:200px;
}

.test1{
	border:1px solid red;
	width:150px;
	height:120px;
	word-break:break-all;
  overflow-x:hidden;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
	<div class="test1">
		asdasdasdasdasdddasdasdasdasdasd
	dddddddddddddddddddddddddddd	asdasdasdddddddddddddddddddasdasdsdsdssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdsddddddddddddddddddddddd
	</div>
</div>
Run codeHide result


1 open it in firefox (my version is 33.1.1) 2 click on the scrollbar div.test1 then scroll 3 the problem is that when you click on the scrollbar and slide all content will move.

it works well in IE / chrome. what is the cause of the problem?

+3


source to share


1 answer


Ok, you could try this workaround:



if(navigator.userAgent.search('Firefox') !== -1) {
    $('#draggable').draggable({
        handle: ':not(.test1)'
    });
} else {
    $('#draggable').draggable();
}
0


source






More articles:


All Articles