【发布时间】：2015-03-03 00:21:49
【问题描述】：
我尝试过使用 jquery 的内置可拖动功能，也尝试过使用自定义拖动功能但无济于事。两者都有其受人尊敬的问题，我将尝试强调它们。
基本上，我试图允许拖动缩放 div 容器上的元素。以下方法okay在小于2 的缩放元素上工作。但是，如果您高于此值，我们就会发现一些问题。
任何帮助将不胜感激。感谢您的宝贵时间。
HTML
<div id="container">
<div id="dragme">Hi</div>
</div>
方法一（jquery可拖动函数）
我已经尝试了 jquery 可拖动功能，正如您在这个 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 缩放后无法使用。
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) {});
【问题讨论】：
-
您是否尝试制作自定义拖动功能？ jquery-ui 已经有了可拖动的功能。
-
我用几个缩放条目测试了你的代码。似乎一旦达到 1.75 左右，它就会像您建议的那样开始闪烁和跳跃。下面的任何东西似乎都很好。
-
我还冒昧地更新了您的 jsfiddle，以便您可以跟踪位置和大小。我会尝试更多的东西，但我认为这可能是与浏览器相关的问题。
标签： javascript jquery jquery-ui jquery-ui-draggable