jQuery UI draggable/droppable을 사용하여 여러 드롭 컨테이너를 스크롤 하시겠습니까?

Question

jQuery UI draggable/droppable을 사용하여 드래그 할 때 여러 드래그 컨테이너를 드래그 할 때 어떻게 강제로 스크롤 할 수 있습니까?

예를 들어, "끌어다 놓기"사각형을 드래그 할 때이 "놓기 대상"목록을 스크롤하는 방법은 무엇입니까? 위의

바이올린 : http://jsfiddle.net/AdrkG/

참고 : 드래그 중 하나 드롭 컨테이너의 자식이 아닌 것처럼 draggable({ scroll: true }) 옵션이 여기에 작동하지 않습니다.

그리고 몇 가지 코드 예제

에 유래를 충족하기 위해 (그렇지 않으면 난 단지 JSFiddle에 연결하고있어 불평) :

<div class="draggable">drag me</div> 

<div class="dropcontainer"> 
    <div class="droppable">drop target 0</div> 
    <div class="droppable">drop target 1</div> 
    … 
</div> 

<div class="dropcontainer"> 
    <div class="droppable">drop target 0</div> 
    <div class="droppable">drop target 1</div> 
    … 
</div> 

<script> 
    $(".draggable").draggable() 
    $(".doppable").droppable() 
</script> 

<style> 
    .dropcontainer { 
     overflow: auto; 
     width: 150px; 
     height: 100px; 
    } 
</style> 

Answer 1

당신은 drag 이벤트를 사용할 수 있습니다. http://jsfiddle.net/AdrkG/8/

Answer 2

지금 거의 같은 문제 번째가 : 여기

는 exemple입니다. 방향과 훌륭한 모범에 대해 @Bali Balo에게 감사드립니다. 다른 사람이 필요로하는 경우 나는 그의 코드의 2-dimentional 스크롤 변형을 보여주고 싶은 :

var dropContainers = $(".dropContainer"); 

---

drag: function (event, ui) { 
    dropContainers.each(function() { 
     var $this = $(this); 
     var cOffset = $this.offset(); 
     var bottomPos = cOffset.top + $this.height(); 
     var rightPos = cOffset.left + $this.width(); 
     clearInterval($this.data('timerScroll')); 
     $this.data('timerScroll', false); 
     if (event.pageX >= cOffset.left && event.pageX <= cOffset.left + $this.width()) { 
      if (event.pageY >= bottomPos - triggerZone && event.pageY <= bottomPos) { 
       var moveDown = function() { 
        $this.scrollTop($this.scrollTop() + scrollSpeed); 
       }; 
       $this.data('timerScroll', setInterval(moveDown, 10)); 
       moveDown(); 
      } 
      if (event.pageY >= cOffset.top && event.pageY <= cOffset.top + triggerZone) { 
       var moveUp = function() { 
        $this.scrollTop($this.scrollTop() - scrollSpeed); 
       }; 
       $this.data('timerScroll', setInterval(moveUp, 10)); 
       moveUp(); 
      } 
     } 
     if (event.pageY >= cOffset.top && event.pageY <= cOffset.top + $this.height()) { 
      if (event.pageX >= rightPos - triggerZone && event.pageX <= rightPos) { 
       var moveRight = function() { 
        $this.scrollLeft($this.scrollLeft() + scrollSpeed); 
       }; 
       $this.data('timerScroll', setInterval(moveRight, 10)); 
       moveRight(); 
      } 
      if (event.pageX >= cOffset.left && event.pageX <= cOffset.left + triggerZone) { 
       var moveLeft = function() { 
        $this.scrollLeft($this.scrollLeft() - scrollSpeed); 
       }; 
       $this.data('timerScroll', setInterval(moveLeft, 10)); 
       moveLeft(); 
      } 
     } 
    }); 
}, 

내가 모든 드래그 이벤트에 낙하 할 영역을 검색하지 않도록 최적화를 추가 - 내가 계산 사전 드래그 가능한 위젯을 초기화하기 전에. 이는 드래깅의 성능과 응답 성을 크게 향상 시켰습니다.

한 가지 더 작은 변경 사항은 moveUp 및 moveDown 함수 이름이 종종 바뀌 었습니다 (이름을 바꿔서 이름을 바 꾸었습니다).