Twitter Phương thức khởi động của Twitter: Cách kéo và thả?

Question

Tôi muốn có thể di chuyển xung quanh (trên nền màu xám, bằng cách kéo và thả) dạng thức được cung cấp bởi Bootstrap 2. Bất kỳ ai có thể cho tôi biết cách thực hành tốt nhất để đạt được điều này là gì?

Answer 1

Trình khởi động không đi kèm với bất kỳ chức năng kéo và thả theo mặc định, nhưng bạn có thể thêm một chút jQuery UI gia vị vào hỗn hợp để có được hiệu ứng bạn đang tìm kiếm. Ví dụ: sử dụng tương tác draggable từ khung công tác, bạn có thể nhắm mục tiêu ID phương thức của mình để cho phép nó được kéo xung quanh phông nền phương thức.

Hãy thử điều này:

JS

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

Demo, sửa here.

Cập nhật: bootstrap3 demo

Answer 2

Dù kéo tùy chọn bạn đi, bạn có thể muốn tắt *-transition thuộc tính cho .modal.fade trong file CSS bootstrap, hoặc ít nhất là viết một số JS tạm thời vô hiệu hóa chúng trong thời gian kéo. Nếu không, phương thức sẽ không kéo chính xác như bạn mong đợi.

Answer 3

Giao diện người dùng jquery lớn và có thể xung đột với trình khởi động.

Một cách khác là DragDrop.js: http://kbjr.github.io/DragDrop/index.html

DragDrop.bind($('#myModal')[0], { 
    anchor: $('#myModal .modal-header') 
}); 

Bạn vẫn phải đối phó với các chuyển động, như @ user535673 gợi ý. Tôi chỉ cần loại bỏ các lớp mờ dần từ hộp thoại của tôi.

Answer 4

Bạn có thể sử dụng một tập lệnh nhỏ như thế này.

đơn giản hóa từ Draggable without jQuery UI

(function ($) { 
     $.fn.drags = function (opt) { 

      opt = $.extend({ 
       handle: "", 
       cursor: "move" 
      }, opt); 

      var $selected = this; 
      var $elements = (opt.handle === "") ? this : this.find(opt.handle); 

      $elements.css('cursor', opt.cursor).on("mousedown", function (e) { 
       var pos_y = $selected.offset().top - e.pageY, 
        pos_x = $selected.offset().left - e.pageX; 
       $(document).on("mousemove", function (e) { 
        $selected.offset({ 
         top: e.pageY + pos_y, 
         left: e.pageX + pos_x 
        }); 
       }).on("mouseup", function() { 
        $(this).off("mousemove"); // Unbind events from document     
       }); 
       e.preventDefault(); // disable selection 
      }); 

      return this; 

     }; 
    })(jQuery); 

dụ: $ ("# someDlg") modal() kéo ({xử lý: "modal-header"})..;