JS实现元素拖拽

最新推荐文章于 2023-03-27 08:47:31 发布
最新推荐文章于 2023-03-27 08:47:31 发布
阅读量385 收藏
点赞数
分类专栏： 学习笔记

转载：https://www.cnblogs.com/vali/p/5661718.html

作者的directions方法缺少up、down的处理，这里进行了修复实现上移、下移、左右移动，如果需要上移、下移时其他元素顺序移动，需要继续修改directions方法。

1.该写法是面向对象

1.定义鼠标位置；

2.遍历需要换位的元素，

    01.添加初始化方法，从父元素中取出，设置position：absolute；

    Left top值为父元素的值

   02.添加move方法-->鼠表松开时回到原位->传入回调函数

   02.添加拖拽方法-->鼠标松开时调用move方法，回归原位置

   03.添加碰撞检测方法，根据不同情况direction 返回不同方向值；

   04.交换位置的方法：传入当前拖拽元素 和 方向值作为参数-->this的指向

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="jquery.js"></script>
  <title>拖拽换位</title>
  <style>
    .item_content ul  {
        list-style:none;
    }
    .item_content ul li {
        width:200px;
        height:120px;
        float:left;
        margin:10px
        
    }
    .item_content {
        width:740px;
        height:460px;
        border:1px solid #ccc;
        float:left;
    }
    
    .item_content .item {
        width:200px;
        height:120px;
        line-height:120px;
        text-align:center;
        cursor:pointer;
        background:#ccc;
        
    }
    .item_content .item img {
        width:200px;
        height:120px;
        border-radius:6px;
        
    }
    
  </style>
 </head>
 <body>
   <div class="item_container">
     <div class="item_content">
       <ul>
        <li class="n1">
         <div class="item">
          <img src="images/youku.png" style="background:red" />
         </div>
        </li>

        <li>
         <div class="item">
          <img src="images/jd.png" style="background:blue" />
         </div>
        </li>

        <li>
         <div class="item">
          <img src="images/taobao.png" style="background:yellow" />
         </div>
        </li>

        <li>
         <div class="item">
          <img src="images/fenghuan.png" style="background:black" />
         </div>
        </li>


        <li>
         <div class="item">
          <img src="images/souhu.png" style="background:green" />
         </div>
        </li>


        <li>
         <div class="item">
          <img src="images/wangyi.png" style="background:#ff00ff"  />
         </div>
        </li>


        <li>
         <div class="item">
          <img src="images/renren.png" style="background:#f0f00f"  />
         </div>
        </li>

        <li>
         <div class="item">
          <img src="images/360.png" style="background:#00ffff"  />
         </div>
        </li>

        <li>
         <div class="item">
          <img src="images/360game.png" style="background:#ffff00"  />
         </div>
        </li>
       </ul>
     </div>
   </div>
 <script>
  $(function(){
        function Pointer(x,y){//定义鼠标位置；
        this.x = x;
        this.y = y;
            //console.log(this);//-->Pointer
        }
        function Position(left,top){//定义拖拽位置；
        this.left = left;
        this.top = top;
           // console.log(this);//-->Position
        }
        $('.item_content .item').each(function(i){
            this.init = function(){
                this.box = $(this).parent();
                $(this).attr('index',i).css({
                    position:'absolute',
                    top:this.box.offset().top,
                    left:this.box.offset().left
                }).appendTo('.item_content')
                    this.drag()
            }
            this.move = function(callback){
                $(this).animate({
                    left:this.box.offset().left,
                    top:this.box.offset().top
                },500,function(){
                    if(callback){
                        callback.call(this)//如果存在回调函数，则调用move方法
                    }
                })
            }
            this.collisionCheck = function(){
                var currentItem = this;

                var direction = null;//用来存方向值
                $(this).siblings('.item').each(function(){
                    if(currentItem.pointer.x>this.box.offset().left&&
                        currentItem.pointer.y>this.box.offset().top&&
                            (currentItem.pointer.x<this.box.offset().left+this.box.width() )&&
                            (currentItem.pointer.y<this.box.offset().top+this.box.height())
                    ){
                        if(currentItem.box.offset().top<this.box.offset().top){
                            direction  = 'down';
                            console.log(direction)
                        }else if(currentItem.box.offset().top>this.box.offset().top){
                            direction = 'up';
                            console.log(direction)
                        }else{
                            direction = 'normal';
                            console.log(direction)
                        }
                        this.swap(currentItem,direction);
                    }
                })
            }
            this.swap = function(currentItem,direction){//传入拖拽div和方向值 做变换
				//如果需要顺序移动，修改此方法
                var directions =function() {
                        var saveBox = this.box;//接收框 =  当前框-->this-->碰撞到的兄弟div

                        this.box = currentItem.box;//定义中间变量，交换div
                        currentItem.box = saveBox;
                        this.move();

                        $(this).attr('index',this.box.index());
                        $(currentItem).attr('index',currentItem.box.index())
               }
                
               directions.call(this);//调用当前对象对应的方法
            }
            this.drag  = function(){
                var oldPosition = new Position();
                var oldPointer  = new Pointer();
                var isDrag = false;
                var currentItem = null;
                $(this).mousedown(function(e){
                    e.preventDefault();
                    oldPosition.left = $(this).position().left;
                    oldPosition.top = $(this).position().top;
                    oldPointer.x = e.clientX;
                    oldPointer.y = e.clientY;
                    isDrag = true;
                    currentItem = this;
                })
                $(document).mousemove(function(e){
                    var currentPointer = new Pointer(e.clientX, e.clientY);
                    if(!isDrag) return false;
                    $(currentItem).css({
                        'opacity':'0.8',
                        'z-index':'999'
                    })
                    var left = currentPointer.x - oldPointer.x + oldPosition.left;
                    var top  = currentPointer.y - oldPointer.y + oldPosition.top;
                    $(currentItem).css({
                        left:left,
                         top:top
                    })
                    currentItem.pointer = currentPointer ;//定义鼠标位置
                    //碰撞检测
                    currentItem.collisionCheck();//调用碰撞检测方法

                })
                $(document).mouseup(function(){
                    if(!isDrag) return false;
                    isDrag = false;
                    currentItem.move(function(){//这是传入的回调函数
                        $(this).css({
                            'opacity':'1',
                            'z-index':0
                        })
                    })
                })
            }
            this.init();


        })


  })
 </script>
 </body>
</html>


牟云飞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现拖动元素交换位置
10-23
主要介绍了javascript实现拖动元素交换位置的方法，类似拼图游戏拖拽卡片效果，感兴趣的小伙伴们可以参考一下
js 实现拖动元素到任意位置
m0_67841039的博客
05-18 1127
JS实现拖拽到页面任意位置
js实现元素的拖拽
weixin_45792701的博客
04-12 1182
js小案例：实现元素的拖拽功能 实现拖拽，必须使用到三个事件，并且这三个事件的使用顺序不能颠倒。 onmouseover：鼠标按下事件 onmousemove：鼠标移动事件 onmouseup：鼠标抬起事件 注意点： 元素一点要绝对定位，只有脱离文档流才能移动。 绑定拖拽的元素，移动事件和抬起事件是对document的绑定。 基本思路： 1、点击 *a： 获取当前鼠标坐标（X轴和Y轴） *b: 获取需要拖拽的元素到浏览器的距离（上边距和左边距） *c=a-b：得到鼠标当前在需要拖拽的元素的内部距离
原生JS实现元素拖拽
路克森的博客
01-14 364
效果 可以随意拖拽 并限制边界检查 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> </head> <style> .mask{ wid...
html5 拖拽 父元素,javascript – 如何实现拖放,拖动子元素将拖动整个父元素
weixin_39900045的博客
06-21 626
您可以将ondragstart事件的处理程序设置为false,如下所示： CaptionXAdd Media+function drag(e) {console.log(e);}var images = document.getElementsByTagName('img');for(i = 0 ; i < images.length; i++)images[i].ondrag...
javascript实现dom元素可拖动
10-22
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for ...通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
js实现拖拽元素选择和删除
10-14
主要为大家详细介绍了js实现拖拽元素选择和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生javascript实现拖动元素示例代码
10-25
首先改变被拖动元素的布局属性，接着捕捉鼠标事件，当触发mousedown时，记录下当前鼠标在元素中的相对位置，接着处理mousemove事件
利用JavaScript实现拖拽改变元素大小|angluo-javascript-173722.pdf
10-20
本文主要介绍了JavaScript实现拖拽改变元素大小的原理及具体实例分析，具有很好的参考价值，需要的朋友一起来看下吧
采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序
09-18
采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序
JS实现图片拖拽交换效果
12-09
JS实现图片拖拽交换效果，供大家参考，具体内容如下 听 WEB前端javascript企业实战班 公开课，用JS实现了图片拖拽交换的目的；感谢老师的讲解。 实现要点 鼠标点击onmousedown：获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元素容器的位置(offsetLeft,offsetTop)； 鼠标移动onmousemove: 获取鼠标在页面上可视区域的位置(clientX, clientY),并实时改变目标元素位置；进行碰撞检测，同时计算被碰撞元素与目标元素中心点距离，将距离最小的定位交换元素； 鼠标释放onmouseup:
js拖拽换位
04-03
支持JS拖动div并且可以与其他的div交换位置，代码非常简单，如有不足，请继续补充
父元素中拖动子元素实现
害怕的博客
01-17 2156
结果 过程 鼠标点下事件的event为鼠标相对于浏览器窗口的位置信息 子元素要在父元素范围内拖动，那就有一个允许拖动的范围，子元素本身有宽高，这也是拖动范围计算要考虑的 首先获取mousedown的点相对于子元素边界的距离 上面计算得到的距离也作为子元素边界到容器边界的距离极值 mouseBounds得到的结果为鼠标相对于浏览器可以移动的范围 因父元素相对于浏览器窗口还有一个相对的距离，为上面...
纯js实现左右拖动父元素，可以滚动子元素，有惯性效果，复制代码即可使用，拿来即用
mengzhanfei1的博客
12-29 942
纯js实现左右拖动父元素滚动子元素，有惯性效果。复制代码即可使用。拿来即用。
js实现拖拽功能
m0_64415782的博客
09-05 774
js实现拖拽功能
如何用原生 JS 实现拖拽效果
程序员成长指北
03-27 648
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言: 关于“拖拽”，其实是一个老生常谈的需求了，并且还是一个非常经典的面试题。之前在项目中拖拽的场景都是直接使用轮子，虽然很快就能完成设计需求，但是这个的原理一直都是我十分想去深入了解的一部分。正好在今天的项目中再一次碰到了这个需求，我觉得是时候去探索一下它了。tips: 本文不会使用 Drag...
js实现页面元素的拖拽
zongmaomx的博客
06-22 3014
平时在我们页面上，经常会悬浮着一些功能按钮，如帮助，联系客服等，按钮的显示比较简单，用定位悬浮在自己需要的位置上就行，比如下面的页面上我们展示一个帮助的按钮，用户点击后可以展示一些帮助的信息： 代码： 但是这样定位一般是固定在这个位置，如果这时候刚好【帮助按钮】挡住了这个位置原本有的其他操作按钮，那么我们就需要能够把【帮助按钮】拖开，不影响原本页面上的操作。一般实现拖动的思路是：在【帮助按钮】上鼠标按下时，记录下当前的坐标，以及原本相对于父元素的位置，然后监听【帮助按钮】的鼠标移动事件【onmousem
一文教你如何用JS代码来操作元素拖拽移动的效果
SuBaijiu的博客
11-12 3384
一文教你如何用JS代码来操作元素拖拽移动的效果
javascript拖拽元素互换位置，实现代码
最新发布
06-13
以下是一个简单的 JavaScript 拖拽元素互换位置的实现代码，你可以根据自己的需要进行修改： HTML 部分： ```html 拖拽元素1 拖拽元素2 拖拽元素3 ``` CSS 部分： ```css .drag-container { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值