2

Thanks in advance.

Here is my code,

<svg width="500px" height="500px" viewBox="0 0 200 200">
    <rect x="60" y="60" width="80" height="40" style="fill: none; stroke:     green;"/> 
</svg>

JSFIDDLE link

Expected O/P I need to re-size this rectangle from any location. But unlike HTML DOM, not all elements have an upper left hand corner x,y coordinate and a width and height for a box surrounding the content. This makes it inconvenient to make a generic resize or drag procedure.

how to achieve this? Could someone help me with any idea's or solution's!

Akbar Basha
  • 1,168
  • 1
  • 16
  • 38
  • http://stackoverflow.com/questions/3614200/draggables-and-resizables-in-svg Here is a similar question as you asked. Learn the logic yourself. – Jose Mar Aug 21 '15 at 03:57

2 Answers2

2

check this, It will help you. WORKING

 interact('.resize-drag')
  .draggable({
      onmove: window.dragMoveListener
  })
  .resizable({
      edges: { left: true, right: true, bottom: true, top: true }
  })
  .on('resizemove', function (event) {
      var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

      // update the element's style
      target.style.width = event.rect.width + 'px';
      target.style.height = event.rect.height + 'px';

      // translate when resizing from top or left edges
      x += event.deltaRect.left;
      y += event.deltaRect.top;

      target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
      target.textContent = event.rect.width + '×' + event.rect.height;
  });

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  interact('.resize-drag')
  .draggable({
      // enable inertial throwing
      inertia: true,
      // keep the element within the area of it's parent
      restrict: {
          restriction: "parent",
          endOnly: true,
          elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
      },

      // call this function on every dragmove event
      onmove: dragMoveListener,
      // call this function on every dragend event
      onend: function (event) {
          var textEl = event.target.querySelector('p');

          textEl && (textEl.textContent =
        'moved a distance of '
        + (Math.sqrt(event.dx * event.dx +
                     event.dy * event.dy) | 0) + 'px');
      }
  });

  function dragMoveListener(event) {
      var target = event.target,
      // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

      // translate the element
      target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

      // update the posiion attributes
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
  }
  window.dragMoveListener = dragMoveListener;
     .resize-drag {
  background-color: #29e;
  color: white;
  font-size: 20px;
  font-family: sans-serif;
  border-radius: 8px;
  padding: 20px;
  margin: 30px 20px;

  width: 120px;

  /* This makes things *much* easier */
  box-sizing: border-box;
}

.resize-container {
  width: 100%;
  height: 206px;
}
<script src="http://code.interactjs.io/interact-1.2.4.min.js"></script>
<svg  class="resize-drag" width="500px" height="100px" viewBox="0 0 200 200">
    <rect  x="60" y="60" width="80" height="40" style="fill: none; stroke:     green;"/> 
</svg>
Anoop B.K
  • 1,484
  • 2
  • 17
  • 31
  • thanks for u r code.. it's works fine.. but one more think.. the rect also need to resize left side that mean (decrease the width of the rect from start point) – Akbar Basha Aug 21 '15 at 04:58
  • u can apply class="resize-drag" to rect also, but i wont think it will look cool :) – Anoop B.K Aug 21 '15 at 04:59
  • http://jsfiddle.net/BaliBalo/9HXMG/in this fiddle link,dragging and resizing perfomed for canvas rect.but I want to drag and resize a svg rect.so can u suggest any idea – Akbar Basha Aug 24 '15 at 10:32
  • yes anirudh i have provide one jsfiddle i need a exact behavior for u r solution.. in u r solution is working fine when drag and resize right left, top bottom but my scenarios is not working. – Akbar Basha Aug 24 '15 at 11:01
  • my provided link can be work left upto placed anywhere and also it can be movable left and top/bottom ... that's whats i need – Akbar Basha Aug 24 '15 at 11:04
  • do u want me to merge ur code and my code ?, u have used canvas there – Anoop B.K Aug 24 '15 at 11:21
  • yes i have used canvas.. but not svg?.. i need canvas behavior but need svg like u – Akbar Basha Aug 24 '15 at 11:31
1

check this code .... Similar to ur fiddle

interact('.resize-drag')
  .draggable({
      onmove: window.dragMoveListener
  })
  .resizable({
      edges: { left: true, right: true, bottom: true, top: true }
  })
  .on('resizemove', function (event) {
      var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

      // update the element's style
      target.style.width = event.rect.width + 'px';
      target.style.height = event.rect.height + 'px';

      // translate when resizing from top or left edges
      x += event.deltaRect.left;
      y += event.deltaRect.top;

      target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
      target.textContent = event.rect.width + '×' + event.rect.height;
  });

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  interact('.resize-drag')
  .draggable({
      // enable inertial throwing
      inertia: true,
      // keep the element within the area of it's parent
      restrict: {
          restriction: "parent",
          endOnly: true,
          elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
      },

      // call this function on every dragmove event
      onmove: dragMoveListener,
      // call this function on every dragend event
      onend: function (event) {
          var textEl = event.target.querySelector('p');

          textEl && (textEl.textContent =
        'moved a distance of '
        + (Math.sqrt(event.dx * event.dx +
                     event.dy * event.dy) | 0) + 'px');
      }
  });

  function dragMoveListener(event) {
      var target = event.target,
      // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

      // translate the element
      target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

      // update the posiion attributes
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
  }
  window.dragMoveListener = dragMoveListener;
.resize-drag {
  background-color: #29e;
font-family: sans-serif;
  border-radius: 8px;
/* This makes things *much* easier */
  box-sizing: border-box;
}

.resize-container {
  width: 100%;
  height: 500px;
}
<script src="http://code.interactjs.io/interact-1.2.4.min.js"></script>
<svg class="resize-container" >
    <rect class="resize-drag" width="80" height="40" /> 
</svg>
Anoop B.K
  • 1,484
  • 2
  • 17
  • 31