Twitter Bootstrap Modal Formu: Nasıl sürükleyip bırakılır?

Question

Bootstrap 2 tarafından sağlanan modal formun etrafından dolaşabilmeyi (grileştirilmiş arka planda, sürükleyip bırakarak) yapabilmeyi isterim. Bunu başarmak için en iyi uygulamanın ne olduğunu söyleyebilir misiniz?

Answer 1

Önyükleme işlevi varsayılan olarak sürükleme ve bırakma işleviyle birlikte gelmez, ancak aradığınız efekti elde etmek için karışıma biraz jQuery UI baharatı ekleyebilirsiniz. Örneğin, çerçeveden draggable etkileşimini kullanarak, modal kimliğinizi, modal fonunda sürüklenmesini sağlamak için hedefleyebilirsiniz.

bu deneyin:

JS

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

Demo, here düzenleyin.

Güncelleme: bootstrap3 demo

Answer 2

sürüklenebilir ne olursa olsun gitmek seçeneği sayesinde, Bootstrap CSS dosyasındaki .modal.fade için *-transition özelliklerini kapatmak ya da en azından geçici olarak sürükleyerek sırasında bunları devre dışı bırakır bazı JS yazmak isteyebilirsiniz. Aksi takdirde, modal tam olarak beklediğiniz gibi sürüklenmez.

Answer 3

jquery UI büyüktür ve önyükleme ile çakışabilir.

alternatif

DragDrop.js geçerli: @ user535673 anlaşılacağı gibi http://kbjr.github.io/DragDrop/index.html

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

Hala geçişler uğraşmak zorunda. Sadece soluk sınıfını iletişim penceremden kaldırırım.

Answer 4

Bunun gibi küçük bir komut dosyası kullanabilirsiniz.

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); 

örnekten basitleştirilmiş: $ ("# someDlg") modal() sürükler ({kolu: "modal-başlığı"})..;