jquery经典实例之拖动面板

ゝ一世哀愁。 2021-07-24 18:55 386阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="GBK">
        <title></title>
    </head>
    <body>
        <div style="position: absolute;border: 1px solid yellow;width: 500px;">
            <div id="title" style="background-color:powderblue;height: 30px;">
                <strong>标题</strong>
            </div>
            <div style="height: 300px;">
                内容
            </div>
        </div>
        <script src="jquery-1.5.1.js"></script>
    <script>
        $(function () {
            $('#title').mouseover(function () {
                $(this).css('cursor','move');
            }).mousedown(function (e) {
                var _event = e || widows.event;
                var ord_x = _event.clientX;
                var ord_y = _event.clientY;
                
                var parent_left = $(this).parent().offset().left;
               	var parent_top = $(this).parent().offset().top;
    
                $(this).bind('mousemove',function (e) {
                    var _new_event = e || window.event;
                    var new_x = _new_event.clientX;
                    var new_y = _new_event.clientY;
                    
                    var x = parent_left + (new_x - ord_x);
                    var y = parent_top + (new_y - ord_y);
    
                    $(this).parent().css('left',x+'px');
                    $(this).parent().css('top',y+'px');
                })
            }).mouseup(function () {
                $(this).unbind('mousemove');
            });
        })
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，386人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 实例 - 拖动（Draggable）

允许使用鼠标移动元素。如需了解更多有关 draggable 交互的细节，请查看 API 文档 [可拖拽小部件（Draggable Widget）][Draggable Wi

末蓝、/ 2024年03月24日 16:05/ 0 赞/ 75 阅读

相关 Html之实例练习（轮播图片、放大镜效果、面板拖动）

文章目录一、轮播图片二、放大镜效果三、面板拖动本篇将简单演示一下HTM

朴灿烈づ我的快乐病毒、/ 2023年02月10日 03:47/ 0 赞/ 10 阅读

相关鼠标拖动面板

之前写过一篇关于form表单验证随笔，后来添加了一点点内容，使得可以使用鼠标将其拖动，为了完整性，还是写一遍随笔吧；加上这部分内容后，HTML和CSS部分，也进行了少量修改，这

女爷i/ 2022年06月16日 08:28/ 0 赞/ 255 阅读

相关 jquery经典实例之回到顶部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK">

野性酷女/ 2021年07月25日 02:36/ 0 赞/ 450 阅读

相关 jquery经典实例之放大镜

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Ty

逃离我推掉我的手/ 2021年07月24日 19:27/ 0 赞/ 476 阅读

相关 jquery经典实例之拖动面板

<!DOCTYPE html> <html> <head lang="en"> <meta charset="GBK">

ゝ一世哀愁。/ 2021年07月24日 18:55/ 0 赞/ 387 阅读

相关 jquery经典实例之图片轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK">

太过爱你忘了你带给我的痛/ 2021年07月24日 18:31/ 0 赞/ 400 阅读

相关 jquery经典实例之显示隐藏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="gbk">

Love The Way You Lie/ 2021年07月24日 18:13/ 0 赞/ 453 阅读

相关 jquery经典实例之左侧菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK">

￡神魔★判官ぃ/ 2021年07月24日 16:11/ 0 赞/ 428 阅读

相关 jquery经典实例之选项卡

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

快来打我*/ 2021年07月24日 15:57/ 0 赞/ 432 阅读