jQuery có thể kéo được + có thể tháo rời: cách chụp phần tử bị rơi vào phần tử bị rơi

Question

Tôi có màn hình của tôi được chia thành hai DIV s. Ở bên trái DIV Tôi có một vài 50x50 pixel DIV s, ở bên phải DIV Tôi có lưới trống làm bằng 80x80 LI s. Các DIV s ở bên trái có thể kéo được và một lần rơi vào một số LI, chúng sẽ chụp vào giữa của LI đó.

Âm thanh đơn giản, đúng không? Tôi chỉ không biết làm thế nào để hoàn thành công việc này. Tôi đã thử bằng cách điều chỉnh các thuộc tính CSS top và left của các thuộc tính LI đã bị loại bỏ, nhưng thuộc tính left và top tương ứng với bên trái DIV.

Làm cách nào để tốt nhất có phần tử bị rớt vào tâm của phần tử được thả vào? Đó là phải đơn giản, phải không?

Chỉnh sửa: Tôi đang sử dụng jQuery UI 1.7.2 với jQuery 1.3.2.

Chỉnh sửa 2: Đối với bất cứ ai khác có vấn đề này, đây là cách tôi cố định nó:

tôi đã sử dụng giải pháp loại bỏ các yếu tố kéo và đặt nó bên trong của Keith đã giảm-on phần tử trong drop callback của plugin có thể phân tách:

function gallerySnap(droppedOn, droppedElement) 
{ 
    $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>'); 
    $(droppedElement).remove(); 
} 

Tôi không thể kéo lại thành phần có thể kéo được nữa, nhưng nếu bạn làm như vậy, chỉ cần gắn liên kết có thể kéo vào lại được.

Đối với tôi, phương pháp này cũng giải quyết được vấn đề tôi gặp phải khi định vị các phần tử đã giảm (tương ứng với bên trái DIV) và cuộn bên trong số DIV thứ hai. (Các yếu tố sẽ vẫn cố định trên trang, bây giờ chúng cuộn dọc theo).

Tôi đã chơi với các tùy chọn chụp để làm cho nó trông đẹp trong khi kéo, do đó, nhờ karim79 cho đề xuất đó.

Tôi có thể sẽ không giành được bất kỳ giải thưởng Mã Awesome nào với điều này, vì vậy nếu bạn thấy chỗ để cải thiện, vui lòng chia sẻ!

Answer 1

Tôi đã có một vấn đề tương tự - Tôi làm việc xung quanh nó bằng tay loại bỏ các yếu tố kéo từ cha mẹ già của mình và thêm nó vào giảm trên yếu tố .

Answer 2

Nếu div s bên trái là trụ cột trong li s ở bên phải (mà bạn có thể khẳng định với Firebug), và nếu li s là tất cả trong một ul (như họ nên được), hãy thử một hoặc cả hai của những điều sau đây:

ul#right_div { 
    text-align: center; 
} 

ul#right_div li { 
    text-align: center; 
} 

Answer 3

Tôi thấy rằng khi bạn thực hiện thao tác kéo, giao diện người dùng jQuery thêm nội tuyến để cho bạn biết vị trí bạn đã bỏ nó. Dưới đây là một mẫu mã mà tôi sử dụng để chụp nó vào vị trí

$('.droppable').droppable({ drop: function(ev, ui) { 
    //Get Details of dragged and dropped 
    var draggedclass = ui.draggable.attr('class'), 
     droppedclass = 'class' + $(this).attr('name').toLowerCase(); 

    //update the classes so that it looks od.  
    ui.draggable.removeClass(draggedclass).addClass(droppedclass); 
    ui.draggable.removeAttr('style'); 
}); 

Answer 4

Cảm ơn bài đăng của bạn - nó đã giúp tôi đi đúng hướng. Tôi tìm thấy nó một chút sạch hơn để thiết lập các thuộc tính vị trí của đối tượng draggable thay vì rối tung với mã HTML. Điều này đặt vị trí ở góc trên cùng bên trái của đối tượng droppable, nhưng bạn cũng có thể sửa đổi đối tượng để căn giữa có vị trí chính xác.

drop: function(event, ui) { 
    $(ui.draggable).css('top', $(this).position().top); 
    $(ui.draggable).css('left', $(this).position().left); 
} 

Answer 5

$("form li").draggable({snap:'.ui-droppable', snapMode:'inner', revert:true}); 
$('.drop').droppable({drop:function(ev, ui) 
          {$(ui.draggable).appendTo($(this)) 
              .css({position:'static', left:'0px', top:'0px'}) 
              .draggable('option', 'disabled', false) 
              .css({position:'relative'}); 
          } 
        } 
        ); 

Answer 6

tôi thấy rằng phương pháp của Keith làm việc cho tôi. Từ câu trả lời của ông không bao gồm thực hiện Ví dụ, tôi sẽ đăng mỏ:

$('.dropTarget').droppable({ 
    drop: function(ev, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn); 
    } 
}); 

hay, hơi ngắn gọn hơn:

$('.dropTarget').droppable({ 
    drop: function(ev, ui) { 
     $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this); 
    } 
}); 

Answer 7

dựa trên mã của Barry, những gì nếu chúng ta muốn thêm một tùy chọn với một nút "x" yếu tố được tách ra một lần nữa từ cha mẹ mới và được gắn lại với ban đầu?

tôi nghĩ sth như thế này, nhưng dường như không làm việc .. để làm cho một số loại của một biến mà giữ trạng thái ban đầu

var flag; 
$('.draggable-div').draggable({ 
    revert: 'invalid', 
    stop: function(){ 
     $(this).draggable('option','revert','invalid'); 
     $(this).find('.undo').show(); 
    flag=$(this).parent(); 
    } 
}); 


$('.draggable-div').find('.undo').click(function(i, e) { 
    var $div = $(this).parent(); 
$($div).detach().appendTo(flag); 
} 

sth chắc chắn là sai nhưng tôi không biết nếu bạn có thể có được khái niệm ... chỉ có thể đảo ngược bất cứ điều gì bạn đã giảm xuống trạng thái ban đầu của họ.