0
jQuery draggables를 스크롤 가능한 div에서 사용할 때마다 문제가 발생합니다. 
스크롤 가능한 불일치 내에서 드래그 가능한 JQuery
문제는 때이다 : 여기
이 사진을 설명하는 것입니다 (끌고있는 항목은 "자매 캐리"그 안에 (잘못된 ISBN이에 더 관심을 지불하지)에 떠있는 상자입니다) 처음에 드래그하면 마우스 포인터가 맞을 것입니다.li이 드래그되고 있습니다. 그러나 일단 화면 이동 창의 아래쪽에 도달하고 자동 스크롤 (
scroll 옵션의 결과)을 시작하면 위의 그림처럼 마우스가 매우 빨리 정렬되지 않습니다.
자바 스크립트 :
$element.draggable({
revert: true,
revertDuration: 250,
cursor: "pointer",
scroll: true,
zIndex: 1000,
start: function (e, ui) {
//stuff
},
stop: function (e, ui) {
//stuff
}
})
HTML (data-bind="draggable: ...와 요소는 위의 코드에 $element이다가) :
<div class="well well-sm" style="overflow-y: auto; max-height: 400px;">
<div data-bind="foreach: adoptions">
<div class="panel panel-primary">
<div class="panel-heading">
Choose <input data-bind="value: chooseNOptions" type="text" class="form-control" style="width: 50px;" /> Options:
</div>
<div class="panel-body">
<ul data-bind="foreach: options" class="list-group">
<li data-bind="draggable: 'option', draggableCollection: $parent.options" class="list-group-item">
<h4 class="list-group-item-heading">
Option <span data-bind="text: $index() + 1"></span>
</h4>
<div class="list-group-item-text">
<ul data-bind="foreach: items" class="list-group">
<li data-bind="draggable: 'item', draggableCollection: $parent.items" class="list-group-item">
<h4 data-bind="text: isbn" class="list-group-item-heading"></h4>
<p class="list-group-item-text">
Title: <span data-bind="text: title"></span><br />
Author: <span data-bind="text: author"></span>
</p>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus"></span> Add Item
</li>
</ul>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus"></span> Add Option
</li>
</ul>
</div>
</div>
</div>
</div>
내가 잘못 뭐하는 거지? 오버플로 된 div가 전체 문서가 아니라 스크롤하는 것을 제외하고는 자동 스크롤의 드래그 가능한 페이지에있는 예제와 매우 비슷합니다. 나는 이것이 문제 일 수 있다고 생각하지만, 나는 사람들이 스크롤 가능한 것과 많은 다른 이슈들을 가지고 있기 때문에 이것을 찾는 것이 어렵다.
미리 감사드립니다.