如何拖动DOM元素

.divblok { 
               
                width:200px;
                height:100px;
                position:absolute;
                left:20px;
                top:20px;
            }

<div id="dragdiv" draggable="true" class="divblok">移动 </div>

window.onload=function(){
    var dragdiv = document.querySelector(‘#dragdiv‘);
    var x, y;  
    dragdiv.addEventListener(‘dragstart‘, function (e) {
        e.dataTransfer.setData("text", ‘‘); 
        x = e.offsetX || e.layerX;
        y = e.offsetY || e.layerY;
        return true;
    }, false);
    document.addEventListener(‘dragover‘, function (e) {
        e.preventDefault()|| e.stopPropagation();
    }, false);
    document.addEventListener(‘drop‘, function (e) {
        dragdiv.style.left = (e.pageX - x) + ‘px‘;
        dragdiv.style.top = (e.pageY - y) + ‘px‘;
        e.preventDefault() || e.stopPropagation();
    }, false);
}

时间: 2024-09-30 15:14:52

如何拖动DOM元素的相关文章

设置dom元素可拖动,支持ie5+

摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Firefox,opera等浏览器的可拖动dom元素的插件. 项目地址:https://github.com/baixuexiyang/drag 实例: var drag = new Drag("test", { onStart: function(){ }, onMove: function

实现dom元素拖动

本文主要写一下如何实现dom元素拖动,目前使用jquery库实现之. 主要的注释附在代码中,大家可以根据代码画一个小的窗口模型图,以便于理解. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>实现dom元素拖动</title> 6 <style> 7 .dialog { 8 position: absolute;

点击事件然后页面跳转到指定DOM元素的位置

设置一个函数,执行函数滚动条自动拖动,页面跳转到指定DOM元素的位置. 实现方式很简单,首先引入animatescroll.js文件(要先引入JQuery),然后 $('#id').animatescroll(); 即可调到指定DOM元素在页面的位置. 为方便可以编写一个函数,传入DOM元素的ID function jumpTo(id){ $("#"+id).animatescroll(); } 附animatescroll.js /* 使用方法: $("#id")

操作DOM元素,Dom元素添加颜色,删除第二个li元素

<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添

【温故而知新-Javascript】为DOM元素设置样式

1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleSheet 对象代表,它提供了一组属性和方法来操作文档里的样式. 1.1 获得样式表的基本信息 第一步是获得定义在文档中的样式表的一些基本信息. <!DOCTYPE html> <html lang="en"> <head> <meta charse

IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的this不是指向执行当前事件的dom而是window切记,感觉这一点IE做的太奇怪了!

JavaScript HTML DOM 元素(节点)

JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.<

html2canvas根据DOM元素样式实现网页截图

html2canvas根据DOM元素样式实现网页截图 html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功能.html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能. 它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建.当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现.以下浏览器能够很好的

使用dom元素和jquery元素实现简单增删改的练习

软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquery的强大: 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" con