Is there a way to disable draggable only for manual input?

[jifka]

I can't seem to find any simple way to do this, so any pointers would be helpful.

I want to be able to toggle draggable/resizable/etc., preferably when the element is clicked. But still allow programmatic movement calling moveable.request. Disabling draggable, shuts off click events, so it needs to stay enabled, as far as I can tell.

Also, I've been able to effectively toggle all other -ables by setting the movebale.className which either shows or hides the moveable-control-box, but the element remains draggable.

In short - I want all -ables to be active, but ignore human input with the element is marked "inactive".

[daybrush]

@jifka

What version of moveable is there? Now, the click event is triggered even when draggable is disabled.

[jifka]

I'm using the latest version: 0.28.

Maybe this will clarify. I'm building an editor and would like to only have one item "active" at a time in edit mode, but in run mode I want code to be able to move items on screen using the .request method. Here's what I'm trying to do:

Edit Mode:

• click events fire so I can set the item to active and enable/disable draggable
• draggable controls are visible

Run Mode:

• manual dragging disabled, but .request methods still work to programmatically move items
• click events are ignored

As I mentioned, I got it working by effectively hiding the moveable control elements using css when it's in Run Mode, but was hoping there was something less hacky.

[daybrush]

@jifka

1. The request method works even if it is disabled.
2. If draggable=false, resizable=false is set, all controls are invisible.

[jadiagaurang]

@daybrush I have similar situation. I have Editing Mode and Run Mode. I would like to hide control-box completely in Run Mode and user shouldn't be able to move or resize elements as well.

But, I would like to move Elements using .request("draggable", {}, true) and .request("resizable", {}, true) as needed.

If I configure moveable with following config then also I get borders around the Elements.

var me = this;
var $el = $(".container");
var $target = $(".target");
me.moveable = new Moveable($el[0], {
    target: $target[0],
    
    draggable: false,
    resizable: false,
    scalable: false,
    snappable: false,
    rotatable: false,

    keepRatio: false,

    bounds: me.data.bounds
});

Do you have any inbuild method to hide control box?

If not then I am planning to setup className: "runmode" and setup .runmode { display: none !important; } in CSS.

Let me know your thoughts?