DIV 拖拽

最新推荐文章于 2023-11-30 08:39:27 发布
最新推荐文章于 2023-11-30 08:39:27 发布
阅读量272 收藏
点赞数 1
分类专栏： jquery学习 文章标签： 转载 jquery div

jquery DIV 拖拽

标签 ： jquery

代码详解

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery Div自由拖动排序</title>
<style type="text/css">
.SortItem {

    width: 500px;/*有用到：决定一行放几个该模块*/
    background-color: #0078ca;
    position: absolute;
    cursor: pointer;
    text-align: center;
    color: #fff;
    font: 35px "微软雅黑", Arial, Helvetica, sans-serif;
}
#SortContaint {

    width: 1000px;/*有用到：决定一行放几个子模块*/
    left: 130px;
}

</style>
</head>
<body>
<div id="SortContaint">
  <div class="SortItem"></div>
  <div class="SortItem"></div>
  <div class="SortItem"></div>
  <div class="SortItem"></div>
  <div class="SortItem"></div>
  <div class="SortItem"></div>
  <div class="SortItem"></div>
  <div class="SortItem"></div>
  <div class="SortItem"></div>
</div>


</body>
<script type="text/javascript" src="http://www.pengyaou.com/jquery-1.4.min.js">
    </script>
<script type="text/javascript">
        $(document).ready(function(e) {
            SortDivHandler.Initialize();
            if (typeof(document.onselectstart) != "undefined") {
                // IE下禁止元素被选取       
                document.onselectstart = new Function("return false");
            } else {
                // firefox下禁止元素被选取的变通办法       
                document.onmousedown = new Function("return false");
                document.onmouseup = new Function("return true");
            }
        });

        var xx = $('#SortContaint').offset().left;
        var yy = $('#SortContaint').offset().top;
        var ww = $('.SortItem').width();
        alert(xx+"*"+yy+"*"+ww);

        var SortDivHandler = {
            CurrentLocationX: 0,
            CurrentLocationY: 0,
            CurrentSortFlag: 0,
            CurrentSortDiv: null,
            CurrentSortMove: 0,
            Initialize: function() {
                var isStart = false;
                var sortItemCount = parseInt(($("#SortContaint").width()) / ww);
                //表示一行可以放的总个数即列数
                alert(sortItemCount);
                for (var i = 0; i < $(".SortItem").length; i++) {
                    var floorCount = Math.ceil((i + 1) / sortItemCount);//（商）向上取整
                    //表示第i个模块存在于第几行
                    $($(".SortItem")[i]).attr("id", i);
                    $($(".SortItem")[i]).html(i + 1);
                    if ((i + 1) <= sortItemCount) {
                        //判断第i个模块是否小于列数
                        $($(".SortItem")[i]).animate({
                            left: xx+i * ww + (i - 1) * 30 + "px",
                            //xx:父DIV原点;
                            //i * ww: 第i个模块的width;
                            //(i - 1) * 30: i=0时,-30px;i=1时,0px;i=2时,30px;
                            top: yy+"px"
                            //yy:父DIV原点;
                        }, ww + i * 100);//?????????????????????????????????????????????????????????????????????
                    } else if ((i + 1) > sortItemCount) {
                        var itemIndex = (i) % sortItemCount;
                        //表示该行的第几列
                        $($(".SortItem")[i]).animate({
                            left: xx + itemIndex * ww + (itemIndex - 1) * 30 + "px",
                            //对应于上文left: xx+i * ww + (i - 1) * 30 + "px",
                            top:  yy + (floorCount - 1) * 120
                            //(floorCount - 1)：第几行
                            //120：表示上一行的顶点到这一行的顶点之间的距离（包含模块的高度与模块间的间隔）
                            //30 * (floorCount - 1)：表示没什么鸟用，只要上一行注释的值给的足就行
                        }, ww + i * 100);//?????????????????????????????????????????????????????????????????????
                    }
                }
                var isDrag = true;
                $(".SortItem").mousedown(function(e) {
                    var SortTarget = $(this);
                    SortDivHandler.CurrentSortMove = 0;
                    SortDivHandler.CurrentSortDiv = $(this);
                    isDrag = true;
                    $(".SortItem").css("z-index", 1);
                    SortDivHandler.CurrentSortDiv.css("z-index", -1).css("opacity", 0.8);
                    SortDivHandler.CurrentLocationX = SortTarget.offset().left;
                    SortDivHandler.CurrentLocationY = SortTarget.offset().top;
                    SortTarget.attr("drag", 1);
                    SortTarget.css("position", "absolute");
                    SortTarget.css("cursor", "default");
                    var currentTarget = SortTarget;
                    var currentDisX = e.pageX - $(this).offset().left;
                    var currentDisY = e.pageY - $(this).offset().top;
                    $(document).mousemove(function(event) {
                        if ($(currentTarget).attr("drag") == 0 || SortDivHandler.CurrentSortMove == 1) return;
                        var currentX = event.clientX;
                        var currentY = event.clientY;
                        var cursorX = event.pageX - currentDisX; // $(this).offset().left;  
                        var cursorY = event.pageY - currentDisY; //-$(this).offset().top; 
                        // $(currentTarget)
                        $(currentTarget).css("top", cursorY - 8 + "px").css("left", cursorX - 30 + "px");
                        isStart = true;

                    });
                    $(document).mouseup(function() {
                        //  if(isDrag==false)return;
                        $(currentTarget).attr("drag", 0);

                    });
                });
                $(".SortItem").mousemove(function() {
                    if (isStart == false) return;
                    if (SortDivHandler.CurrentSortFlag == 0) {
                        if ($(this).attr("id") == SortDivHandler.CurrentSortDiv.attr("id")) {
                            return;
                        } else {
                            if (SortDivHandler.CurrentSortMove == 1) return;
                            SortDivHandler.CurrentSortMove = 1;
                            var targetX = $(this).offset().left;
                            var targetY = $(this).offset().top;
                            SortDivHandler.CurrentSortDiv.stop(true).animate({
                                left: targetX  + "px",
                                top: targetY  + "px"
                            }, 500, function() {
                                $(this).css("opacity", 1);
                            });
                            $(this).stop(true).animate({
                                left: SortDivHandler.CurrentLocationX + "px",
                                top: SortDivHandler.CurrentLocationY + "px"
                            }, 300, function() {});
                            isDrag = false;
                        }
                    }
                });
                $(".SortItem").mouseup(function() {
                    if (isDrag == false) return;
                    SortDivHandler.CurrentSortMove = 1;
                    SortDivHandler.CurrentSortDiv.stop(true).animate({
                        left: SortDivHandler.CurrentLocationX + "px",
                        top: SortDivHandler.CurrentLocationY + "px"
                    }, 500, function() {
                        SortDivHandler.CurrentSortDiv.css("z-index", -1).css("opacity", 1);
                    });
                });


            }
        }
    </script>
</html>
蛋上有痣
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现div拖拽互换位置
01-19
本文实例为大家分享了vue实现div拖拽互换位置的具体代码，供大家参考，具体内容如下 template模板 <transition tag=div class=container> <div class=item v-for=(item,index) in items :key=item.key :style=...
实现div的拖拽
weixin_50337713的博客
03-30 7506
拖拽：在div上按下鼠标，移动鼠标，移动过程中让div跟随鼠标移动 分析： 给div绑定鼠标按下事件 - 在按下的事件中继续绑定移动事件 div移动：设置left和top - 给div设置定位 left 和 top 的值是多少？ 获取鼠标的位置 ，就是 left 和 top left 和 top =鼠标在浏览器中位置 减去 一开始鼠标是div上的位置 <style> .box{ width: 100px; height: 100px;
实现div拖拽的几种方式
Hiqingtian的博客
03-23 9803
&lt;%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuery拖放&lt;/title&gt; &lt;scri
简单实现可拖拽的div
sunxiaobai1的博客
11-22 2523
【代码】简单实现可拖拽的div。
从基础到进阶：实现div控件的拖拽和缩放功能
Twinkle_sone的博客
11-30 2009
如果你正在寻找一个详细的教程，从基础到进阶地学习如何实现具备拖拽和缩放特性的div控件，那么本文将是你需要的！我们将从HTML、CSS和JavaScript的基本知识入手，深入讨论拖拽和缩放的核心概念，然后逐步教你如何利用这些技术实现一个强大的div控件。无论你是初学者还是有经验的开发者，都能够从本文中获得有益的指引和实用的技巧。
拖拽div移动的两种方法
qq_43155489的博客
08-27 3786
jQuery UI - 拖动（Draggable） 在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body...
DIV拖拽小程序
09-01
在页面上实现自由拖动DIV的小程序；鼠标点击后选中DIV并开始拖动，拖动过程中透明显示，移动时根据鼠标位置计算控件左上角的绝对位置，松开鼠标后停止移动并恢复成不透明
Jquery Sortable实现div拖动排序效果
10-27
Jquery Sortable实现div拖动排序效果 Jquery Sortable实现div拖动排序效果
div拖动
10-26
div拖动
可拖动DIV层的实现方法
热门推荐
2byte
06-15 1万+
可拖动DIV层的实现方法这几天做了一个英文单词搜索的谷歌扩展，其中的划词搜索功能会产生一个可托拖动的DIV层来作为结果显示，为了做一个较为完善的拖动层，花费了很长时间进行设计与调试。在此把心得总结了一下，讲讲实现方法与关键点。先来看看效果：在线实例DEMO基本思路 有一个DIV层，设定position属性为absolute或fixed，通过更改其left，top来更改层的相对位置。 在DIV层上绑定
div拖拽功能实现
maise6666的博客
06-21 1468
div拖拽移动
div 拖拽布局
black-rat的博客
05-31 2904
许多时候，我们需要用户可以调整网页中div的大小，当用户增大一个div的宽度时，需要同时减小临近div的宽度，以防止网页宽度发生变化。这里，我们使用了jQuery UI来帮助我们实现。因此我们需要引入jQuery和jQuery UI。[html] view plain copy&lt;script src="js/jquery-3.1.1.min.js"&gt;&lt;/script&gt;  &...
DIV的拖拽--script
不混了的专栏
05-10 529
 var Class = {//创建类create: function () {return function () {this.initialize.apply(this, arguments);};}};var $A = function (a) {//转换数组return a ? Array.apply(null, a) : new Array;};var $ = function
div的拖拽
yangpengze的博客
12-25 808
vue2写的拖拽功能 仅适用于初学者
div拖拽
qq_44544363的博客
06-10 1960
div拖拽 …………………………………………………………………………………………………………… 开发工具与关键技术：Adobe Dreamweaver CC 2017 作者：林敏静 撰写时间：2019年6月2日 …………………………………………………………………………………………………………… 最近呢在DN上学习到了一个新的知识——div拖拽，如下图，在页面上把div水平拖拽离开原来的位置，这个究...
div上下拖拽（resize）
渐变强的小刘
04-21 2743
实现拖拽的方式有很多种，css实现可能不是最好的实现方式，仅供参考。 话不多说，先上图 需求介绍：主要实现的是 中间区域（红框）内可以托住上下拖动. 功能实现所需： resize: css3新增属性，放在div上即可使其可以拖拽，详见:resize介绍文档(https://www.w3school.com.cn/cssref/pr_resize.asp) cursor:ns-resize，上下拖拽鼠标图标.详见：[cursor属性](https://developer.mozilla.org/zh.
div拖拽左右移动
qq_42221321的博客
07-30 1637
clientWidth =width+左右padding offsetWidth=width+左右padding+左右border srollWidth:指定标签内容曾的真实宽度,包含可视区域和被隐藏区域 offsetLeft：当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离 原生JS案例（面向对象）——按住鼠标实现左右拖动列表 JS中的位置和宽度：clientWidth、of
div 拖动 改变位置
最新发布
12-20
这通常通过在div元素上添加拖动事件处理程序来实现。当用户点击div元素并移动鼠标时，div元素会跟随鼠标一起移动，直到用户释放鼠标。 实现div拖动的关键是监听鼠标事件，并根据鼠标的位置来改变div元素的位置。当...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值