Drag Drop into move mode about vue-responsive-dash HOT 13 CLOSED

Hi @peterjslater ,

Interesting application! The reason you mouse event is not working is its actually another div inside the component that monitors the mouse click. The div has an id of the items id + "-overlay"

i.e. if the item id is 4 the div monitoring clicks has an id of "4-overlay". However simply changing this in the example unfortunately does not give the desired result as the dash item then darts across the screen which is most likely due to the initial position being outside the layout? (thats a guess im not 100% sure")

Here is what i modified:

methods: { onDragOver(item) { console.log("Drag Over"); console.log(item.data); if (!this.newOne) { this.newOne = { id: "4", x: 0, y: 0, width: 1, height: 1 }; this.ditems.push(this.newOne); } this.$nextTick(() => { // get the new dash-item var newdashitem = document.getElementById("4-overlay") console.log(newdashitem); // try and simulate a mouse down to get the item into moving mode this.simulate(newdashitem, "mousedown"); }); } },

from vue-responsive-dash.

Edit it runs off the screen due to the code running over and over again.

from vue-responsive-dash.

Not a perfect example but should give you enough to go on. https://codesandbox.io/s/vue-responsive-dash-hw81b

from vue-responsive-dash.

Thanks, that helps a lot, will try it out.

from vue-responsive-dash.

I have almost got it all working, just having an issue where the positions get out of sync (prob because of the simulated mouse click)

To fix I just have to do a single mouse click on one of the dash-item, and the positions correct themselves.

Is it possible to have a javascript call on dashbord object to recalc all the positions just like a click on a dash item does ?

I have tried simulating mouse click but am having lots of trouble, if there was a method I could call it would make it a lot easier.
Thanks
Peter

from vue-responsive-dash.

Just to see if by calling this method it solves your issue try adding a dashItem with zero width/height and at random position. (when you would expect to want to call the method.) Then remove it again after a next tick event.

from vue-responsive-dash.

ok will try it, thanks.

from vue-responsive-dash.

The issue seems to have gone away with the latest update, thanks.

from vue-responsive-dash.

Hi the issue above is back (once i fixed the key using index it came back)

I can replicate the issue below,

https://codesandbox.io/s/vue-responsive-dash-wn52w?file=/src/App.vue

I am trying to drag an item into dashboard and then cancel the drag by moving the mouse out of the drag area without lifting the left mouse button. Once the drag is outside area, it should remove the dash-item that was just added and return the orignal dash-items to their original places.

However after the drag out, there is a "hole" left where the dash-item was. A single click on one of the existing dash-items will trigger a "recalc' and move them back into correct position.

I tried your suggestion adding an empty dash-item (h:0 w:0) and that seemed to fix it.
you can see this by uncommenting the code on lines 101-105

So if there was a call that did the same, that would be a bit cleaner than adding a dummy dash-item.

Thanks
Peter

from vue-responsive-dash.

Currently the dash Items are not compacted when an item is removed. Ill do some testing in adding this functionality in when i get some time. This will solve your issue.

from vue-responsive-dash.

https://codesandbox.io/s/vue-responsive-dash-tjqxq using the most recent version fixes this issue by re-compacting the layout on removal of an item.

from vue-responsive-dash.

Thanks, that works great!

p.s. for anyone using the codesandbox pages in this thread, the latest version of vue-easy-dnd (1.5.2) causes issues with the mouse moves, looks like they are not getting passed to the dashboard. It all works well with version "vue-easy-dnd": "1.3.17"

from vue-responsive-dash.

Good to hear!

from vue-responsive-dash.