jQuery实现面板拖拽

最新推荐文章于 2024-04-25 14:39:56 发布

咳咳咳咳咳咳咳4444

最新推荐文章于 2024-04-25 14:39:56 发布

阅读量927

点赞数

分类专栏：黑历史18-19

本文链接：https://blog.csdn.net/lincoco49/article/details/90247506

版权

一.实现功能

1.首先页面有一个面板或者对话框，有长和宽，可以设置为一个div。

2.当把鼠标over到div的某个位置时，鼠标的箭头图片变为一个拖拽的图片。

3.接2，按下鼠标后，随着鼠标的移动，面板跟着移动。

4.接3，鼠标up后，面板不再跟随鼠标移动。

二.HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="body">
        <div class="title">标题</div>
        <div class="content"></div>
    </div>
</body>
</html>

二.CSS代码

.body{
    width:400px;
    height:300px;
    border:1px solid black;
    position:absolute;
}
.title{
    background-color:blue;
    color:white;
    height:30px;
}

简易的效果图如下：

最低0.47元/天解锁文章

咳咳咳咳咳咳咳4444

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现面板拖拽

一.实现功能1.首先页面有一个面板或者对话框，有长和宽，可以设置为一个div。2.当把鼠标over到div的某个位置时，鼠标的箭头图片变为一个拖拽的图片。3.接2，按下鼠标后，随着鼠标的移动，面板跟着移动。4.接3，鼠标up后，面板不再跟随鼠标移动。二.HTML代码<!DOCTYPE html><html lang="en"><head&...
复制链接

扫一扫