Vùng chứa có thể kéo jQuery có thể kéo

Question

Tôi hiện có một danh sách kéo đơn giản, mà tôi muốn nằm bên trong một div (các mục) và có thể cuộn được.

$(".draggable").draggable(); 

Tôi hiện đang có fiddle này: http://jsfiddle.net/YvJhE/660/

Nhưng khi bạn có thể thấy, các yếu tố có thể kéo ở bên trong các yếu tố container, tôi muốn họ để có thể kéo ra, mà còn là khả năng di chuyển bên trong các phần tử chứa ngay khi có nhiều phần tử hơn là vùng chứa dài.

Có ai có thể giúp tôi đi đúng hướng không?

Answer 1

Thực ra đây là một câu hỏi hay, bởi vì nó cho thấy cách JQuery xử lý các phần tử có thể kéo được. Các phần tử có thể kéo của bạn không thể được kéo ra bên ngoài div "phần tử" cha, vì nó thể hiện giới hạn cho chúng.

Vì vậy, bạn có thể từ bỏ để sử dụng phần tử gốc "phần tử", sau đó bạn có thể kéo chúng bất cứ nơi nào bạn muốn.

Hoặc bạn có thể làm cho phần tử gốc lớn hơn, sử dụng chiều rộng và chiều cao với 100%.

Nếu bạn sử dụng Draggable bên trong thùng chứa bootstrap, bạn sẽ nhận thấy rằng chúng có thể được kéo cho đến ranh giới của vùng chứa, nhưng không bao giờ nằm ​​ngoài nó.

Bạn cũng có thể thử đặt các phần tử có thể kéo bên ngoài phần tử gốc, với vị trí tuyệt đối.

CSS:

.draggable{ 
    width: 60px; 
    z-index: 15; 
    margin: 0 auto; 
    position: absolute; 
} 

#elements{ 
     overflow: scroll; 
     position:absolute; 
     left:20px; 
     width:100%; 
     height:100%; 
     background:#fff; 
     border:1px solid #000; 
     z-index:5; 
     padding:10px; 
     font-size: 10px; 
} 

Html:

<div id="elements"/> 

<div id="" class="draggable ui-widget-content"> 
    <p>Drag me around</p> 
</div> 

Answer 2

jQuery xử lý tương tác như thế này với một đối tượng helper mà bạn có thể thêm vào một phần tử DOM:

$(".draggable").draggable({ 
    helper: 'clone', 
    appendTo: '#outer' 
}); 

Sau đó, bạn có thể có thể bị trục xuất ở đâu đó:

$('#dropspace').droppable({ 
    accept: '.draggable', 
    drop: function(event, ui) { 
     window.alert('Element dropped at left: ' + ui.position.left + '; top: ' + ui.position.top); 
    } 
}); 

Bằng chứng về khái niệm: http://jsfiddle.net/YvJhE/662/

Bạn vẫn cần phải di chuyển các yếu tố dom thực tế đến nơi nó đã bị bỏ, hoặc tạo lại nó phụ thuộc vào những gì bạn đang đi để sử dụng nó cho.

Answer 3

Tùy chọn helper: 'clone' làm cho một bản sao của nội dung bạn đang kéo tự động để nó có thể được kéo ra khỏi container:

jQuery(".draggable").draggable({ 
    helper: 'clone', 
    revert: 'invalid', 
    appendTo: 'body' 
});