jquery-ui 可拖动小部件在滚动条上的 Firefox 中无法正常工作

Question

嗨，我在 Firefox 中遇到的问题是 sn-p：

$(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();
}