jquery ui khả năng kéo có thể thay đổi chiều rộng tự động

Question

Tôi đang theo dõi thông qua jquery ui docs để làm cho các div có thể kéo và sắp xếp được. Và nó hoạt động để kéo và sắp xếp. Nhưng khi tôi đưa ra một div từ draggable để sắp xếp, chiều rộng của những thay đổi có thể kéo và không giữ lại chiều rộng của nó được cho là.

Đây là demo

js:

$(function() { 
    $('#grid-main_content').sortable({ 
     revert:true 
    }); 

    $('#block-list .block').draggable({ 
     connectToSortable: '#grid-main_content', 
     helper: 'clone', 
     revert:'invalid' 
    }); 
}) 

Và nếu tôi kiểm tra các yếu tố mà tôi kéo đến sắp xếp được, tôi có thể thấy rằng một phong cách nội tuyến được trao cho các khối kéo có chiều rộng (bởi jquery).

Làm cách nào để duy trì kiểu mà khối đã có? Cảm ơn bạn.

Answer 1

Bạn có thể sử dụng draggables' start event, để duy trì phong cách cụ thể của helper

$('#block-list .block').draggable({ 
    connectToSortable: '#grid-main_content', 
    helper : 'clone', 
    revert : 'invalid', 
    start : function(event, ui){ 
     $(ui.helper).addClass("ui-helper"); 
    } 
}); 

CSS:

.ui-helper { 
    width: 100% !important; 
} 

Demo

Answer 2

tôi chỉ cần tạo một Codepen demo

Bất kỳ cách nào, hãy xem điều này và sao chép các mã nếu nó có vẻ hoạt động.

nếu bạn cần phần dưới của div trở lại kích thước ban đầu của nó, hãy thay đổi

#grid-main_content { 
width:80%;  

Answer 3

này đã làm việc cho tôi. Chỉ cần đặt nó vào độ rộng của các phần tử kéo

$('.selector').draggable({ 
    helper: 'clone', 
    start: function(event, ui){ 
     $(ui.helper).css('width', `${ $(event.target).width() }px`); 
    } 
}) 

như vậy bạn không cần phải thêm CSS