<div id="logDiv" draggable="true" style="border: 2px dotted red; width: 100%; height: 30%; z-index: 10000; box-sizing: border-box; top: 60%; position: absolute; overflow-y: scroll; -webkit-user-drag: element;" class=""></div>
                    that.logDiv.addEventListener('dragstart',that._start,true);

                    that.logDiv.addEventListener('touchstart',that._start,false);

                    that.logDiv.addEventListener('drag',that._drag.bind(that),false);

                    that.logDiv.addEventListener('touchmove',that._drag.bind(that),false);

                    that.logDiv.addEventListener('dragend',that._end.bind(that),false);

                    that.logDiv.addEventListener('touchend',that._end.bind(that),false);

                    that.logDiv.addEventListener('click',that._click.bind(that),true);

demo

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

</head>

<body>

  <div id="container">

  <div id="div1"></div>

  </div>

</body>

</html>
#div1{

  width:20px;

  height:20px;

  border:1px solid red;

  margin-left:10px;

  margin-top:10px;

  position:absolute;

}

#container

{

  border:1px solid black;

  margin-top:10px;

  margin-left:10px;

  position:relative;

}

body{

  margin:0 0 0 0;

  padding:0 0 0 0;

}
window.start=0;

var div1=document.getElementById('div1');

div1.addEventListener('mousedown',function(evnt){

 window.start=1;

  evnt=evnt||window.event;

        window.x=parseInt(evnt.clientX);

        window.y=parseInt(evnt.clientY);

  window.dx=x-div1.offsetLeft;

  window.dy=y-div1.offsetTop;

},true);

document.addEventListener('mousemove',function(evnt){

if(window.start)

  {

       div1.style.left= evnt.clientX - window.dx +"px";

   div1.style.top= evnt.clientY -window.dy +"px";

  }

},true);

document.addEventListener('mouseup',function(event){

    window.start = 0;

},true);

https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW24

JS Bin on jsbin.com

drag element的更多相关文章

  1. 移动端 touchmove高频事件与requestAnimationFrame的结合优化

    移动端最高频耗内存的的操作  莫属 touchmove 与scroll事件  两者需要 微观的 优化,使用 requestAnimationFrame性能优化 H5性能优化requestAnimati ...

  2. Hammer.js 移动端手势库，多点触控插件

    jquery用法: 引入3个JS:<script src="jquery.js"></script> <script src="hammer ...

  3. Hammer.js 实现移动端元素的拖拽库

    1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...

  4. JavaScript实现拖放效果

    JavaScript实现拖放效果 笔者实现该效果也是套用别人的轮子的.传送门 然后厚颜无耻的贴别人的readme~,笔者为了方便查阅就直接贴了,有不想移步的可以看这篇.不过还是最好请到原作者的GitH ...

  5. HTML5魔法堂：全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  6. arcgis engine 监听element的添加、更新和删除事件（使用IMovePointFeedback）

    VB代码: 复制进程序稍作修改变量名和事件逻辑即可使用. Members   AllPropertiesMethodsInheritedNon-inherited Description Displa ...

  7. HTML5拖放（drag and drop）与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  8. html5 drag api详解

    可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 di ...

  9. 20 Best Drag and Drop jQuery Plugins--reference

    reference from:http://dizyne.net/20-best-drag-drop-jquery-plugins/ jQuery has done a great job repla ...

随机推荐

  1. c/c++ 中#ifndef和#endif的作用及使用

    有时候我们在编程的时候,希望有些代码在我们需要时编译,不需要时不编译,也就是让它快速注释,这时候即可以考虑#ifdef和#endif,它们会使我们的编译器进行选择性编译.使用方法如下: #includ ...

  2. 鸡肋提权之变态root利用

    你急有毛用,我电脑没带,怎么搞? 联系了基友adminlm牛看看吧,他说有防护软件啥的,有root,无法UDF,于是我让他去Mof,经历一番周折,知道了,对mof目录也锁定了权限,无法用root导出m ...

  3. 本地缓存和redis

    项目中的传统架构在服务启动时 读取数据库的大部分数据到本地内存,在看到redis的作用时发出疑问,到底有什么样的区别以及怎么选择呢,下面是别人的回答 使用本地缓存快还是使用redis缓存好? Redi ...

  4. python 中logging的日志封装

    因为最近在做平台,发现有同事,使用django封装了日志模块,看样子很简单,准备自己单独做了一个日志封装模板,对于python不熟练的我,封装部分参考了多个博主的内容,形成自己的日志模块,内容如下: ...

  5. 网络Socket编程（简易qq实现之C/S通信1）

    1. 目标:实现两个用户之间的通信,利用的是简单的Socket知识以及简略界面 2. 界面:分为客户端与服务器端(如下图) 3. 基本功能:客户端先向服务器端发送一个消息,这样就可以让客户端与服务器端 ...

  6. 图论——最短路径 Dijkstra算法、Floyd算法

    1.弗洛伊德算法(Floyd) 弗洛伊算法核心就是三重循环,M [ j ] [ k ] 表示从 j 到 k 的路径,而 i 表示当前 j 到 k 可以借助的点:红色部分表示,如果 j 到 i ,i 到 ...

  7. java 静态相关内容

    一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序来调用的时候,需要使用静态方法,这种代码 ...

  8. PAT——1066. 图像过滤

    图像过滤是把图像中不重要的像素都染成背景色,使得重要部分被凸显出来.现给定一幅黑白图像,要求你将灰度值位于某指定区间内的所有像素颜色都用一种指定的颜色替换. 输入格式: 输入在第一行给出一幅图像的分辨 ...

  9. HDU 3635 Dragon Balls（超级经典的带权并查集！！！新手入门）

    Dragon Balls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  10. Gradle Goodness: Add Incremental Build Support to Custom Tasks with Annotations

    In a previous post we learned how we can use the inputs and outputs properties to set properties or ...