实现div拖拽的几种方式

其他 2018-05-17 18:21:17 阅读次数: 2 
<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="utf-8">
<title>jQuery拖放</title>
<script type="text/javascript" src="../../../commons/js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
    $(document).mousemove(function(e) {
    	console.log("mousemove");
        if (!!this.move) {
    	console.log("mousemove1");
            var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
                callback = document.call_down || function() {
            		console.log("拖拽后");
            		console.log(e.pageX);
            		console.log(e.pageY);
            		console.log(e.pageX - posix.x);
            		console.log(e.pageY - posix.y);
                    $(this.move_target).css({
                        'top': e.pageY - posix.y,
                        'left': e.pageX - posix.x
                    });
                };
            callback.call(this, e, posix);
        }
    }).mouseup(function(e) {
    	console.log("mouseup");
        if (!!this.move) {
            var callback = document.call_up || function(){};
            callback.call(this, e);
            console.log("mouseup2");
            $.extend(this, {
                'move': false,
                'move_target': null,
                'call_down': false,
                'call_up': false
            });
        }
    });
    var $BIPanel = $('.BIPanel .main_tabletop').mousedown(function(e) {
    	console.log("mousedown");
        var $p = $(this).parent();
        console.log($p);
        var w = $p.width();
        var h = $p.height();
        var $pp = $p[0];
        console.log($pp);
        var offset = $p.offset();
        console.log(e.pageX);
        console.log(e.pageY);
        console.log(offset.left);
        console.log(offset.top);
        $pp.posix = {'x': e.pageX - offset.left, 'y': e.pageY - offset.top};
        $.extend(document, {'move': true, 'move_target':$pp });
        
    });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { background-color: #eee; }
.BIPanel {width: 200px; height: 100px; cursor: move; position: absolute; top: 30px; left: 30px; background-color: #FFF; border: 1px solid #CCCCCC;  -webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;}
.main_tabletop{width: 100%;height:20px;background:#ffee00;}
</style>
</head>
<body>
<div class="BIPanel">
	    <div class="main_tabletop"><td>可以拖动的标题</td></div>
    左、右、下、左下、右下都可放大缩小
    </div>
<div class="BIPanel">
	    <div class="main_tabletop"><td>可以拖动的标题</td></div>
    左、右、下、左下、右下都可放大缩小
</div>

</body>
</html>
二: 
html:

<div id='box' style="position:absolute;width:100px;height:100px;background-color:'#ee735c'">
  <div>可拖动div元素</div>
</div>

JS:

var oDiv=document.getElementById('box')
  oDiv.onmousedown=function(ev){
    var disX=ev.clientX-oDiv.offsetLeft
    var disY=ev.clientY-oDiv.offsetTop

    document.onmousemove=function(ev){
      var l=ev.clientX-disX
      var t=ev.clientY-disY

      oDiv.style.left=l+'px'
      oDiv.style.top=t+'px'
    }
    document.onmouseup=function(){
      document.onmousemove=null;
      document.onmouseup=null
    }
  }

三:拖拽+调整大小

<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="utf-8">
<title>jQuery拖放</title>
<script type="text/javascript" src="../../../commons/js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
    $(document).mousemove(function(e) {
        if (!!this.move) {
            var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
                callback = document.call_down || function() {
                    $(this.move_target).css({
                        'top': e.pageY - posix.y,
                        'left': e.pageX - posix.x
                    });
                };

            callback.call(this, e, posix);
        }
    }).mouseup(function(e) {
        if (!!this.move) {
            var callback = document.call_up || function(){};
            callback.call(this, e);
            $.extend(this, {
                'move': false,
                'move_target': null,
                'call_down': false,
                'call_up': false
            });
        }
    });

    var $BIPanel = $('.BIPanel .main_tabletop').mousedown(function(e) {
        var $p = $(this).parent();
        var $pp = $p[0];
        var offset = $p.offset();
        $pp.posix = {'x': e.pageX - offset.left, 'y': e.pageY - offset.top};
        $.extend(document, {'move': true, 'move_target':$pp });
        
    });
    $('.BIPanel').bind(
        {'mousemove':function(e){
            $(this).css({cursor: "default"});
            var offset = $(this).offset(), resize=true;
            var x = e.clientX, y = e.clientY, t = offset.top, l = offset.left, w = $(this).width(), h = $(this).height(), ww = $('.main_tabletop').height(), b = 10;
            if(x<(l+b) && y > (t+ww) && y < (t+h-b)){
                $(this).css({cursor: "w-resize"});
                $(this).unbind("mousedown").bind({"mousedown":function(e){
                    var $p = $(this);
                    var posix = {
                            'w': $p.width(), 
                            'h': $p.height(), 
                            'x': e.pageX, 
                            'y': e.pageY
                        };
                    
                    $.extend(document, {'move': true, 'call_down': function(e) {
                        $p.css({
                            'width': Math.max(30,  posix.x-e.pageX + posix.w),
                            'left': Math.max(30,  e.pageX)
                        });
                    }});
                }});
            }else if(x<(l+w) && x>(l+w-b) &&  y > (t+ww) && y < (t+h-b)){
                $(this).css({cursor: "e-resize"});
                $(this).unbind("mousedown").bind({"mousedown":function(e){
                    var $p = $(this);
                    var posix = {
                            'w': $p.width(), 
                            'x': e.pageX
                        };
                    resizeBIPanel($p, posix, e);
                }});
            }else if(y<(t+h) && y>(t+h-b) && x>(l+b) && x<(l+w-b)){
                $(this).css({cursor: "s-resize"});
                $(this).unbind("mousedown").bind({"mousedown":function(e){
                        var $p = $(this);
                        var posix = {
                                'h': $p.height(), 
                                'y': e.pageY
                            };
                        resizeBIPanel($p, posix, e);
                    }
                });
            }else if(x<(l+b) && y>(t+h-b) && y<(t+h)){
                $(this).css({cursor: "sw-resize"});
                $(this).unbind("mousedown").bind({"mousedown":function(e){
                    var $p = $(this);
                    var posix = {
                            'w': $p.width(), 
                            'h': $p.height(), 
                            'x': e.pageX, 
                            'y': e.pageY
                        };
                    
                    $.extend(document, {'move': true, 'call_down': function(e) {
                        $p.css({
                            'width': Math.max(30,  posix.x-e.pageX + posix.w),
                            'height': Math.max(30, e.pageY - posix.y + posix.h),
                            'left': Math.max(30,  e.pageX)
                        });
                    }});
                }});
            }else if(y<(t+h) && y>(t+h-b) && x<(l+w) && x>(l+w-b)){
                $(this).css({cursor: "se-resize"});
                $(this).unbind("mousedown").bind({"mousedown":function(e){
                    var $p = $(this);
                    var posix = {
                        'w': $p.width(), 
                        'h': $p.height(), 
                        'x': e.pageX, 
                        'y': e.pageY
                    };
                    $.extend(document, {'move': true, 'call_down': function(e) {
                        $p.css({
                            'width': Math.max(30, e.pageX - posix.x + posix.w),
                            'height': Math.max(30, e.pageY - posix.y + posix.h)
                        });
                    }});
                }
                });
            }else if(y<(t+ww) && x>l && x<(l+w)){
                $(this).css({cursor: "move"});
                $(this).unbind("mousedown");
            }
        },
        "mouseup":function(){
            $(this).unbind("mousedown");
        }
    });
    function resizeBIPanel($p,posix,e){
        $.extend(document, {'move': true, 'call_down': function(e) {
            $p.css({
                'width': Math.max(30, e.pageX - posix.x + posix.w),
                'height': Math.max(30, e.pageY - posix.y + posix.h)
            });
        }});
    }
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { background-color: #eee; }
.BIPanel {width: 200px; height: 100px; cursor: move; position: absolute; top: 30px; left: 30px; background-color: #FFF; border: 1px solid #CCCCCC;  -webkit-BIPanel-shadow: 10px 10px 25px #ccc;-moz-BIPanel-shadow: 10px 10px 25px #ccc;BIPanel-shadow: 10px 10px 25px #ccc;}
.main_tabletop{width: 100%;height:20px;background:#ffee00;}
</style>
</head>
<body>
<div class="BIPanel">
	    <div class="main_tabletop"><td>可以拖动的标题</td></div>
    左、右、下、左下、右下都可放大缩小
    </div>
<div class="BIPanel">
	    <div class="main_tabletop"><td>可以拖动的标题</td></div>
    左、右、下、左下、右下都可放大缩小
</div>

</body>
</html>

四:

<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试的拖拽功能</title>
<style type="text/css">
body, div { margin: 0; paading: 0; font-size: 12px; }
body { width:100%; margin: 0 auto; }
ul, li { margin: 0; padding: 0; list-style: none; }
.clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; }
.drag_module_box { width: 600px; height: auto; margin: 25px 0 0 0; padding: 5px; border: 1px solid #f00; }
.drag_module_box1 { width: 600px; height: auto; margin: 25px 0 0 0; padding: 5px; border: 1px solid #f00; }
.drag_module_main { position: static; width: 600px; height: 80px; margin-bottom: 5px; border: 1px solid blue; background: #ccc; }
.drag_module_maindash { position: absolute; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed blue; background: #ececec; opacity: 0.7; }
.drag_module_hide { width: 600px; height: 80px; margin-bottom: 5px; }
.drag_module_dash { position: sta;tic; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed #f00; };
</style>
<script type="text/javascript" src="../../../commons/js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
   var range = { x: 0, y: 0 };//鼠标元素偏移量
   var lastPos = { x: 0, y: 0, x1: 0, y1: 0 }; //拖拽对象的四个坐标
   var tarPos = { x: 0, y: 0, x1: 0, y1: 0 }; //目标元素对象的坐标初始化
   var theDiv = null, move = false;//拖拽对象 拖拽状态
   var theDivId =0, theDivHeight = 0, theDivHalf = 0; tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
   var tarDiv = null, tarFirst, tempDiv; //要插入的目标元素的对象, 临时的虚线对象
  function loopbox(){ //循环初始化
     $(".drag_module_box").find(".drag_module_main").each(function(){
      console.log( 'find' );
       $(this).mousedown(function (event){
         //拖拽对象
         theDiv = $(this);
         //鼠标元素相对偏移量
         range.x = event.pageX - theDiv.offset().left;
         range.y = event.pageY - theDiv.offset().top;
         theDivId = theDiv.index();
         theDivHeight = theDiv.height();
         theDivHalf = theDivHeight/2;
         move = true;
         theDiv.attr("class","drag_module_maindash");
         // 创建新元素 插入拖拽元素之前的位置(虚线框)
         $("<div class='drag_module_dash'></div>").insertBefore(theDiv);
       });
     });
  }
  loopbox();
   $(".drag_module_box").mousemove(function(event) {
    console.log( 'mousemove' );
     if (!move) return false;
     lastPos.x = event.pageX - range.x;
     lastPos.y = event.pageY - range.y;
     lastPos.y1 = lastPos.y + theDivHeight;
     // 拖拽元素随鼠标移动
     theDiv.css({left: lastPos.x + 'px',top: lastPos.y + 'px'});
     // 拖拽元素随鼠标移动 查找插入目标元素
     var $main = $('.drag_module_main'); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
     tempDiv = $(".drag_module_dash"); //获得临时 虚线框的对象
     $main.each(function () {
       tarDiv = $(this);
       tarPos.x = tarDiv.offset().left;
       tarPos.y = tarDiv.offset().top;
       tarPos.y1 = tarPos.y + tarDiv.height()/2;
       tarFirst = $main.eq(0); // 获得第一个元素
       tarFirstY = tarFirst.offset().top + theDivHalf ; // 第一个元素对象的中心纵坐标
       //拖拽对象 移动到第一个位置
       if (lastPos.y <= tarFirstY) {
           tempDiv.insertBefore(tarFirst);
       }
       //判断要插入目标元素的 坐标后， 直接插入
       if (lastPos.y >= tarPos.y - theDivHalf && lastPos.y1 >= tarPos.y1 ) {
         tempDiv.insertAfter(tarDiv);
       }
     });
   }).mouseup(function(event) {
    console.log( 'mouseup' );
    if(theDiv==null) return false;
     theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
     theDiv.attr("class", "drag_module_main"); //恢复对象的初始样式
     $('.drag_module_dash').remove(); // 删除新建的虚线div
     move=false;
   });
   $("#drag_module_insert").click(function(){
    $("#drag_module_box1").html($("#drag_module_box1").html()+$("#drag_module_box2").html());
    loopbox();
   });
   $("#drag_module_seque").click(function(){
    $(".drag_module_box").find(".drag_module_main").each(function(){
      console.log($(this).attr('id'));
    });
   });
});
</script>
</head>
<body>
<div class="drag_module_box" id="drag_module_box1">
   <div class="drag_module_main" id="main1" style="height: 10px;width: 100px">div1</div>
</div>
<div class="drag_module_box1" id="drag_module_box2">
  <div class="drag_module_main" id="main_first">div7</div>
</div>
<input type="button" value="新建" id="drag_module_insert"/>
<input type="button" value="确定" id="drag_module_seque"/>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/hiqingtian/article/details/79667672
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022