Issue #1853💬 AnsweredOpened March 4, 2019by MisterFK1 reactions

Drag&Drop position

快速解答by NicoEngler1

Hi, one attempt to solve this could be:Find the iframe of the canvasFind the mouse position inside the iframe To do so, you could combine functions shared on StackOverflow. The first step could be tackled with the function found right here: https://stackoverflow.com/a/1452885/8658366 The second step could be tackled w...

Read full answer below ↓

Question

Hi,

I try to have the mouse position when i drag&drop a block. Is it possible to have the X position and Y position with this event or another ? editor.on('block:drag:stop', model => [...]);

Thanks

Answers (3)

NicoEnglerMarch 4, 2019

Hi, one attempt to solve this could be:

  1. Find the iframe of the canvas
  2. Find the mouse position inside the iframe

To do so, you could combine functions shared on StackOverflow.

The first step could be tackled with the function found right here: https://stackoverflow.com/a/1452885/8658366

The second step could be tackled with the function found right here: https://stackoverflow.com/a/7790764/8658366

I have combined those and set up a demo for you right here: https://jsfiddle.net/6f3rw4um/ Check the output of the console.

Good luck

MisterFKMarch 5, 2019

Thanks artf,

I already try to catch the onmouseup or onmousemove events on the iframe (and it's work) but when i drag&drop a block the event don't trigger (maybe because the mouse is on the block image)... There is no event grapesjs to have the drop position (absolute position) ?

Thanks again !

NicoEnglerMarch 5, 2019

Well, first off I am not artf :) Second, set up a demo we can work on to solve your issue.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.