Phần tử có thể kéo ẩn bên ngoài vùng chứa

Sử dụng giao diện người dùng jQuery, tôi đang cố tạo giao diện với hai vùng chứa có thể cuộn, mỗi vùng chứa nhiều phần tử có thể kéo. Người dùng có thể kéo phần tử từ một vùng chứa này sang vùng chứa khác.Phần tử có thể kéo ẩn bên ngoài vùng chứa

Tính năng giảm không phải là vấn đề. Khi bị bỏ, phần tử được tách ra và được tái tạo ở đúng vị trí bên dưới bố cục mới của nó.

Vấn đề của tôi là các phần tử kéo không thể được hiển thị bên ngoài container khi container đã position:relative; áp dụng, vì vậy trong khi kéo, nguyên tố này sẽ biến mất khi nó được di chuyển bên ngoài ranh giới container.

Hành vi mặc định này có ý nghĩa, như bình thường người dùng sẽ muốn kéo một phần tử bên trong vùng chứa của nó. Như một giải pháp khác, tôi đã giả định giải pháp sẽ là sử dụng thuộc tính có thể kéo được 'appendTo', mà tôi nghĩ sẽ di chuyển phần tử bên ngoài vùng chứa của nó, nhưng tiếc là điều này dường như không có hiệu lực.

DOM: (mỗi điểm là cuộn và mỗi container có position: relative và là lớn như nó cần phải được để giữ tất cả các yếu tố)

BODY 
    VIEW 1 
     CONTAINER 
      DRAGGABLE ELEMENTS 
    VIEW 2 
     CONTAINER 
      DRAGGABLE ELEMENTS

Javascript:

$('div.card').draggable({ 
    appendTo: 'body', 
    scroll: false //stops scrolling container when moved outside boundaries 
});

Vui lòng xem JSFiddle để được giải thích đơn giản về sự cố. Tôi không muốn bloat ví dụ với mã droppable, do đó, điều này chỉ minh họa các vấn đề kéo. http://jsfiddle.net/Em7Ak/

Rất cám ơn trước.

Nguồn

2013-01-04 tomturton

Tôi không chắc chắn nếu điều này sẽ khắc phục vấn đề chính xác của bạn, nhưng tôi đi qua câu hỏi này tìm kiếm câu trả lời tương tự và đây là những gì tôi tìm thấy.

Trong tùy chọn cho .draggable(), chuyển vào helper:'clone' để tạo bản sao của mục một cách tự động để có thể kéo ra khỏi vùng chứa. Và sử dụng appendTo:'body' để đặt ở cuối thẻ <body>.Vì vậy, trong trường hợp của tôi, lựa chọn của tôi trông hơi như thế này, thêm vào revert:'invalid' gây ra nó để mùa xuân trở lại nếu nó không được giảm đâu đó hợp lệ:

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

Nguồn

2013-02-18 17:16:48 Paul

helper: 'clone' làm việc cho tôi, trong trường hợp mục có thể kéo được vô hình khi nó được kéo ra ngoài ranh giới cha của nó. – Katat

Katat nghe có vẻ như bạn đang thiếu phần phụ: phần thân của giải pháp –

cảm ơn <3, đã lưu ngày của tôi –

Add position: absolute phong cách thẻ:

div.card { 
    position:absolute; 
    width:100px; height:50px; 
    border:1px black solid; 
    background-color:orange; 
    text-align:center; vertical-align:middle; 
}

Nguồn

2013-01-04 11:57:14 Saram

Cảm ơn, công việc này cho đến khi tôi áp dụng vị trí: liên quan đến từng vùng chứa. Tôi phải sử dụng thuộc tính này khi người dùng có thể tải trong một mẫu. Tôi đã thay đổi câu hỏi của tôi và JSFiddle cho phù hợp. – tomturton

Tôi có vấn đề tương tự cách đây vài tháng.

nhu cầu của tôi là để có thể sử dụng di chuyển tự động của một container lớn từ những người khác

Đây là câu hỏi của tôi để biết thêm chi tiết, JqueryUI, drag elements into cells of a scrolling dropable div containing large table

Tôi tìm thấy một workaround. Ý tưởng là chắp thêm phần tử nhân bản vào thùng chứa có thể cuộn trong khi gọi lại trong trình trợ giúp xây dựng, sau đó nối thêm trình trợ giúp cho cơ thể bằng hàm setTimeout sau 1ms. Vị trí helper phải được ánh xạ trên vị trí chuột để tránh vấn đề bù đắp.

Đây là giải pháp của tôi (JSFiddle có vẻ là xuống ngay bây giờ, hãy thử nó sau này nếu không có mã được hiển thị trong cửa sổ): http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() { 
    $(this).draggable({ 
     opacity: 0.7, 
     cursorAt: { top: 15, left: 50 }, 
     appendTo: 'body', 
     containment: 'body',   
     scroll: true, 
     helper: function(){ 
      //Hack to append the cartridge to the body (visible above others divs), 
      //but still belonging to the scrollable container 
      $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>'); 
      $("#clone").hide(); 
      setTimeout(function(){ 
       $('#clone').appendTo('body'); 
       $("#clone").show(); 
      },1); 
      return $("#clone"); 
     }  
    }); 
});

Nguồn

2013-01-05 08:39:03 sdespont

sử dụng "clone" helper và ẩn các mục trong khi kéo nó và hiển thị lại lần nữa.

$(".removalbe-recom").draggable({ 
    appendTo: "body", 
    helper: "clone", 
    revert: "invalid", 
    cursor: "move", 
    containment: "document", 
    zIndex: 10000, 
    scroll:false, 
    start: function (event, ui) { 
    $(this).hide(); 
    }, 
    stop: function (event, ui) { 
     $(this).show(); 
    } 
});

Nguồn

2015-10-08 00:49:30 kavehmb

Phần tử có thể kéo ẩn bên ngoài vùng chứa

Trả lời

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