每条表白内容创建便利贴样式容器,并且容器可以按住拖动
时间: 2024-04-16 17:29:58 浏览: 18
要实现每条表白内容创建便利贴样式容器,并且容器可以按住拖动,你可以使用HTML、CSS和JavaScript来完成。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>表白墙</title>
<style>
.note {
position: absolute;
width: 200px;
height: 200px;
background-color: yellow;
border: 1px solid black;
padding: 10px;
cursor: move;
}
</style>
</head>
<body>
<h1>表白墙</h1>
<!-- 输入框和提交按钮 -->
<input type="text" id="content" placeholder="请输入你的表白内容">
<button onclick="addMessage()">提交</button>
<!-- 表白消息列表 -->
<div id="message-list"></div>
<script>
var dragItem = null;
function addMessage() {
// 获取输入框中的内容
var content = document.getElementById("content").value;
// 判断内容是否为空
if (content.trim() === "") {
alert("请输入内容");
return;
}
// 创建新的表白项容器
var note = document.createElement("div");
note.className = "note";
note.innerHTML = content;
// 添加拖动事件处理程序
note.addEventListener("mousedown", startDrag);
// 将新的表白项容器添加到列表中
var messageList = document.getElementById("message-list");
messageList.appendChild(note);
// 清空输入框
document.getElementById("content").value = "";
}
function startDrag(e) {
dragItem = this;
dragItem.style.zIndex = "1";
// 计算鼠标在容器内的偏移量
var offsetX = e.clientX - dragItem.offsetLeft;
var offsetY = e.clientY - dragItem.offsetTop;
// 添加事件处理程序
document.addEventListener("mousemove", drag);
document.addEventListener("mouseup", stopDrag);
// 更新容器位置
function drag(e) {
dragItem.style.left = e.clientX - offsetX + "px";
dragItem.style.top = e.clientY - offsetY + "px";
}
// 移除事件处理程序
function stopDrag() {
dragItem.style.zIndex = "0";
document.removeEventListener("mousemove", drag);
document.removeEventListener("mouseup", stopDrag);
dragItem = null;
}
}
</script>
</body>
</html>
```
在这个示例中,每次提交新的表白内容时,会创建一个带有便利贴样式的容器,并将内容添加到容器中。每个容器都可以按住拖动来改变位置。通过`mousedown`事件触发的`startDrag`函数来启动拖动操作,并通过`mousemove`事件和`mouseup`事件来更新容器的位置和结束拖动操作。
你可以将以上代码保存为一个HTML文件,并在浏览器中打开,即可看到带有可拖动便利贴样式容器的表白墙页面。你可以根据需要调整容器的样式和布局。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)