probil / vue-moveable

↔️ ↕️ 🔄 Vue.js wrapper for Moveable
https://vue-moveable.netlify.com/
MIT License
965 stars 69 forks source link

How to hide blue lines? #174

Open Evan-Millikan opened 4 years ago

Evan-Millikan commented 4 years ago

I want to make the page an edit page. Thus, when on edit page there is a blue line and everything is draggable and such but when you press save everything is "saved" and i want to hide the blue lines.

Is there a way to hide the blue lines surrounding your html elements?

tnorbs commented 4 years ago

I'm having the same issue.. Can't hide the blue lines!

L-wo commented 4 years ago

You can hide the blue lines by including this CSS in an appropriate place:

.moveable-control-box { opacity: 0; }

In my project, I included it in the parent component in an unscoped style tag.

rosoksdev commented 3 years ago

You should change all states of moveable object to false (keepRatio or throttle can be origin):

moveable: {
      draggable: false,
      throttleDrag: 1,
      resizable: false,
      throttleResize: 1,
      keepRatio: true,
      scalable: false,
      throttleScale: 1,
      rotatable: false,
      throttleRotate: 1,
      pinchable: false,
      origin: false
}

by doing this, element wouldn't have movable possibility. or To save movable, you should look at css tables in developer console (in browser), and find one which sets color to editlines. (In firefox go to your site and press SHIFT + F7 to access all css tables, so you can play with visibility of tables and put your properties in code)

umonaca commented 3 years ago

Set the following CSS in your project:

.moveable-line {
  background-color: transparent !important;
}