Possibility to set position programmatically

[euskalhenriko]

Hi!

sometimes I need to set the position programmatically, for example if the window is resized and the draggable element is left out of it.
I do it modifying the position of element manually and accessing the draggable-state via getAttribute to change the startDragPosition and currentDragPosition, but it's tricky

Now is possible? If not, is a possible future feature?

Thank!

[IsraelZablianov]

Will be added hopefully in the next version

[mcvova]

I do it modifying the position of element manually and accessing the draggable-state via getAttribute to change the startDragPosition and currentDragPosition, but it's tricky

Hi! How did you set the position programmatically? Can you give an example? I tried this code:

let  block = document.querySelector("#block");

let  data = JSON.parse(block .getAttribute('draggable-state'));

 _.merge(data, {
       currentDragPosition: {
              left: 150,
              top: 150
            }            
});

_.merge(data, {
        initialPosition: {
              left: 150,
              top: 150
            }            
 });

_.merge(data, {
       startDragPosition: {
              left: 150,
              top: 150
            }            
});

block.setAttribute('draggable-state', JSON.stringify(data));

[IsraelZablianov]

The feature is still not implemented, but what that you wrote should work as a work around

[fabiofdsantos]

@mcvova,

Thanks for sharing! I've introduced code to change css style of the draggable container.

function updateTagPosition(left, top) {
  let block = document.querySelector(".draggable-container");

  let data = JSON.parse(block.getAttribute("draggable-state"));

  _.merge(data, {
    currentDragPosition: {
      left: left,
      top: top
    }
  });

  _.merge(data, {
    initialPosition: {
      left: left,
      top: top
    }
  });

  _.merge(data, {
    startDragPosition: {
      left: left,
      top: top
    }
  });

  block.setAttribute("draggable-state", JSON.stringify(data));

  block.style.position = "fixed";
  block.style.left = left + "px";
  block.style.top = top + "px";
}

[phtwo]

this.draggableValue.initialPosition.left= left
this.draggableValue.initialPosition.top = top
this.draggableValue.resetInitialPos = true
this.$nextTick(() => (this.draggableValue.resetInitialPos = false))

I use initialPosition and resetInitialPos