问题描述
我正在尝试创建一个虚拟的便利贴板,您可以在其中添加注释、拖动它等。我还希望能够放大和缩小板并平移。我已经完成了大部分工作,但是当我执行平移/缩放操作(使用我找到的库)时,可拖动元素无法拖动到原始视图之外,并且拖动会执行一些奇怪的操作。
我不知道为什么卡住了,我是否必须扩大电路板的尺寸?
这是Javasript:
// Pan Zoom
var element = document.querySelector('#board');
var pz = panzoom(element);
pz.pause();
pz.on('transform',function (e) { // This event will be called along with events above.
var pz_scale = (pz.getTransform().scale * 100);
$("#tool_zoom").html(pz_scale + "%");
});
var drag_status = false;
$(document).on('click','#tool_hand',function () {
if (drag_status == false) {
drag_status = true;
pz.resume();
$(this).html('<i class="las la-hand-paper la-2x"></i> STOP');
} else {
drag_status = false;
pz.pause();
$(this).html('<i class="las la-hand-paper la-2x"></i> Pan/Zoom');
}
});
$(document).on('click','#tool_add',function () {
var post = '<div class="post-wrapper" style="transform: rotate(2deg);">' + '<div class="post" style="background-color: #fae481;"><h1>drag</h1></div>' + '</div>'
$('#board').append(post);
$('.post').draggable({
drag: function () {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$(this).html('x: ' + xPos + '<br/> y: ' + yPos);
},stop: function (event,ui) {}
});
});
$('.post').draggable({
drag: function () {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$(this).html('x: ' + xPos + '<br/> y: ' + yPos);
},ui) {}
});
请参阅此小提琴示例。 jsfiddle
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)