Deux façons d'implémenter HTML pour faire glisser au hasard la position de contenu

Test: Chrome V80.0.3987.122 Normal

Deux façons sont les suivantes: Faites glisser la position d'étiquette normale ou faites glisser la position de la zone de texte dans Canvas

Adresse de démonstration

Code CSS

 #Range {position: relative; Largeur: 600px; hauteur: 400px; marge: 10px; Color d'arrière-plan: RGB (133, 246, 250);}. Icon {position: Absolute; hauteur: 100px; Largeur: 100px; curseur: déplacer; Color d'arrière-plan: # FF9204; utilisateur-sélection: aucun;}

code html

 <div id = range> <div class = icon> 100 * 100 </div> </div>

Code JS

 const main = document.getElementById ('gamme'); const icon = document.QuerySelect deltaleft = e.clientx-e.target.offsetLeft; du mouvement par rapport à l'élément parent * / let dx = cx - deltaleft let dy = cy - deltaTop / ** empêcher au-delà de la plage d'éléments parents * / if (dx <0) dx = 0 if (dy <0) dy = 0 if (dx> 500) dx = 500 if (dy> 300) dy = 300 icon.settribute ('style',, if (dy> 300) dy = 300 icon.settribute ('style',,, if (dy> 300) dy = 300 icon.setAttribute ('Style',,, if (dy> 300) `Left: $ {dx} px; top: $ {dy} px`)}}) // Le déclencheur de glisser doit être placé sur l'élément de contrôle de zone main.addeventListener ('mouseup', function (e) {move = false; Console.log ('MouseUp');})

Code CSS

 .cus-canvas {background: rgb (50, 204, 243);}. input-ele {affiche: aucun; Position: fixe; Largeur: 180px; bordure: 0; Color d'arrière-plan: #fff;}

code html

 <div> <canvas id = canvas class = cus-canvas width = 800 height = 600> </ canvas> <input id = inputtele class = input-ele /> </div>

Code JS

Le principe de mise en œuvre est d'enregistrer la position du mouvement de la souris et de redessiner constamment la boîte rectangulaire et le contenu texte.

 Selt Mousedown = false; Soit deltax = 0; Soit deltay = 0; let text = 'hello'const canvas = document.getElementyid (' canvas '); const ctx = canvas.getContext (' 2d '); const cw = canvas.width, ch = canvas.Height; const Rect = {x: 20, y: 20, largement: 150, 50} Style de texte et de bordure * / ctx.font = 16px arial; ctx.fillStyle = #fff; / ** Définir le centre lorsque le centre du champ de texte sera au point x point de filltex inputEle.Value Strokect () inputEle.SetAttribute ('style', `affichage: non ')}} canvas.ondbLclick = function (e) {inputEle.SetAttribute (' style ',` Left: $ {e.clientx} px; top: $ {e.clienty} px; affichage: block`); inputEle.focus ();} canvas.onmousedown = fonction (e) {/ ** Obtenez la distance entre la limite gauche de la fenêtre et la limite gauche de la toile plus la longueur de la position de clic de la souris et la limite gauche du toile. Cette valeur est la valeur inchangée pendant le mouvement relatif * / deltax = e.clientx - rect.x; deltay = e.clienty - rect.y; Mousedown = true}; const jugew = cw-rect.width, jugeh = ch-rect.height; canvas.onmoumove = function (e) {if (mousdown) {/ ** soustraction pour obtenir la longueur entre la limite gauche du rectangle et la limite gauche de la canevas * / let dx = e.clientx-deltax; Soit Dy = E.Clienty-Deltay; if (dx <0) {dx = 0; } else if (dx> jugew) {dx = jugew; } if (dy <0) {dy = 0; } else if (dy> jugeh) {dy = jugeh; } rect.x = dx; rect.y = dy; starekect ()}}; canvas.onMouseUp = function (e) {Mousedown = false}; / ** effacer la zone spécifiée * / function clearRect () {ctx.clearrect (0, 0, cw, ch)} / ** dessiner rectangles * / function starect () {ClearRect () / ** Si Beginpath n'est pas appelé ici rect.width, rect.height) ctx.stroke (); // Définissez le contenu de la police et la position sur le canevas ctx.fillText (texte, rect.x + 70, rect.y + 30);}

Bienvenue pour communiquer avec github

Il s'agit de l'article sur deux façons d'implémenter la position de contenu de HTML à volonté. Pour un HTML plus lié à Will, veuillez rechercher des articles précédents sur Wulin.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que tout le monde soutiendra Wulin.com à l'avenir!