`
ariyue
  • 浏览: 337612 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

html 简单 div 拖动

阅读更多
解决:   div的 onclike ( this )  得到选择
            由 window.event 得到 鼠标 x y
            由 this.style.top/left 改变 div 位置

        var x,y;
        function mousedown(obj)
        {
            obj.onmousemove = mousemove;
            obj.onmouseup = mouseup;
           
            oEvent = window.event ? window.event : event;
            x = oEvent.clientX;
            y = oEvent.clientY;
        }
        function mousemove()
        {
            oEvent = window.event ? window.event : event;
            var _top = oEvent.clientY - y + parseInt(this.style.top) + "px"; // oEvent.clientY - y  为div 上 移动的位置 再反映到                                                                                //parseInt(this.style.top)
            var _left = oEvent.clientX - x + parseInt(this.style.left) +"px";
            this.style.top = _top;
            this.style.left = _left;
            x =  oEvent.clientX;
            y =  oEvent.clientY
        }
        function mouseup()
        {
            this.onmousemove = null;
            this.onmouseup = null;
        }
分享到:
评论

相关推荐

    html 拖动div进行相应顺序的排序,亲测可用,简单方便

    1、html 拖动div进行相应顺序的排序,亲测可用,简单方便 2、适用于各大场景,通过相应的js拖动来执行相应的方法 3、可以下载应用,不懂的可以一起探讨

    css+div+js页面实现div拖动HTML版

    页面拖动简单例子,asp.NET能用,可以从后台拼动态代码,能满足基本需求

    jQuery实现简单的DIV拖动效果

    本文实例讲述了jQuery实现简单的DIV拖动效果。分享给大家供大家参考,具体如下: 创建一个HTML文件,复制以下代码进去,修改jquery文件(没有的到网上去下一个,我使用的是jquery-1.8.2),即可以运行了 <!...

    jQuery实现div横向拖拽排序的简单实例

    div横向拖拽排序</title> [removed][removed] <style type=text/css> body,div{ padding: 0px; margin: 0px; } .box { margin-left: 15px; padding : 10px; padding-right: 0px; width : 810px; height

    vue中实现拖动调整左右两侧div的宽度的示例代码

    还是老话,因为我不是专业的前端工程师,只是兼职写一些简单的前端,所以这个功能的实现得益于以下博客,《vue 拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》,而我只是针对于他们...

    【JavaScript源代码】js实现简单图片拖拽效果.docx

    doctype html> <html> <head> <meta charset="UTF-8"> 在当前显示区范围内实现点不到的小方块</title> <style> div{position:fixed;width:100px;height:100px; background-image:url(images/xiaoxin.gif); ...

    jquery实现div拖拽宽度示例代码

    本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”...

    【JavaScript源代码】JavaScript实现简单拖拽效果.docx

    本文实例为大家分享了JavaScript实现简单拖拽效果的具体代码,供大家参考,具体内容如下 先看实现的效果: 思路:里面用到了三个事件,鼠标按下、移动、松开事件 那么首先创建盒子并且给它赋予css样式 ...

    Vue实现简单的拖拽效果

    本文实例为大家分享了Vue实现简单拖拽效果的具体代码,供大家参考,具体内容如下 自定义指令v-drag l 存在时 只能横向拖拽 t 存在时 只能纵向拖拽 lt都存在时 可以任意方向拖拽 <!DOCTYPE html> <html lang=...

    左右两栏布局右侧自适应+左右拖动改变两栏宽度

    布局很简单,左边一个div,右边一个div,中间的div是用来拖动的。 复制代码代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    2.jQuery层拖拽插件之jquery仿QQ空间的模块拖动功能插件下载 3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 ...

    100多个JQuery效果示例(实例)div+css+javascrpit

    46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47. jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48. jQuery电子商务网站产品展示插件之仿苏宁易购商城产品图展示特效 ...

    JavaScript实现简单的拖动效果

    HTML部分:注意,拖动元素一定要为绝对定义,即position = absolute; 复制代码 代码如下:<div xss=removed class=”draggable”></div> [removed][removed] JS部分(dome.js): var EventUtil = { // 获取事件和...

    HTML登陆页面案例收藏.zip

    DIV+CSS简单登录界面模板.zip Facebook网站登录界面模板.zip HTML5爆裂式关闭窗口动画登录模板.zip HTML5手机登录密码设置页面模板.zip HTML5响应式后台登录界面模板.zip HTML5响应式后台登录模板.zip HTML5响应式...

    Javascript简单实现可拖动的div

    html> <head> [removed] var x; var y; function $(id) { return document.getElementById(id) } function mousedown() { x=event.clientX-$(“px”).style.pixelLeft; y=event.clientY-$(“px”).style....

    Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级。原理和之前的一样,简单吧。 html代码: <div id=...

    【JavaScript源代码】js实现简单拼图小游戏.docx

     本文实例为大家分享了js实现简单拼图小游戏的具体代码,供大家参考,具体内容如下 游戏很简单,拼拼图,鼠标拖动一块去和另一块互换。语言是HTML+js,注释写的有不明白的可以留言问一下。 <!DOCTYPE html> ...

    jquery拖拽排序简单实现方法(效果增强版)

    本文实例讲述了jquery拖拽排序简单实现方法。分享给大家供大家参考,具体如下: 运行效果截图如下: 原来没有新建动作,分析代码后发现很容易增强~~ 代码如下: <!DOCTYPE HTML> <html> <head> &lt...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    100. 打包jquery拖动条拖动图片缩略图及放大图片效果插件(翻版thickbox插件) 101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐...

    简单的jquery拖拽排序效果实现代码

    步骤: 1.实现随鼠标移动的效果; 2.初始化一个元素及其坐标; 3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素; 4....!DOCTYPE HTML> <... body, div { margin: 0; paading: 0;

Global site tag (gtag.js) - Google Analytics