Два способа реализации HTML для случайного перетаскивания положения контента

Тест: Chrome V80.0.3987.122 Нормальный

Два способа: перетащите нормальную позицию метки или перетащите положение текстового поля в Canvas

Демо -адрес

CSS -код

 #range {позиция: относительно; Ширина: 600px; Высота: 400px; Маржа: 10px; Фоно-цвета: RGB (133, 246, 250);}. ICON {Положение: Абсолют; высота: 100px; Ширина: 100px; курсор: двигаться; фоновый цвет: #ff9204; Пользовательский селек: нет;}

HTML -код

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

JS -код

 const main = document.getElementById('range');const icon = document.querySelector('.icon');let move = false;let deltaLeft = 0, deltaTop = 0;// The drag start event is to be bound to the moved element icon.addEventListener('mousedown', function (e) { /* * @des deltaLeft that is the unchanged value during the movement*/ deltaleft = e.clientx-e.target.offsetleft; Положение движения относительно родительского элемента*/ let dx = cx - deltaleft let dy = cy - deltatop/ ** предотвратить за пределами диапазона родительских элементов*/ if (dx <0) dx = 0 if (dy <0) dy = 0 if (dx> 500) dx = 500 if (dy> 300) dy = 300 icon.setattrю `Слева: $ {dx} px; top: $ {dy} px`)}}) // Триггер конца перетаскивания должен быть размещен на элементе управления области main.addeventListener ('mouseUp', function (e) {move = false; console.log ('mouseup');})

CSS -код

 .CUS-CANVAS {фон: rgb (50, 204, 243);}. input-eale {display: none; позиция: исправлена; Ширина: 180px; граница: 0; фоновый цвет: #fff;}

HTML -код

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

JS -код

Принцип реализации состоит в том, чтобы записать положение движения мыши и постоянно перерисовать прямоугольную коробку и содержимое текста.

 Пусть mousedown = false; let deltax = 0; let deltay = 0; let Text = 'hello'const canvas = document.getelementbyid (' canvas '); const ctx = canvas.getContext (' 2d '); const cw = canvas.width, ch = canvas.height; const rect = {x: 20, y: 20, width: 150, width: 150, width: 150, width: 150, width: 150, width: 150, width: 150, width: 150, width: 150, width: 150, width: 150, width: Текст и стиль границы*/ctx.font = 16px arial; ctx.fillstyle = #fff; /** Установить как центр, когда центр текстового поля будет находиться в точке x filltext*/ctx.textalign = 'center'; ctx.linewidth = '2'; ctx.strokestyle = '#fff'; rokerect () constemale = document.getelementbyid ('inputele'); inputele.value rokerect () inputeele.setattribute ('style', `display: ne`)}} canvas.ondblclick = function (e) {inputele.setattribute ('style',` слева: $ {e.clientx} px; top: $ {e.clienty} px; show: block`); inputele.focus ();} canvas.onmousedown = function (e) { /** Получить расстояние между левой границей просмотра и левой границей холста плюс длина положения щелчка мыши и левой границей холста. Это значение является неизменным значением во время относительного движения*/ deltax = e.clientx - rect.x; deltay = e.clienty - rect.y; mousedown = true}; const judgew = cw-rect.width, dudgeh = CH-rect.height; canvas.onmouseMove = function (e) {if (mousedown) { / ** Вычитание для получения длины между левой границей прямоугольника и левой границей холда* / let dx = e.clientx-deltax; Пусть dy = e.clienty-deltay; if (dx <0) {dx = 0; } else if (dx> judgew) {dx = judgew; } if (dy <0) {dy = 0; } else if (dy> judgeh) {dy = dudeh; } rect.x = dx; rect.y = dy; Strokerect ()}}; canvas.onmouseup = function (e) {mousedown = false}; /** Очистить указанную область*/function clearRect () {ctx.clearrect (0, 0, cw, ch)}/** Нарисуйте прямоугольники*/function rokerctect () {clearRect ()/** Если BeginPath здесь не называется, rect.yl. rect.height) ctx.stroke (); // Установите содержание шрифта и положение на Canvas ctx.filltext (text, rect.x + 70, rect.y + 30);}

Добро пожаловать, чтобы общаться с GitHub

Это статья о двух способах реализации позиции контента HTML по желанию. Для получения дополнительной связи HTML по желанию, пожалуйста, найдите предыдущие статьи с wulin.com или продолжайте просматривать соответствующие статьи ниже. Я надеюсь, что все будут поддерживать wulin.com в будущем!