How to hide the blue handles?

[mspoulsen]

Hi,

I have a modal that I am trying to make moveable. I obviously don't want the blue handles surrounding the modal. How do I hide them? I have been searching the docs, but without success.

Thanks in advance!

[daybrush]

@mspoulsen

hide it via css

.moveable-line {
   display: none!important;
}

[mspoulsen]

Hmm...strange that this option is not part of the config. But thanks anyway :+1:

[aayush801]

Hmm...strange that this option is not part of the config. But thanks anyway 👍

Hi did this fix work for you? I tried doing the same but it didn't remove the blue handlers.

[daybrush]

@mspoulsen @aayush801

• moveable 0.27.0
• react-moveable 0.30.0
• preact-moveable 0.29.0
• ngx-moveable 0.23.0
• svelte-moveable 0.18.0
• lit-moveable 0.4.0
• vue-moveable 2.0.0-beta.2
• vue3-moveable 0.2.0

moveable's new version is released. Check it again.

You can use:

hideDefaultLines={true}

[aayush801]

I have the latest version of vue-moveable that is published (1.8.11) and this is my configuration on vue: moveable: { hideDefaultLines: true, draggable: true, pinchable: true, throttleDrag: 0.2, resizable: false, throttleResize: 1, keepRatio: true, scalable: true, throttleScale: 0, rotatable: true, throttleRotate: 0, }

this doesn't hide the lines. if I manually install the new 2.0.0 beta version, vue-moveable stops working entirely.

What should I do?

[daybrush]

@aayush801

From 2.0.0, the method of using Moveable is different.

<template>
<div class="container">
    <div class="target">Vue Moveable</div>
    <Moveable
        className="moveable"
        v-bind:target="['.target']"
        v-bind:draggable="true"
        v-bind:scalable="true"
        v-bind:rotatable="true"
        @drag="onDrag"
        @scale="onScale"
        @rotate="onRotate"
    />
</div>
</template>
<script>
import Moveable from 'vue-moveable';

export default {
  name: 'app',
  components: {
    Moveable,
  },
  methods: {
    onDrag({ transform }) {
      target.style.transform = transform;
    },
    onScale({ drag }) {
      target.style.transform = drag.transform;
    },
    onRotate({ drag }) {
      target.style.transform = drag.transform;
    },
  }
}
</script>

[aayush801]

thanks this works for the default lines issue. Is there a way to remove the rotatable and resizing dots too ?

the lines are gone, is there a similar option for the dots ?

is there any documentation for this new version?

[daybrush]

@aayush801

Set props

renderDirections={[]} rotationPosition="none"

[aayush801]

setting these props makes it work for the resizable buttons but not for the rotation button.

all the lines and sizing buttons are gone only the rotation one remains as you can see.

<Moveable className="moveable" v-bind:target="['.target']" v-bind:draggable="true" v-bind:scalable="true" v-bind:origin="false" v-bind:renderDirections="[]" v-bind:rotationPosition="none" v-bind:hideDefaultLines="isPreview" v-bind:rotatable="true" @drag="handleDrag" @scale="handleScale" @rotate="handleRotate" @warp="handleWarp" />

this is my config

is it possible to remove this too?

[daybrush]

Maybe it's a typo here. v-bind:rotationPosition="'none'"

[aayush801]

yes, it was, it's all working now. thank you so much !!

[scqilin]

opacity = 0 😂

[daybrush]

@scqilin

hide it via css

.moveable-control.moveable-direction {
   opacity: 0!important;
}