div添加边框拖拽功能
时间: 2024-03-16 14:37:01 浏览: 23
可以使用jQuery或JavaScript实现div添加边框拖拽功能。以下是两种实现方法:
1. 使用jQuery实现可拖动div边框改变大小的方法:
可以使用jQuery UI库中的resizable方法来实现可拖动div边框改变大小的效果。具体实现方法可以参考以下代码:
```
$(function() {
$( "#div1" ).resizable();
});
```
其中,#div1是需要添加拖拽功能的div的id。
2. 使用JavaScript实现简单div拖拽功能的方法:
可以使用JavaScript的鼠标事件来实现简单的div拖拽功能。具体实现方法可以参考以下代码:
```
var div = document.getElementById('div1');
var dragging = false;
var x, y;
div.addEventListener('mousedown', function(e) {
dragging = true;
x = e.clientX - div.offsetLeft;
y = e.clientY - div.offsetTop;
});
document.addEventListener('mousemove', function(e) {
if (dragging) {
div.style.left = e.clientX - x + 'px';
div.style.top = e.clientY - y + 'px';
}
});
document.addEventListener('mouseup', function() {
dragging = false;
});
```
其中,#div1是需要添加拖拽功能的div的id。
相关推荐
![](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)
![](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)