0
私はjavascriptを初めて使用しており、サイズ変更チュートリアルhereに従っています。サイズ変更のためにjavascriptとhtmlをリンクするには？
私が直接デモをコピーして貼り付けてindex.jsとのstyle.cssと同じフォルダ内の3つのファイルを、作成しました。以下は、index.html、index.js、およびstyle.cssです。 htmlファイルとjsファイルは相互作用できないようです。
編集：それはドラッグ可能機能なしで働いていたコメントのように
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;
}\t <html>
\t \t <head>
\t \t \t <script type="text/javascript" src="index.js"></script>
\t \t \t <link rel="stylesheet" href="style.css"/>
\t \t </head>
\t \t <body>
\t \t \t <div class="resize-container">
\t \t \t <div class="resize-drag">
\t \t \t Resize from any edge or corner
\t \t \t </div>
\t \t \t </div>
\t \t </body>
\t </html>
私はすべての3つのファイルが含まれるようにポストを編集したのindex.htmlファイル –
の完全にあなたの質問にCSSやJSコンテンツを追加してくださいアクションでそれを見ることができます。 – KubiK888
今、あなたは何をしたいのですか？ ドラッグ＆ドロップでサイズ変更またはサイズ変更する –