Resizable handle outside the target element

[vlatkoodrljin]

How i can place resizable handle outside the target element regarding draggable example below? I can't find any working example, help please.

interact(target)
  .draggable({
        manualStart: true
    })
   .on('hold', function (event) {
        var interaction = event.interaction;

      if (!interaction.interacting()) {
  interaction.start({ name: 'drag' },
                    event.interactable,
                    event.currentTarget);
}
});

[taye]

I can't make a full demo now. The general idea is to listen for down (or move) events on the handles and then manually start a resize action on the element that the handle is for.

<!-- Resize handle.
     the data-[edge] attributes hold the edges that the handle can resize --> 
<div class="resize-handle" data-right="true" data-bottom="true"></div>

<!-- The element that the handle resizes --> 
<div id="resizable-element"></div>

interact('#resize-element').resizable(...);

interact('.resize-handle').on('down', function (event) {
  var interaction = event.interaction,
      handle = event.currentTarget;

  interaction.start({
      name: 'resize',
      edges: {
        top   : handle.dataset.top,
        left  : handle.dataset.left,
        bottom: handle.dataset.bottom,
        right : handle.dataset.right,
      }   
    },  
    interact('#resizable-element'),               // target Interactable
    document.getElementByID('resize-element'));   // target Element
});

I didn't test the code above by the way.

[taye]

Here is a working demo http://codepen.io/taye/pen/pJWQRx.

[alexiskattan]

Could something like this be added to the library? Making it clear that an object is resizable would help with discoverability. Maybe an option of add handles in resizable...

[taye]

I feel that that's something that should be implemented in a separate library on top of interact.js so I'm against adding it directly. I might change my mind in the future but I don't think that it's likely.

And by the way, I've improved that demo a little.

[ydatech]

@taye the demo ([http://codepen.io/taye/pen/pJWQRx]) doesn't work. why?

[zorentsl]

I was able to get the codepen to work by editing the interact library.
On line 1752 of interact.js in the start function, I changed
this.setEventXY(this.startCoords);
to
this.setEventXY(this.startCoords, this.pointers);

I might make a PR for this change. It looks like pointers is a required parameter for setEventXY.

[zorentsl]

Once I've started down this road....
A possible change to the demo:
interaction.start({
name: 'resize',
edges: {
top : handle.dataset.top,
left : handle.dataset.left,
bottom: handle.dataset.bottom,
right : handle.dataset.right,
}
},
should be
interaction.start({
name: 'resize',
edges: {
top : (handle.dataset.top == "true"),
left : (handle.dataset.left == "true"),
bottom: (handle.dataset.bottom == "true"),
right : (handle.dataset.right == "true"),
}
},