JQuery 拖拽Div - 江南听雨 - ITeye博客

`

zengshaotao

浏览: 787531 次
性别:
来自: 上海

最近访客更多访客>>

njdccy

AK1343794853

chehaoj

jstl1point0

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

zengshaotao： jstl1point0 写道很好啊，如果有带Session会话 ...
Nginx+Tomcat搭建高性能负载均衡集群
jstl1point0：很好啊，如果有带Session会话的怎么搞呢
Nginx+Tomcat搭建高性能负载均衡集群

JQuery 拖拽Div

博客分类：

JQuery

阅读更多

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery 模块拖动，拖动层效果</title>
<style type="text/css">
#div2
{
    position:absolute;
    width:400px;
    height:300px;
    border:1px solid #333333;
    background-color:#777788;
    text-align:center;
    line-height:400%;
    font-size:13px;
    left:80px;
    top:20px;
}
</style>
<script type="text/javascript" language="javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" language="javascript">
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(document).ready(function(){
    $("#div2").click(function(){
        //alert("click");//点击（松开后触发）
        }).mousedown(function(e){
        _move=true;
        _x=e.pageX-parseInt($("#div2").css("left"));
        _y=e.pageY-parseInt($("#div2").css("top"));
        $("#div2").fadeTo(20, 0.25);//点击后开始拖动并透明显示
    });
    $(document).mousemove(function(e){
        if(_move){
            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
            var y=e.pageY-_y;
            $("#div2").css({top:y,left:x});//控件新位置
        }
    }).mouseup(function(){
    _move=false;
    $("#div2").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
</script>
</head>
<body>
    <div id="div2">支持拖拽</div>

分享到：

JQuery json | Struts2学习笔记

2012-11-17 10:54
浏览 947
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

jQuery拖动div元素标签: 本教程将深入探讨如何利用jQuery UI库中的Draggable功能来实现div元素的拖动，以及如何通过append方法动态添加元素。首先，我们需要了解jQuery UI库的基本用法。 **jQuery UI Draggable组件** jQuery UI的Draggable...

jquery div拖动排序效果代码.zip: 本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果，结合CSS样式，创建出一款从左到右慢慢展开且可自由拖动排序的特效。首先，我们需要在HTML中设置好基础结构。创建一系列的div元素，每个div代表一个...

JQuery拖拽DIV: 本篇文章将深入讲解如何利用JQuery实现DIV元素的拖拽功能。首先，确保在项目中引入了JQuery库。你可以通过CDN链接或者本地引入的方式添加JQuery到HTML文件中。例如： ```html <script src="https://code.jquery....

Jquery Sortable实现div拖动排序效果: 本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。首先，你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库，而 jQuery UI 提供了包括Sortable在内的多种...

jquery 拖拽div: 这样，我们就实现了一个基本的jQuery拖拽功能。然而，为了提高用户体验，还可以添加一些额外的功能，例如限制div的拖动范围、防止穿透其他元素（z-index）以及处理边界反弹等。在实际项目中，可能还会涉及到性能...

jquery 拖动div层: 对于“jQuery 拖动div层”这一主题，我们将深入探讨如何使用jQuery实现一个可拖动的div元素，使其在网页上可以被用户轻松移动。首先，我们需要理解HTML中的`div`元素。`div`（division）是用于创建页面布局的基本...

jQuery拖动DIV滑块代码.zip: jQuery拖动DIV滑块代码基于jquery-1.9.1.min.js制作，包括只能水平拖动；只能垂直拖动；自由拖动，初始位置固定；自动拖动，初始位置随机；自动拖动，初始位置随机，hander拖动等多种拖动效果。

jquery拖拽排序插件div自由拖动排序代码: 在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中，我们主要讨论的是如何利用jQuery实现一个功能，让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用，比如...

可拖动div边框改变大小的方法: 可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。

Jquery拖拽Div层排序8中拖拽效果: 《jQuery实现Div层排序的八种拖拽效果详解》在网页开发中，动态交互功能是提升用户体验的重要手段，而Div层的拖拽排序就是其中之一。jQuery作为一个强大的JavaScript库，提供了丰富的API和插件，使得实现Div拖拽...

jQuery可拖拽DIV页面: 本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI，实现了一个用户界面元素（如div）可以被拖动的功能，从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解： 1. **jQuery基础**：jQuery...

jQuery鼠标上下拖动div排序代码: 《jQuery实现鼠标拖动div排序技术详解》在网页开发中，用户交互体验是至关重要的。其中，元素的可拖动排序功能可以让用户更加直观地调整界面布局，提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下...

jQuery拖动Div布局点击最大化弹出层等: jQuery拖拽布局插件，我觉得挺实用，jQuery拖动Div布局点击最大化弹出层等。拖动演示网页中的各个模块，可以自动变化位置，上边的按钮可以弹出一个浮动层，每一个Div模块可以最大化或最小化。运行环境：...

jQueryUI拖拽效果_拖拽div的值到table表格里面: 在本文中，我们将深入探讨如何使用jQuery UI库实现一个功能，即允许用户将div元素的值拖拽到HTML表格中。这个功能对于构建交互式、动态的网页界面非常有用，可以提升用户体验，使得数据操作更加直观和便捷。我们将...

jquery 拖拽动态添加div 保存拖拽后的效果: 综上所述，实现“jquery拖拽动态添加div并保存拖拽后的效果”涉及的主要知识点包括：jQuery和jQuery UI的使用，特别是Draggable插件；动态创建和添加HTML元素；拖放事件监听与处理；以及前端与后端的数据交互（Ajax...

jQuery拖拽div实现思路: 本文将详细介绍如何使用jQuery实现div元素的拖拽功能，主要涉及`mousedown`、`mousemove`和`mouseup`这三个事件。首先，我们需要理解这些事件的作用： 1. `mousedown`：当鼠标按钮被按下时触发，通常用于开始一个...

Jquery实现拖动Div排序效果演示代码下载: <title>jQuery拖动Div排序 <script src="https://code.jquery.com/jquery-3.x.y.min.js"></script> <script src="https://code.jquery.com/ui/1.x.y/jquery-ui.min.js"></script> ...

jquery拖动编辑div: 在本文中，我们将深入探讨如何使用jQuery实现一个可拖动且可编辑的div元素，包括关闭功能和颜色变换。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得创建交互式Web应用变得更为简单。 ...

JQuery可拖拽的DIV排序: 通过鼠标拖动来改变div的顺序，来实现指标的排序。使用了Jquery,jquery-ui.js,sortable,自己原创，效果很绚。配合ThinkPHP可以实现把数据入库，由于使用的是ubuntu, 文件编码格式都是utf-8.

Global site tag (gtag.js) - Google Analytics