Draggable JS Bootstrap modal - các vấn đề hiệu suất

Question

Đối với một dự án tại nơi làm việc, chúng tôi sử dụng các cửa sổ Bootstrap Modal trong JavaScript. Chúng tôi muốn làm cho một số các cửa sổ di chuyển, nhưng chúng tôi đang chạy vào các vấn đề hiệu suất với JQuery.

$("#myModal").draggable({ 
    handle: ".modal-header" 
}); 

Example,
Source.
Trong IE9, nó hoạt động như mong đợi.
Trong Chrome, thao tác kéo ngang hoạt động như mong đợi và kéo theo chiều dọc khá chậm nhưng không có vấn đề.
Trong Firefox, thao tác kéo ngang hoạt động như mong đợi, nhưng việc kéo theo chiều dọc rất chậm.

Thật kỳ lạ, vì cửa sổ ví dụ không nặng về đồ họa và JQuery được cho là bình thường hóa hành vi của trình duyệt. Tôi đã cố gắng giải quyết điều này mà không cần sử dụng JQuery của draggable, nhưng tôi chạy vào cùng một vấn đề.

Vì vậy, tôi có một vài câu hỏi:

• là việc thực hiện chậm do lỗi của trình duyệt, JQuery, Bootstrap hoặc là mã của tôi không tối ưu?
• Tại sao có sự khác biệt giữa kéo ngang và dọc?
• Tôi có nên tìm giải pháp thay thế hoặc chỉ cần tránh hoàn toàn Bootstrap cho quảng cáo động không?

Trân trọng! Guido

Answer 1

Tôi đã tìm thấy một số cách để khắc phục sự cố này.

Việc thêm tệp này vào tệp CSS của bạn sẽ tắt hiệu ứng transition trong khi phương thức đang được kéo. Nó xuất hiện tuy nhiên rằng một khi người dùng kéo các hộp bay sẽ không xảy ra một cách chính xác mà là nó sẽ chỉ mờ dần trong.

.modal.fade.ui-draggable-dragging { 
    -moz-transition: none; 
    -o-transition: none; 
    -webkit-transition: none; 
    transition: none; 
} 

Ngoài ra thêm dòng sau vào file CSS của bạn và lớp nofly để mô hình của bạn sẽ vô hiệu hóa bay trong tất cả cùng nhau nhưng không phải là fade in:

.modal.fade.nofly { 
    top: 10%;   
    -webkit-transition: opacity 0.3s linear; 
    -moz-transition: opacity 0.3s linear; 
    -o-transition: opacity 0.3s linear; 
    transition: opacity 0.3s linear; 
} 

Answer 2

này không chính xác đáp các thắc mắc của bạn, nhưng bạn có thể thử để vô hiệu hóa *-transition tài sản hoặc giảm giá trị thời gian từ quy định 0.3s. Điều này được xác định trong .modal.fade. Nhưng điều này sẽ gây rối với hoạt ảnh pop-up ban đầu. Nếu điều này không được chấp nhận, bạn có thể sử dụng sự kiện start của tiện ích draggable để áp dụng kiểu mới.

Answer 3

tôi thấy rằng tại bootstrap 3 tôi phải ghi đè lên các đặc tính css của hộp thoại modal:

.modal 
{ 
    overflow: hidden; 
    bottom: auto; 
    right: auto; 
} 
.modal-dialog{ 
    margin-right: 0; 
    margin-left: 0; 
} 

Fiddle

Full screen demo

Answer 4

Tôi thích sử dụng jQueryUI. Thông tin chi tiết hơn về API có thể kéo tại đây: http://api.jqueryui.com/draggable/

Answer 5

Với Bootstrap 3.3 và jQuery UI 1.1 Tôi đang thêm một lớp được gọi là "modal-draggable" vào phần tử với lớp "phương thức".

Nó liên kết với phần tử .modal-dialog bên trong các thùng chứa với lớp .modal-draggable (không giống như một số ví dụ ở đây liên kết với vùng chứa thực tế).

Có một số CSS để cuộn cho các hộp thoại dài vẫn hoạt động trên các thiết bị thuộc mọi kích thước màn hình.

CSS:

.modal-draggable .modal-backdrop { 
    position: fixed; 
} 

.modal.modal-draggable { 
    overflow: overflow-y; 
} 

.modal-draggable .modal-header:hover { 
    cursor: move; 
} 

JavaScript:

$(".modal-draggable .modal-dialog").draggable({ 
    handle: ".modal-header" 
}); 

Xem Fiddle JS đây cho một bản demo: http://jsfiddle.net/jcosnn6u/3/

NB: Cho đến nay tôi đã chỉ được thử nghiệm này trong Chrome, Firefox và Safari và thiết bị di động, vì vậy không thể nhận xét về tương thích Internet Explorer ity.

Answer 6

Mặc dù các thay đổi CSS được đề xuất phù hợp với tôi, tôi không thích hộp thoại được hiển thị ở bên trái ban đầu. Nâng cấp giao diện người dùng jquery từ 1,9 lên 1,11 đã khắc phục sự cố tôi đã thấy