Giao diện người dùng JQuery - Cách áp dụng ngăn chặn cho bộ chọn khớp với nhiều div?

Question

Ví dụ:

<div> 
    <div class='drop'> 
     <div class='drag'></div> 
    </div> 
    <div class='drop'> 
    </div> 
    <div class='drop'> 
    </div> 
    <div class='drop'> 
    </div> 
    <div> 
    </div> 
</div> 

$('div.drag').draggable({ containment: 'div.drop' }); 

Thông thường, nếu chỉ có 1 "div.drop" yếu tố, nó hoạt động như dự kiến. Nếu có nhiều hơn 1 (như trong ví dụ trên), tôi nghĩ rằng nó sẽ được kéo/thả vào bất kỳ div div.drop nào. Khi nó quay ra, nó chỉ có thể kéo/có thể phân tách thành phần tử đầu tiên được so khớp bởi bộ chọn "div.drop".

Có cách giải quyết nào cho vấn đề này (tức là, làm cho nó chứa/droppable/chỉ có thể kéo trong div div "div.drop") không?

EDIT: Tôi đoán bạn là đúng người. Sau khi một số introspection, tôi nhận ra rằng tôi đã không đi cho các giải pháp được đề xuất của bạn kể từ khi có padding giữa các divs và tôi không muốn div div divrag "" được thả trên khu vực đệm.

Answer 1

Nó không hoạt động như thế !! Ngăn chặn là hạn chế sự ràng buộc của việc kéo.

Bạn muốn kéo và thả.
Sau đó, bạn phải cấu hình kéo cho div.grag:

$('div.drag').draggable(); 

Và cấu hình thả cho div.drop:

$('div.drop').droppable(); 

Bạn có thể thêm ngăn cho các phần tử kéo của bạn với mức div đầu tiên của bạn:

<div id='dragZone'> 
    <div class='drop'> 
     <div class='drag'></div> 
    </div> 
    <div class='drop'> 
    </div> 
</div> 


$('div.drag').draggable({ containment: '#dragZone'}); 

Answer 2

containment hạn chế chuyển động của hình có thể kéo trong giới hạn của (các) thành phần đã cho. Bạn có thể đặt containment cho phụ huynh của số div.drop s.

Bạn nên làm cho div.drop s droppable, gắn kéo vào thả, và sử dụng tùy chọn revert: 'invalid' để được khôi phục có thể kéo nếu nó không rơi trên droppable

$('div.drop').droppable({drop: function(e, ui) { 
    ui.draggable.appendTo(this); 
}}); 
$('div.drag').draggable({ 
    helper: 'clone', 
    revert: 'invalid' 
}); 

Answer 3

Như những kẻ đã chỉ ra việc giữ gìn selector không hoạt động như vậy vì nó Các hạn chế kéo đến trong giới hạn của phần tử hoặc vùng được chỉ định.

Bạn có thể thử một cái gì đó như dưới đây:

JQuery Tài liệu tham khảo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 

HTML:

<div id="dragContainer">  
<div class='drop'> 
    <div class='drag'>drag</div>  
</div>  
<div class='drop'>drop 
</div>  
<div class='drop'>drop 
</div>  
<div class='drop'>drop 
</div>  
<div class='nodrop'> 
</div> 
</div> 

JQuery:

<script type="text/javascript"> 
$('div.drag').draggable({ containment: '#dragContainer', revert: "invalid" }); 

    $('div.drop').droppable({ 
    drop: handleDropEvent 
    }); 

function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
    alert('Ok to drop here onto me!'); 
} 
</script> 

Answer 4

Đỗ thử mã của tôi

<style> 
.container { 
    border: 2px solid #000; 
} 
.container img { 
    width: 45px; 
    height: 45px; 
} 
.draggable { 
    width: 40px; 
    height: 40px; 
    background: #F90; 
    border-radius: 10px; 
    margin: 0 0 0 0; 
    float: top; 
} 
.draggable.is-pointer-down { 
    background: #09F; 
    z-index: 2; /* above other draggies */ 
} 
.draggable.is-dragging { opacity: 0.7; } 
</style> 
    <script> 
$(document).ready(function() { 
    var $draggables = $('.draggable').draggabilly({ 
    // contain to parent element 
        **containment: "#box"** 
    }); 
}); 
</script> 

Xin chào. Tôi nghĩ điều này có thể giúp bạn :)

<div class="container" id="box"> 

và hình ảnh của tôi nằm trong div này.