jquery拖动生成按钮

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-03-24   阅读次数: 151   查看权限: 游客查看

例如一个页面下有两个div分别位于左右两边宽度各五百,高六百,在第一个div中有个button,点击botton或者拖动左边的button到右边的div,在右边的地中鼠标释放生产一个新的button

例如一个页面下有两个div分别位于左右两边宽度各五百,高六百,在第一个div中有个button,点击botton或者拖动左边的button到右边的div,在右边的地中鼠标释放生产一个新的button,(如果是点击左边按钮则,在右边随机位置生产一个button)。在右边的button可以生产很多。

这是CSDN论坛网友提供的一个问题,实现起来并不难。但有些细节需要注意,为了做得更美好我们必须注意一些事项:怎么判断拖动物完全拖入另一个DIV内?生成的DIV即要能固定位置,而且又是在指定的DIV内,必须跟着DIV移动而移动比较好。同时如果能在完全拖入指定的范围内有一个样式提醒更好。此问题可以扩展到物与物踫撞原理。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js写一个拖动并创建一个新对象</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        #left_div,#right_div{
            border:1px solid red;
            width:500px;height: 600px;
            float: left;
        }
        #right_div{position: relative;}
        #move_b,.scs{
            position: absolute;
            width:100px;height:25px;
        }
        #move_b{z-index: 2}
        p{font-size: 12px}
    </style>
</head>
<body>
<div id="left_div">
    <button type="button" id="move_b">移动按钮</button>
    <p style="margin-top:30px">按钮必须完全拖入右边DIV,才生成一个按钮。</p>
    <p>单独点击左按钮,随机在右边生成按钮。</p>
    <p style="color:red">窗口变化造成右边DIV掉下,仍保留功能!</p>
</div>
<div id="right_div"></div>
<script type="text/javascript">
    $(function () {
        var i=0;//生成按钮的编号
        var b_offset=$("#move_b").offset();//拖动按钮原位置
        $("#move_b").mousedown(function (e) {
            var oe=e||window.event;
            var $this = document.getElementById($(this).attr("id"));
            var startX = oe.clientX - $this.offsetLeft;
            var startY = oe.clientY - $this.offsetTop;
            var move=false;
            document.onmousemove = function (e) {
                var oe = e || window.event;
                $this.style.left = oe.clientX - startX + "px";
                $this.style.top = oe.clientY - startY + "px";
                move=true;
            };
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
                if(!move){
                    create("");
                }else{
                    create($($this).offset());
                    $($this).animate(b_offset,"fast");
                }
                if ($this.releaseCapture)$this.releaseCapture();
            };
            if ($this.setCapture)$this.setCapture();
            return false;
        });
        function create(offset){
            var r_div=$("#right_div");
            //分别获取按钮可生成时的最大最小坐标
            var min_l=r_div.offset().left;
            var min_t=r_div.offset().top;
            var max_l=min_l+500-100;
            var max_t=min_t+600-25;
            if(""==offset){
                //在指定DIV范围内随机生成按钮
                $('<button type="button" style="top:'+Math.floor(Math.random()*575)+'px;left:'+Math.floor(Math.random()*400)+'px" class="scs">按钮'+i+'</button>').appendTo(r_div);
                i++;
            }else{
                //拖动后必须在指定范围内生成按钮
                if(offset.left>min_l&&offset.left<max_l&&offset.top>min_t&&offset.top<max_t){
                    min_t=offset.top-min_t;
                    min_l=offset.left-min_l;
                    $('<button type="button" style="top:'+min_t+'px;left:'+min_l+'px" class="scs">按钮'+i+'</button>').appendTo(r_div);
                    i++;
                }
            }
        }
    });
</script>
</body>
</html>

代码即兴而写,没经过优化,见谅。

关键词: jquery,拖动,按钮,csdn   编辑时间: 2013-03-24

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介