오버플로로 다른 div를 스크롤하는 Draggable 요소

Question

안녕하세요 저는 드래그 가능한 이벤트에 문제가 있습니다. 헬퍼를 사용하여 다른 div를 스크롤 할 수 없습니다.

이

이 예제 코드, 내가 쓴 :

JsFiddle 내가 뭔가 잘못했다, 내가 무엇을 알고하지 않습니다

$('.test1').draggable({ 
 
    helper: 'clone', 
 
    scroll: false, 
 
    appendTo: '.scrolled-box', 
 
    containment: '.test2', 
 
    start: function(e, ui) { 
 
    $(ui.helper).css({ 
 
     'opacity': '0.6' 
 
    }); 
 
    } 
 
});

.container { 
 
    width: 250px; 
 
    height: 100px; 
 
    background-color: #ffecc9; 
 
    padding: 10px; 
 
    border-radius: 3px; 
 
    border: 1px solid #333; 
 
} 
 

 
.test1 { 
 
    width: 200px; 
 
    height: 20px; 
 
    border: 1px solid #333; 
 
    background: #33cccc; 
 
    border-radius: 3px; 
 
    margin: auto; 
 
} 
 

 
.test1>p { 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    margin: 0 auto; 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
    color: #333; 
 
    padding: 2px 0; 
 
} 
 

 
.test2 { 
 
    margin-top: 15px; 
 
    width: 250px; 
 
    height: 60px; 
 
    overflow: auto; 
 
    background-color: #333; 
 
    border-radius: 3px; 
 
    color: white; 
 
} 
 

 
.scrolled-box { 
 
    height: 500px; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="test1"> 
 
    <p> 
 
     drag me 
 
    </p> 
 
    </div> 
 
    <div class="test2"> 
 
    <div class="scrolled-box"> 
 
     <span>scrolled box</span> 
 
    </div> 
 
    </div> 
 
</div>

이를 참조하십시오. 드래그 가능한 (jquery UI)로 내 expirience를 lvl 도와주세요. 저는 추가 플러그인없이 솔루션을 찾고 있습니다. 그냥 jQuery Ui.

Answer 1

당신은 나의 JS 바이올린 내부 droppable뿐만 아니라 이벤트

$('.test1').draggable({ 
 
    scroll: true, 
 
    helper: 'clone', 
 
    revert: true, 
 
    appendTo: '.scrolled-box', 
 
    containment: '.test2', 
 
    start: function (e, ui) { 
 
    \t $(ui.helper).css({'opacity': '0.6'}); 
 
    } 
 
}); 
 

 
$('.test2').droppable({ 
 
    accept: ".test1", 
 
    drop: function(event, ui) { 
 
\t \t \t \t ui.helper.clone().appendTo('.scrolled-box'); 
 
    } 
 
});

.container { 
 
    width: 250px; 
 
    height: 300px; 
 
    background-color: #ffecc9; 
 
    padding: 10px; 
 
    border-radius: 3px; 
 
    border: 1px solid #333; 
 
} 
 
.test1 { 
 
    width: 200px; 
 
    height: 20px; 
 
    border: 1px solid #333; 
 
    background: #33cccc; 
 
    border-radius: 3px; 
 
    margin: auto; 
 
} 
 
.test1 > p { 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    margin: 0 auto; 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
    color: #333; 
 
    padding: 2px 0; 
 
} 
 
.test2 { 
 
    margin-top: 15px; 
 
    width: 250px; 
 
    height: 160px; 
 
    overflow: auto; 
 
    background-color: #333; 
 
    border-radius: 3px; 
 
    color: white; 
 
    position: relative; 
 
} 
 
.scrolled-box { 
 
    height: 600px; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
span { 
 
    position: absolute; 
 
    bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div class="container"> 
 
    <div class="test1"> 
 
    <p> 
 
     drag me 
 
    </p> 
 
    </div> 
 
    <div class="test2"> 
 
    <div class="scrolled-box"> 
 
     <span>scrolled box</span> 
 
    </div> 
 
    </div> 
 
</div>