div元素拖动到特定位置时如何触发模态?
Posted
技术标签:
【中文标题】div元素拖动到特定位置时如何触发模态?【英文标题】:How to trigger modal when div element is dragged to specific location? 【发布时间】:2019-10-16 03:55:54 【问题描述】:我正在为一个学校项目制作一个棋盘游戏网站。我有一个可以拖动的 div 元素(图像)。目标是到达终点线。所以我的主要问题是当图像被拖到终点时如何触发模态?下面是我编写的用于在画布上拖动元素的代码。
var canvas = new fabric.Canvas('c', selection: false );
var grid = 35;
// create grid
for (var i = 0; i < (3000 / grid); i++)
canvas.add(new fabric.Line([ i * grid, 0, i * grid, 3000], stroke: '#ccc', selectable: false ));
canvas.add(new fabric.Line([ 0, i * grid, 3000, i * grid], stroke: '#ccc', selectable: false ))
const url = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_geel.png';
const url1 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_blauw.png';
const url2 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_lichtblauw.png';
const url3 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_lichtgroen.png';
const url4 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_paars.png';
const url5 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_rood.png';
const url6 = 'https://oege.ie.hva.nl/~delawai/assets/images/Photos/bus_roze.png';
fabric.Image.fromURL(url, (img) =>
//scale down the image but keeping the aspect ratio
const width = 100;
const height = 80;
const widthFactor = width / img.width;
const heightFactor = height/ img.height;
const minFactor = Math.min(widthFactor, heightFactor);
img.scale(minFactor);
canvas.add(img)
,
//here you can set the positioning
left: 1790,
top: 40,
);
fabric.Image.fromURL(url1, (img) =>
//scale down the image but keeping the aspect ratio
const width = 100;
const height = 80;
const widthFactor = width / img.width;
const heightFactor = height/ img.height;
const minFactor = Math.min(widthFactor, heightFactor);
img.scale(minFactor);
canvas.add(img)
,
//here you can set the positioning
left: 1790,
top: 100,
);
fabric.Image.fromURL(url2, (img) =>
//scale down the image but keeping the aspect ratio
const width = 100;
const height = 80;
const widthFactor = width / img.width;
const heightFactor = height/ img.height;
const minFactor = Math.min(widthFactor, heightFactor);
img.scale(minFactor);
canvas.add(img)
,
//here you can set the positioning
left: 1790,
top: 150,
);
fabric.Image.fromURL(url3, (img) =>
//scale down the image but keeping the aspect ratio
const width = 100;
const height = 80;
const widthFactor = width / img.width;
const heightFactor = height/ img.height;
const minFactor = Math.min(widthFactor, heightFactor);
img.scale(minFactor);
canvas.add(img)
,
//here you can set the positioning
left: 1790,
top: 200,
);
fabric.Image.fromURL(url4, (img) =>
//scale down the image but keeping the aspect ratio
const width = 100;
const height = 80;
const widthFactor = width / img.width;
const heightFactor = height/ img.height;
const minFactor = Math.min(widthFactor, heightFactor);
img.scale(minFactor);
canvas.add(img)
,
//here you can set the positioning
left: 1790,
top: 250,
);
fabric.Image.fromURL(url5, (img) =>
//scale down the image but keeping the aspect ratio
const width = 100;
const height = 80;
const widthFactor = width / img.width;
const heightFactor = height/ img.height;
const minFactor = Math.min(widthFactor, heightFactor);
img.scale(minFactor);
canvas.add(img)
,
//here you can set the positioning
left: 1790,
top: 300,
);
fabric.Image.fromURL(url6, (img) =>
//scale down the image but keeping the aspect ratio
const width = 100;
const height = 80;
const widthFactor = width / img.width;
const heightFactor = height/ img.height;
const minFactor = Math.min(widthFactor, heightFactor);
img.scale(minFactor);
canvas.add(img)
,
//here you can set the positioning
left: 1790,
top: 350,
);
canvas.on('object:moving', function(options)
options.target.set(
left: Math.round(options.target.left / grid) * grid,
top: Math.round(options.target.top / grid) * grid
);
);
)
【问题讨论】:
【参考方案1】:使用碰撞检测启动here,并编写一个在检测发生后启动模态的函数。
【讨论】:
感谢您的信息,但我不知道如何在我的 oww 代码中实现这一点。你能把喵喵指向正确的方向吗?以上是关于div元素拖动到特定位置时如何触发模态?的主要内容,如果未能解决你的问题,请参考以下文章