请用js 帮我写一个低代码拖拽输入框
时间: 2023-08-28 19:23:56 浏览: 56
好的,以下是一个简单的低代码拖拽输入框的实现,使用了HTML、CSS和JavaScript:
HTML代码:
```html
<div class="input-container">
<div class="input-label">输入框</div>
<div class="input-box" id="input-box" contenteditable="true"></div>
</div>
<div class="drag-handle" id="drag-handle"></div>
```
CSS代码:
```css
.input-container {
position: relative;
width: 300px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
}
.input-label {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.input-box {
width: 100%;
height: 60px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
overflow: auto;
}
.drag-handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background-color: #ddd;
cursor: move;
}
```
JavaScript代码:
```javascript
const inputContainer = document.querySelector('.input-container');
const dragHandle = document.querySelector('.drag-handle');
let isDragging = false;
dragHandle.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
function startDrag(e) {
isDragging = true;
}
function drag(e) {
if (isDragging) {
inputContainer.style.left = e.pageX - inputContainer.offsetWidth / 2 + 'px';
inputContainer.style.top = e.pageY - inputContainer.offsetHeight / 2 + 'px';
}
}
function endDrag(e) {
isDragging = false;
}
```
这段代码实现了一个拖拽输入框的功能,包括输入框本身和一个可拖拽的手柄。当用户按下手柄并移动鼠标时,输入框会跟随鼠标移动。用户释放鼠标后,输入框会停在当前位置。输入框本身是一个可编辑的div元素,可以用来输入文本。