Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru Сниппеты JS Сниппеты Перетаскиваемый блок без использования jQueryUI

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


     31.05.2013    JS Сниппеты    4071

Часто бывает нужно сделать перетаскиваемый блок?
Но ведь подключать монструозную библиотеку 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
2

61 | 10

websot - 8 марта 2014 22:08 - Юзер

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

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