js 原生拖拽

拖拽效果很是普遍 今天拿原生简单写一下

(可以按拖拽轨迹 返回到原点)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        color:#666;
    }
    div{
        height: 150px;
        width: 300px;
        border: 1px solid #ccc;
        position: absolute;
        left: 150px;
        top: 150px;
    }
    h5{
        line-height: 35px;
        text-align: right;
        padding-right: 12px;
        border-bottom: 1px solid #ccc;
        cursor: move;
    }
    h5 span{
        cursor: pointer;
    }
    li{
        list-style: none;
        line-height: 25px;
        padding-left: 12px;
    }
</style>
<body>
    <div id="box">
        <h5 id="nav"><span id="back">点击我原路返回</span></h5>
        <ul>
            <li>Drag: <span>false</span></li>
            <li>Top:  <span>150</span></li>
            <li>Left: <span>150</span></li>
        </ul>
    </div>
</body>
</html>

<script type="text/javascript">
    
var box=document.getElementById("box"),
    nav=document.getElementById("nav"),
    back=document.getElementById("back"),
    spans=document.getElementsByTagName("span"),
    rouse=[{x:box.offsetLeft,y:box.offsetTop}],
    Drag=false;
    
    nav.onmousedown=function(){
        
        Drag=true;
    }

document.onmousemove=function(e){
        var e=e || window.e;
        if(!Drag) return false;

box.style.left=e.clientX-30+"px";
        box.style.top=e.clientY-17+"px";
        rouse.push({x:box.offsetLeft, y:box.offsetTop});
        offset();
    }

document.onmouseup=function(){
        Drag=false;
        offset();
    }
    back.onclick=function(){
        console.log(rouse);
        if(rouse.length==1) return false;
        var timer=setInterval(function(){
            var oPos =rouse.pop();
            oPos ? (box.style.left =oPos.x + "px", box.style.top = oPos.y + "px", offset()) : clearInterval(timer)
            console.log(oPos);
        },30)
    }

function offset(){
        spans[1].innerHTML=Drag;
        spans[2].innerHTML=box.offsetLeft;
        spans[3].innerHTML=box.offsetTop;
    }
    box.ontouch

</script>

还望各位多多指点!!!

时间: 2024-10-14 08:25:17

js 原生拖拽的相关文章

js原生拖拽

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{width: 100px; height: 100px; background: red; position: absolute;} </style> <script type=&quo

jquery.dragsort.js 实现拖拽过程遇到的问题

1.在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative.这个问题在火狐等其他浏览器是不存在的. 2.如果拖动的li所在容器出现了滚动条,当滚动条滑到最下面的时候,拖拽下面的li的浮动层位置会出现偏移.解决的办法是在jquery.dragsort.js中,this.draggedItem.css({ top: top, left: left });这句

原生拖拽,拖放事件(drag and drop)

原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改. drag and drop事件流程 一个完整的drag and drop流程通常包含以下几个步骤: 设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽. 监听dragstart设置拖拽数据 为拖拽操作设置反馈图标(可选) 设置允许的拖放效果,如copy,move,link 设置拖放目标,默认情况

HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像是可以拖动的,不用再写代码即可拖动.如果想让其他元素标签也可以拖动,那么只有HTML5能实现了.HTML5为所有HTML元素规定了dragable属性,表示元素是否可以拖动.链接和图像的标签中自动将dragable属性自动被设置成true,其他元素的dragable属性的默认值是false. 支持d

gridster.js–可拖拽的网格插件

gridster.js–可拖拽的网格插件 gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素. \ 主要特性 1.只依赖jQuery 2.支持元素的添加和删除 3.文档比较全 4.拥有测试用例,你可以查看你的浏览器的测试结果 5.比较适合开发益智游戏 如何使用 引入类库,包括jQuery和gridster.js: <script src="http://ajax.googleapis.com/ajax/libs/

用js实现拖拽功能

平常我们在网上可以看到,按住一张图片,然后拖到另一处去,前天在网上看石川(Blue)老师 的js课堂,有见过这个,写下来与大家分享一下: 1,先画个div小红块,样式设置如下: #div1{width: 200px; height: 200px; background-color: red; position:absolute;} 这里的positon属性很重要,如果没有这个,根本拖不动你可以试一下. 2,然后需要用到三个事件,onmousedown, onmousemove, onmouseu

原生js实现拖拽弹框的效果

研究了一上午,模仿了拖拽弹框的效果,小有成就 <script type="text/javascript"> function getByClass(classname,parent){ var par=parent||document, eles=par.getElementsByTagName("*"), needArr=[]; for(var i=0;i<eles.length;i++){ if(eles[i].className==clas

原生js实现拖拽效果

css样式布局: html部分: js主体部分: 接下来用混合继承实现box2移动时有边界的效果: 思路:1.实现拖拽效果主要有三个事件,当鼠标按下的时候,获取鼠标相对于事件发生元素的位置(offsetX/offsetY);当鼠标移动的时候,利用鼠标指针相对于浏览器页面(或客户区)的坐标(clientX/clientY),得到元素的left和top值(clientX/clientY-offsetX/offsetY):当鼠标抬起的时候清除移动效果. 2.事件处理函数会使this指向触发事件的元素,

原生js实现 拖拽事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: #000000; position: absolute; left: 0; top: 0;