Chụp một bộ phận cho bộ phận khác

Tôi có 2 div nằm bên trong một trình bao bọc. Wrapper div có thể kéo được. Tôi đang sử dụng jquery-uiChụp một bộ phận cho bộ phận khác

<div id="wrapper"> 
    <div class="biggerDivision"></div> 
    <div class="smallerDivision">>/div> 
</div> 

<div class="snapDivision"></div>

wrapper là kéo vì tôi phải kéo cả biggerDivision và smallerDivision cùng nhưng tôi phải chụp chỉ smallerDivision để snapDivision. biggerDivision và smallerDivision có kích thước khác nhau

JQuery:

$('#wrapper').draggable({ 
    snap: ".snapDivision" 
});

làm điều này wrapper được chụp để snapDivision

đây là fiddle cho điều này https://jsfiddle.net/buownnbn/

gì thay đổi mà tôi nên làm để chụp của tôi smallDivision để snapDivision không phải là toàn bộ trình bao bọc.

Nguồn

2015-11-01 Bhavesh

đây là công việc xung quanh, hãy thử nó .. https: //jsfiddle.net/kishoresahas/buownnbn/3/ –

Tôi không thể tìm thấy bất kỳ cách đơn giản nào để thực hiện việc này.

Đây chỉ là một công việc xung quanh cho kịch bản của bạn

$('.smallerDivision').draggable({ 
 
    snap: ".snapDivision", 
 
    drag : function(event, ui){ 
 
     $(".biggerDivision").css("top", ui.position.top + 23); 
 
     $(".biggerDivision").css("left", ui.position.left - 23); 
 
    } 
 
}); 
 

 
$('.biggerDivision').draggable({ 
 
    handle: ".smallerDivision" 
 
});

.biggerDivision { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color:red; 
 
    position: absolute; 
 
    top: 30px 
 
} 
 
.smallerDivision { 
 
    height: 100px; 
 
    width: 50px; 
 
    border-top : 23px solid green; 
 
    border-bottom : 50px solid green; 
 
    background-color:red; 
 
    position: absolute; 
 
    left:30px 
 
} 
 
.snapDivision { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color:blue; 
 
    position: absolute; 
 
    left: 200px 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 

 
<body> 
 
    <div id="wrapper"> 
 
     <div class="biggerDivision"></div> 
 
     <div class="smallerDivision"></div> 
 
    </div> 
 
    <div class="snapDivision"></div> 
 
</body>

biết vấn đề: không thể kéo sử dụng .biggerDivision yếu tố

Nguồn

2015-11-01 15:07:39

Tôi phải đặt thuộc tính có thể kéo chỉ trên trình bao bọc, đó là ràng buộc và làm cho nó khó khăn hơn: (bạn có thể đề xuất sửa đổi cho điều đó không – Bhavesh

Chụp một bộ phận cho bộ phận khác

Trả lời

Các vấn đề liên quan