![](/img/trans.png)
[英]How to trigger event when dragged text on a div or dropped a text on a div
[英]How to trigger modal when div element is dragged to specific location?
我正在為一個學校項目制作一個桌游網站。 我有一個可以拖動的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
});
});
})
開始在這里與碰撞檢測,並編寫啟動模式檢測發生后的功能。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.