0
Ich bin neu in Javascript und versuche, die Größenanpassung Tutorial here zu folgen.Wie man Javascript und HTML für die Größenänderung verbindet?
Ich habe drei Dateien im selben Ordner mit index.js und style.css erstellt, indem ich die Demo direkt kopiert und eingefügt habe. Die folgenden sind die index.html, index.js und style.css. Die HTML- und JS-Dateien scheinen nicht in der Lage zu sein, zu interagieren.
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;
}\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>
bitte CSS hinzufügen und js Inhalt auf Ihre Frage mit kompletter der Datei index.html –
Ich habe den Beitrag bearbeitet alle drei Dateien enthalten. – KubiK888
jetzt lass mich wissen, was willst du? Größe oder Größe nur mit Drag & Drop ändern –