简单的鼠标可拖动div 兼容IE/FF

【简单的鼠标可拖动div 兼容IE/FF】的更多相关文章

简单的鼠标可拖动div 兼容IE/FF

来源:http://www.cnblogs.com/imwtr/p/4355416.html 作者: 主要思路: 一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度,clientX/clientY位置等) 并继而转为监测onmousemove事件,在鼠标移动事件中更新div对象的位置属性鼠标松开的时候解除监听,更新位置完成. 需要注意的两点: 1.更新对象的位置需要用到o.style.left等,这些CSS属性只能内嵌才能被访问到: <div id="…

原生JavaScript拖动div兼容多种浏览器

说句题外话,虽然博客园嵌入式氛围不行,Web前端氛围还是很好的.我又从 chinaunix 回来了. <html> <head> <script type="text/javascript"> var x; var y; function $(id){ return document.getElementById(id) } function mousedown(){ x=event.clientX-$("px").style.p…

JS实现鼠标滚动事件，兼容IE9,FF,Chrome.

<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript">var agent = navigator.userAgent; if (/.*Firefox.*/.test(agent)) { //只兼容火狐浏览器 document.add…

Javascript 简单实现鼠标拖动DIV

http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/article/10578.htm <html> <head><title>拖动效果函数演示 by Longbill.cn</title> <style> body { font-size:12px; color:#333333; border : 0px…

拖动DIV

链接:https://www.cnblogs.com/joyco773/p/6519668.html 移动端:div在手机页面上随意拖动 1 <!doctype html> 2 <html> 3 <head> 4 <title>弹窗</title> 5 <meta charset="utf-8"> 6 <script type="text/javascript" src="…

js实现可拖动Div

随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的 mousemove事件 3.取消事件然后我们看一下代码: function…

[可拖动DIV]刚开通博客顺便就写了点东西！

说说我自己的思路首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od">我是一个可拖动div</div> 然后就是鼠标事件,想象一下拖动这个过程需要用到哪些事件... 1.鼠标按钮按下事件mousedown 2.鼠标按钮松开事件mouseup 3.鼠标移动事件mousemove 第一步:给div添加鼠标按钮按下事件,这个事件需要完成以下事情一.获…

VUE001. 拖动div盒子（自定义指令v-directives）

拖动div是一个逻辑很简单的需求,监听容器的鼠标按下松开的事件,执行函数通过DOM改变标签的CSS偏移量. 在VUE构建的项目中,通过标签的 @mousedown 和 @mouseup 赋予行为事件,便可以通过原生JS实现这一需求. 但VUE提供了更加方便的途径自定义指令节选自官方文档 " 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 D…

只要把鼠标移上Div方框，方框就自动顺时针旋转

这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的,有一定参考价值. <!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS3旋转</title><style>.rotate {width:…

JS拖动DIV布局

方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse…