Перетаскивание элементов на масштабируемом div

Я пробовал использовать встроенный jQuery, и я пробовал использовать пользовательские функции перетаскивания безрезультатно. У обоих есть свои уважаемые проблемы, и я постараюсь выделить их обоих.

в основном, я пытаюсь разрешить перетаскивание элемента, который находится в масштабированном контейнере div. Работают следующие методы ОК на масштабируемом элементе, который меньше, чем вокруг 2. Но если вы подниметесь выше этого, мы увидим некоторые проблемы.

любая помощь будет оцененный. Спасибо, что уделили мне время.

HTML-код

<div id="container">
    <div id="dragme">Hi</div>
</div>

метод 1 (функция перетаскивания Jquery)

Я пробовал функцию jQuery draggable, как вы можете видеть в этом jsfiddle пример.

проблемы, которые я нашел в этом примере, следующие:

• самая большая проблема: сбрасываемый контейнер не изменяется при его масштабировании. Поэтому, если элемент перетаскивается над частью масштабированного контейнера, который не является частью его исходного размера, он потерпит неудачу.
• когда вы нажимаете, чтобы перетащить div, он телепортируется немного подальше от мыши и не является бесшовные перетащить.

JS

var percent = 2.5;

$("#dragme").draggable({
    zIndex: 3000,
    appendTo: 'body',
    helper: function (e, ui) {
        var draggable_element = $(this),
            width = draggable_element.css('width'),
            height = draggable_element.css('height'),
            text = draggable_element.text(),
            fontsize = draggable_element.css('font-size'),
            textalign = draggable_element.css('font-size');
        return $('<div id="' + draggable_element.id + '" name="' + draggable_element.attr('name') + '" class="text">' + text + '</div>').css({
            'position': 'absolute',
                'text-align': textalign,
                'background-color': "red",
                'font-size': fontsize,
                'line-height': height,
                'width': width,
                'height': height,
                'transform': 'scale(' + percent + ')',
                '-moz-transform': 'scale(' + percent + ')',
                '-webkit-transform': 'scale(' + percent + ')',
                '-ms-transform': 'scale(' + percent + ')'
        });
    },
    start: function (e, ui) {
        $(this).hide();
    },
    stop: function (e, ui) {
        $(this).show();
    }
});

$("#container").droppable({
    drop: function (event, ui) {
        var formBg = $(this),
            x = ui.offset.left,
            y = ui.offset.top,
            drag_type = ui.draggable.attr('id');

        var element_top = (y - formBg.offset().top - $(ui.draggable).height() * (percent - 1) / 2) / percent,
            element_left = (x - formBg.offset().left - $(ui.draggable).width() * (percent - 1) / 2) / percent;

        $(ui.draggable).css({
            'top': element_top,
                'left': element_left
        });

    }
});

Метод 2-пользовательская функция перетаскивания

Я пробовал использовать пользовательскую функцию перетаскивания, но она непригодна для использования после 2 масштаб.

• jsfiddle на scale(2) - похоже, у перетаскиваемого div припадок.
• jsfiddle на scale(2.5) - перетаскиваемый div улетает, когда вы пытаетесь перетащить его.

JS

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

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

        if (opt.handle === "") {
            var $el = this;
        } else {
            var $parent = this;
            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 {
                $(this).addClass('active-handle')
                var $drag = $parent.addClass('draggable');
            }

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

            follow = function (e) {
                $drag.offset({
                    top: e.pageY + pos_y - drg_h,
                    left: e.pageX + pos_x - drg_w
                })
            };

            $(window).on("mousemove", follow).on("mouseup", function () {
                $drag.removeClass('draggable');
                $(window).off("mousemove", follow);
            });

            e.preventDefault(); // disable selection

        }).on("mouseup", function () {
            if (opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle');
                $parent.removeClass('draggable');
            }
        });

    }
})(jQuery);

$("#dragme").drags({}, function (e) {});