How to link javascript and html for resizing?

Question

I am new to javascript, and is trying to follow the resizing tutorial here.

I created three files in the same folder, with index.js and style.css by directly copying and pasting the demo. The followings are the index.html, index.js, and style.css. The html and js files don't seem to be able to interact.

Edits:

interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener
  })
  .resizable({
    preserveAspectRatio: true,
    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 = Math.round(event.rect.width) + '×' + Math.round(event.rect.height);
  });

.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: 240px;
}

 <html>
  <head>
   <script type="text/javascript" src="index.js"></script>

   <link rel="stylesheet" href="style.css"/>
  </head>

  <body>
   <div class="resize-container">
     <div class="resize-drag">
        Resize from any edge or corner
     </div>
   </div>

  </body>
 </html>

please add css and js content to your question with complete of index.html file — Ivan Barayev, Nov 19 '17 at 19:21
now let me know what do you want ? only resize or resize with drag&drop — Ivan Barayev, Nov 20 '17 at 06:40
I am trying to follow the resize example. And in its online demo, you can drag and move, and resize, and I want to replicate that. — KubiK888, Nov 20 '17 at 06:55
I tried it, I can resize it but couldn't drag. if you want I can share it — Ivan Barayev, Nov 20 '17 at 07:17

score 1 · Answer 1 · answered Nov 21 '17 at 10:28

As in comment it worked without dragable function. You can see it in action

interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener
  })
  .resizable({
    preserveAspectRatio: true,
    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 = Math.round(event.rect.width) + '×' + Math.round(event.rect.height);
  });

.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: 240px;
}

 <html>
  <head>
   <script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js"></script>
   <link rel="stylesheet" href="style.css"/>
  </head>

  <body>
   <div class="resize-container">
     <div class="resize-drag">
        Resize from any edge or corner
     </div>
   </div>

  </body>
 </html>

Thanks, I really don't get why this is happening. Your code works on this page when I "run code snippet". But when I copied and pasted them in the actual file into index.html, index.js, and style.css, the resizing doesn't work. And I even tried creating the interact.js by coping the content of https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js. And then replace the line to , but no resizing whatsoever, and I tried in different browsers. — KubiK888, Nov 21 '17 at 15:08

How to link javascript and html for resizing?

1 Answers1