js拖拽实现

最新推荐文章于 2022-10-06 10:36:23 发布
最新推荐文章于 2022-10-06 10:36:23 发布
阅读量542 收藏
点赞数
分类专栏： js 
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            html,body
            {
                height:100%;
                width:100%;
                padding:0;
                margin:0;
            }
            .dialog
            {
             /*   width:250px;
                height:250px;*/
                position:absolute;
                background-color:#ccc;
                -webkit-box-shadow:1px 1px 3px #292929;
                -moz-box-shadow:1px 1px 3px #292929;
                box-shadow:1px 1px 3px #292929;
                /*margin:10px;*/
                top:50px;
                left: 50px;
                opacity:1;
            }
            .dialog-title
            {
                color:#fff;
                background-color:#404040;
                font-size:12pt;
                font-weight:bold;
                padding:4px 6px;
                cursor:move;
                position:absolute;
                top:50px;
                left: 50px;
            }
            
            .dialog-content
            {
                padding:4px;
                cursor:move;
            }
            .none{
                display: none;
            }
            .box{
                width: 600px;
                height: 500px;
                background-color: gray;
                line-height: 30px;
                margin: 100px;
            }
            .place{
                width: 200px;
                height: 50px;
                border: 1px dashed red;
            }
        </style>
        <script type="text/javascript" >/**
* author:lzh 
* 作用:可拖拽排序表单实现
* 参数:oclick     点击触发事件的对象
*      ocreate    出发后在表单中传入的对象
*      bisMany    单个oclick对象是否可拖入多个ocreate对象
*      oplace     拖入时占位div对象
*      obox       拖入的容器，不填则默认为body
*/
function createWin(oclick,ocreate,bisMany,oplace,obox=document.body)
{
    //是否点击了触发对象
    var isClick = false;
    //触发对象是否为容器内的元素
    var isIncludeBox = false;
    oplace.style.width = obox.offsetWidth-5 + "px";
    oplace.style.height = oclick.offsetHeight-5 + "px";
    //移动效果的临时元素
    var oclickClone;
    var oclickDown;
    //计算偏移量
    var diffObj;
    var diffX;
    var diffY;
    var tmp;
    var omove_position;
    //点是否包含在容器内
    function isInclude(x,y,includeBox=obox)
    {
        if(x  > includeBox.offsetLeft 
        && y > includeBox.offsetTop 
        && x < includeBox.offsetLeft + includeBox.offsetWidth
        && y < includeBox.offsetTop + includeBox.offsetHeight)
            return true;
        return false;
    }
    //移动效果函数
    function moveMagic(omove,e)
    {
        // omove_position = window.getComputedStyle(omove).getPropertyValue('position');
        omove.style.opacity = 0.4;
        omove.style.position = "absolute";
        document.body.appendChild(omove);
        omove.style.left = e.clientX-diffX+"px";
        omove.style.top = e.clientY-diffY+"px";
    }
    function getdiff(e)
    {
        diffObj = e.target;
        diffX = e.clientX-diffObj.offsetLeft;
        diffY = e.clientY-diffObj.offsetTop;
    }
    //鼠标按下事件
    function down(e)
    {
        if(isInclude(e.clientX,e.clientY,oclick))
        {
            isClick = true;
            //克隆点击的触发节点
            oclickClone=oclick.cloneNode(true);
            //计算鼠标的偏移量（如果有margin的话会有偏移现象）
            getdiff(e);
        }
        else
        {
            getdiff(e);
            var child = obox.childNodes;
            for(var i=0; i < child.length; i++)
            {
                //判断鼠标点击是否是容器内的元素，并且不能是占位div（如果不加这个占位div判断会有bug，具体原因不知道）
                if(isInclude(e.clientX,e.clientY,child[i])&& child[i] != oplace)
                {
                    isClick = true;
                    isIncludeBox = true;
                    //克隆元素用来拖动时的效果
                    oclickClone = child[i].cloneNode(true);
                    //克隆元素用来放下
                    oclickDown = child[i].cloneNode(true);
                    //按下之后删除元素，并使用移动效果来展示元素
                    obox.removeChild(child[i]);
                    moveMagic(oclickClone,e);
                    //插入占位div来弄
                    obox.insertBefore(oplace,child[i]);
                    // flag = true;
                    break;
                }
            }
        }
    }
    //鼠标移动事件
    function move(e)
    {
        if(isClick)
        {
            moveMagic(oclickClone,e);
            //判断鼠标是否移动到了容器内部
            if(isInclude(e.clientX,e.clientY,obox))
            {
                //计算容器内的子节点
                var child = obox.childNodes;
                //一旦进入就可以在首位置插入占位DIV
                obox.insertBefore(oplace,child[0]);
                //根据鼠标位置放置占位DIV
                for(var i = 0; i < child.length; i++)
                {
                    //因为占位DIV是唯一的，所以只需要这样判断即可
                    if(e.clientY > child[i].offsetTop+child[i].offsetHeight/2)
                    {
                        //判断是否拖动到了结尾
                        if(i != child.length-1)
                            obox.insertBefore(oplace,child[i+1]);
                        else
                            obox.appendChild(oplace);
                    }
                }
            }
        }
    }
    //鼠标抬起事件
    function up(e)
    {
        isClick = false;
        //鼠标抬起则可以删除临时的拖动效果元素
        document.body.removeChild(oclickClone);
        //如果将元素放置到了容器内
        if(isInclude(e.clientX,e.clientY))
        {debugger;
            var child = obox.childNodes;
            //占位div的位置
            var insertPlace;
            for(var i=0; i<child.length;i++)
            {
                //确定占位div的位置
                if(oplace === child[i])
                {
                    obox.removeChild(child[i]);
                    insertPlace = i;
                    break;
                }
            }
            //判断是否可以放置多个
            if(!bisMany)
            {
                if(isIncludeBox)
                    ocreate = oclickDown;
                if(insertPlace==child.length)
                    obox.appendChild(ocreate);
                else
                    obox.insertBefore(ocreate,child[insertPlace]);
            }
            else
            {
                    //可以放置多个则需要每个都克隆一下
                if(isIncludeBox)
                    var ocreateClone = oclickDown;
                else
                    var ocreateClone = ocreate.cloneNode(true);
                if(insertPlace==child.length)
                    obox.appendChild(ocreateClone);
                else
                {
                    obox.insertBefore(ocreateClone,child[insertPlace]);
                }
            }
        }
        else
        {
            if(isIncludeBox)
            {
                var child  = obox.childNodes;
                for(var i=0; i<child.length; i++)
                {
                    if(child[i] === oplace)
                    {
                        obox.removeChild(child[i]);
                        obox.insertBefore(oclickDown,child[i]);
                    }1
                }
            }
        }
        isIncludeBox = false;
    }
    document.addEventListener('mousemove',move);
    document.addEventListener('mousedown',down);
    document.addEventListener('mouseup',up);
}


</script>
		
    </head>
    <body>
        <!-- <div id="dlgTest" class="dialog"> -->
             <input id = "title" type="text" >
            <div id = "title2" class="dialog-title" style ="top:10px">Dialog</div>
        <!-- </div> -->
        <a id = "a" href="#">123</a>
        <input id = "text" type="text" class = "none">
        <div id = "box" class = "box">
       <!-- <input type="" name="" placeholder=""> -->
        </div>
        <div class = "place"></div>
    </body>
    <script type="text/javascript">
        //要传入的变量
        //点击触发的对象 
        var click = document.getElementById("title");
        var click2 = document.getElementById("title2");
        //放入的容器
        var box = document.getElementById("box");
        //容器内占位的DIV
        var place = document.createElement("div");
        place.className = "place";
        //往容器内添加的对象
        var create = document.createElement("input");
        create.type = "text";
        var create2 = document.createElement("input");
        create2.type = "password";
        //是否可以添加多个
        var isMany = true;
        createWin(click,create,isMany,place,box);
        createWin(click2,create2,isMany,place,box);
		var h = "<a οnclick=\"p('a')\">你好</a>";
    </script>
</html>

xlj3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现拖拽功能(支持左右拖动、删除)
09-20
概述：实现拖拽工作流程配置，可以鼠标左右移动元素，鼠标双击可以删除元素。 基本原理：就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。
javascript实现完美拖拽效果
10-24
在JavaScript中实现完美的拖拽效果是一项常见的交互设计任务，尤其在开发网页相册或可操作的用户界面时。通过理解和应用基本的DOM操作、事件处理以及位置计算，我们可以创建一个平滑且功能丰富的拖放体验。下面将...
怎么用javascript进行拖拽
SmartJavaer的专栏
10-12 1121
怎么用javascript进行拖拽本文译自：http://www.webreference.com/programming/javascript/mk/column2/index.html所有版权归原文所有由sohotx.com雪山老人翻译整理，转载请标明Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这
js拖拽的例子
linsen309的专栏
05-31 548
html>head>style>.rob{width:200px;height:200px;background:#abcabc;border:2px;position:absolute;border-color:#666666}.child{width:200px;height:30px;background:#bad;border:1px;}-->style>script type="text
js拖拽案例
最新发布
qx020814的博客
10-06 389
用时两个半小时，犯了一些很基础的错误，有参数传入错误，导致id无法获取、el对象无法加入、、、一连锁的错误。当然，我也解决了一些bug。我们来看看，我到底踩了多少坑！不过当我完成了后，确实可以拖动放入，不过在这里出现一个问题，就是它可以放入文字的容器当中的，所以在这里我们就要判断，这里有一个bug，就是我放下的时候居然可以放在待拖拽的元素，也就是本案例中的三个正方形颜色框。由于我的标签未定义id，所以它就是一个""。取出id，获取id的dom对象，然后加入元素类容！只要拖动时，就取出被拖动的id。
原生js实现可拖拽效果
10-20
标题“原生js实现可拖拽效果”直接指出了文章的核心内容，即利用JavaScript编程语言（原生JS）来实现元素的拖拽效果。在前端开发中，拖拽功能是一个很常见的交互设计，可以让用户通过鼠标操作来移动页面元素，增强...
原生js拖拽实现图形伸缩效果
10-15
《原生JS实现图形拖拽与伸缩效果详解》 在网页开发中，动态交互功能是提升用户体验的重要一环。本文将深入探讨如何利用原生JavaScript实现图形的拖拽及伸缩效果，这对于创建可自定义大小的界面元素或者富媒体应用来...
js实现单元格拖拽效果
11-20
在JavaScript中实现单元格拖拽效果，主要是通过监听鼠标事件并改变元素的位置来完成的。以下将详细解析这个实例中的各个部分以及所涉及的关键知识点： 1. **CSS基础布局**： - `* { margin: 0; padding: 0; }` ...
js实现鼠标拖动div.html
02-14
今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现拖动的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
JS实现的可动态拖拽的树型菜单
06-13
一个非常好用的JavaScript实现的可动态拖拽的树型菜单，推荐
js实现简单拖拽案例
wangcuiling_123的博客
11-05 451
简单拖拽事件主要是监听三个事件：onmousedown, onmousemove, onmouseup 三个事件，思路也很简单，但是写的时候还是遇到了一些小问题，先放代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽事件案例</title> <style type="text/
实例：js拖拽事件
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
05-31 296
代码】实例：js拖拽事件。
JS 拖拽
huyao的博客
06-20 660
实现后效果拖拽方法实现//鼠标拖拽方法 function drag(e) { var event = e || window.event; //事件兼容 var disX = e.clientX - this.offsetLeft, //当前鼠标在区块上的横向相对位置 disY = e.clientY - this.offsetTop; //当前鼠标在区块上的...
js拖拽
ym深的博客
10-19 164
拖拽使用的三个事件 onmousedown //鼠标按下 onmousemove //鼠标移动 onmouseup //鼠标抬起 <head> <style> img{ position:absolute; left:0; top:0; ...
再谈js拖拽（二）仿iGoogle自定义首页模块拖拽
weixin_33742618的博客
05-07 139
　　首先这篇文章是基于 再谈js拖拽（一） code基础上的，进行改动实现的仿iGoogle自定义首页模块拖拽功能。将code贴上，你也可在下方进行下载。code未免枯燥，我将尽量用文字描述思路及注意点，所以即便你不看code也能根据文字翻译成你的code。 代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti...
用Javascript实现鼠标拖拽网页表单
www_extract_com_cn的专栏
12-27 824
本文译自：http://www.webreference.com/programming/javascript/mk/column2/index.html　　所有版权归原文所有　　Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．　　有很多理由让你的网站加入拖拽
Sortable.js拖拽排序实现详解
"Sortable.js是一个强大的JavaScript库，用于实现拖拽排序功能。本文将详细解析Sortable.js的使用方法，包括其核心事件以及基本的DOM操作。虽然Sortable.js的源码大约有1300行，但设计得相当精炼，适用于各种拖拽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值