jQuery UI - 오버플로 -y의 드래그 가능 항목 : 스크롤 컨테이너

Question

왼쪽에있는 열로 드래그 할 수있는 항목이있는 웹 페이지가 있습니다. overflow-y : scroll을 적용하여 아이템 컨테이너의 고정 높이 또는 최대 높이를 오른쪽으로 설정하려는 경우를 제외하고는 훌륭하게 작동합니다. 이 작업을 수행하려고하면 항목이 대상 열 대신에 위에 놓이는 대신 대상 열 아래로 끌어옵니다. item 컨테이너 div에서 overflow 속성을 가져 오면 제대로 작동합니다.

누군가 내가 잘못 가고있는 부분을 지적 할 수 있습니까? 스크롤 가능한 드래그 가능 목록을 얻으려면 어떻게해야합니까? 여기

JS 바이올린 여기 https://jsfiddle.net/bvxxetot/

내가 드래그/드롭 가능한 지역

HTML

<div id="tmpl-view-builder-container"> 

    <div id="tmpl-view-preview-container"> 
    <div class="droppable"> 


    </div> 

    </div> 

    <div id="tmpl-view-legend-container"> 
    <h3>Available Fields</h3> 
    <div id="tmpl-view-legend-item-container">  
     <ul> 
      <li>Field 1</li> 
      <li>Field 2</li> 
      <li>Field 3</li> 
      <li>Field 4</li> 
      <li>Field 5</li> 
      <li>Field 6</li> 
      <li>Field 7</li> 
      <li>Field 8</li> 
      <li>Field 9</li> 
      <li>Field 10</li> 
     </ul> 
    </div>  
    </div> 

</div> 

을 초기화하기 위해서 사용하고 자바 스크립트 코드입니다 ... 내가 무슨 뜻인지 보여

CSS

.droppable { border:1px dashed #000000; width:75%; float:left; height:400px;} 

#tmpl-view-legend-container { 
    position:absolute; 
    right:20px; 
    top:0px; 
    height:400px; 
    overflow-y:scroll; 
} 

#tmpl-view-legend-container ul { list-style-type:none; padding:0; } 
#tmpl-view-legend-container ul li { background:#CCCCCC; margin-bottom:10px; padding:7px 10px; cursor:pointer; } 

JS

$(function() { 
    $('.droppable').droppable({ 
      accept:'#tmpl-view-legend-item-container li', 
     hoverClass: 'hovered', 
     drop: testDropFunction 
    }); 

    $('#tmpl-view-legend-item-container li').draggable({ 
      stack: '#tmpl-view-legend-items li', 
     cursor: 'move', 
     revert: true, 
     appendTo: 'body' 
    }); 
}); 


function testDropFunction(event, ui) { 
    alert('Testing!'); 
} 

당신을 감사합니다!

Answer 1

helper: 'clone'을 사용하면이 기능을 사용할 수 있지만 몇 가지 사항을 수정하려면 코드를 추가해야합니다. 드래그 할 수있는 생성자에서

:

helper: 'clone', 
    start: function(e, ui) { 
     ui.helper.width($(this).width()); 
     $(this).css('visibility', 'hidden'); 
    }, 
    stop: function(e, ui) { 
     $(this).css('visibility', ''); 
    } 

는 CSS에서 :

여기

li.ui-draggable.ui-draggable-handle.ui-draggable-dragging { list-style-type:none; background:#CCCCCC; margin-bottom:10px; padding:7px 10px; cursor:pointer; } 

은 코드에 작업 jsfiddle을 기반으로합니다 : 당신이 바위
https://jsfiddle.net/ahx7urbk/