javascript - jquery-ui 可拖动小部件在滚动条上的 firefox 中不能正常工作

Question

你好，我在 firefox 中遇到了这个问题，这里是片段:

$(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>

1 在firefox中打开(我的版本是33.1.1)2 单击“.test1”div 的滚动条，然后滚动3 问题是当你点击滚动条并滑动时，整个内容都会移动。

它在 IE/chrome 中运行良好。导致问题的原因是什么？

Answer 1

那么你可以试试这个解决方法:

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