Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Сниппеты » JS Сниппеты » Перетаскиваемый блок без использования jQueryUI

Перетаскиваемый блок без использования jQueryUI


     31.05.2013    сниппет, drggable, jquery, перетаскиваемый блок    JS Сниппеты    5873

Часто бывает нужно сделать перетаскиваемый блок?
Но ведь подключать монструозную библиотеку jQueryUI ради одного-двух блоков не имеет смысла.
Простой плагин для jquery решит проблему, если не нужны все возможности jQueryUI
Плагин:
(function($) {
    $.fn.drags = function(opt) {

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

        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });

    }
})(jQuery);

Инициализация:
jQuery(document).ready(function($) {
    $('.dragme').drags();
});
Демо

1 комментарий

websot
Юзер

websot - 8 марта 2014 22:08 -

Можно ли применять 1 ID параметр к нескольким блокам или можно через (запятую - не профи по JS) использовать данный плагин?

Чтобы комментировать - войдите или зарегистрируйтесь на сайте
наверх