Làm cách nào để kéo lưới từ lưới này sang lưới khác?

Question

Làm cách nào để kéo lưới từ lưới này sang lưới khác?

$(function() { //DOM Ready 

    $(".gridster ul").gridster({ 
     widget_margins: [5, 5], 
     widget_base_dimensions: [160, 160] 
    }); 

    var gridster = $(".gridster ul").gridster().data('gridster'); 
    $(".draggable").draggable(); 
    $(".gridster ").droppable({ 
     drop: function(event, ui) { 
      $(".draggable").removeAttr("style"); 
      gridster.add_widget('<li class="new"></li>', 1, 1);     
     } 
    });       
}); 

Answer 1

Bạn có thể sử dụng các hàm remove_widget và add_widget của API gridster để thêm và xóa tiện ích con.

Để xem tiện ích con có được kéo hay không, bạn có thể xem vị trí bắt đầu của con chuột đã thay đổi từ khi bạn nhấn chuột xuống tiện ích, với sự kiện onmousedown, cho đến khi bạn buông nhấp chuột, onmouseup sự kiện. So sánh vị trí bắt đầu và kết thúc để xem liệu chúng tôi đã kéo tiện ích hay chưa, hãy kiểm tra xem chúng tôi đã kéo tiện ích trên một trong các gridster khác bằng cách so sánh vị trí thả với độ lệch của tất cả các đối tượng lưới. Nếu chúng ta bỏ nó trên bất kỳ gridster khác, chỉ cần gọi các chức năng remove_widget của gridster các yếu tố trong và gọi các chức năng add_widget của gridster nó nên được đưa vào.

Tôi đã thực hiện hầu hết các phần trong jsFiddle này, nó cung cấp một số lỗi có thể do gridster.js vẫn đang trong giai đoạn thử nghiệm: http://jsfiddle.net/Ld2zc/11/