解决: 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;
}
分享到:
相关推荐
1、html 拖动div进行相应顺序的排序,亲测可用,简单方便 2、适用于各大场景,通过相应的js拖动来执行相应的方法 3、可以下载应用,不懂的可以一起探讨
页面拖动简单例子,asp.NET能用,可以从后台拼动态代码,能满足基本需求
本文实例讲述了jQuery实现简单的DIV拖动效果。分享给大家供大家参考,具体如下: 创建一个HTML文件,复制以下代码进去,修改jquery文件(没有的到网上去下一个,我使用的是jquery-1.8.2),即可以运行了 <!...
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的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》,而我只是针对于他们...
doctype html> <html> <head> <meta charset="UTF-8"> 在当前显示区范围内实现点不到的小方块</title> <style> div{position:fixed;width:100px;height:100px; background-image:url(images/xiaoxin.gif); ...
本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”...
本文实例为大家分享了JavaScript实现简单拖拽效果的具体代码,供大家参考,具体内容如下 先看实现的效果: 思路:里面用到了三个事件,鼠标按下、移动、松开事件 那么首先创建盒子并且给它赋予css样式 ...
本文实例为大家分享了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...
2.jQuery层拖拽插件之jquery仿QQ空间的模块拖动功能插件下载 3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 ...
46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47. jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48. jQuery电子商务网站产品展示插件之仿苏宁易购商城产品图展示特效 ...
HTML部分:注意,拖动元素一定要为绝对定义,即position = absolute; 复制代码 代码如下:<div xss=removed class=”draggable”></div> [removed][removed] JS部分(dome.js): var EventUtil = { // 获取事件和...
DIV+CSS简单登录界面模板.zip Facebook网站登录界面模板.zip HTML5爆裂式关闭窗口动画登录模板.zip HTML5手机登录密码设置页面模板.zip HTML5响应式后台登录界面模板.zip HTML5响应式后台登录模板.zip HTML5响应式...
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....
今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级。原理和之前的一样,简单吧。 html代码: <div id=...
本文实例为大家分享了js实现简单拼图小游戏的具体代码,供大家参考,具体内容如下 游戏很简单,拼拼图,鼠标拖动一块去和另一块互换。语言是HTML+js,注释写的有不明白的可以留言问一下。 <!DOCTYPE html> ...
本文实例讲述了jquery拖拽排序简单实现方法。分享给大家供大家参考,具体如下: 运行效果截图如下: 原来没有新建动作,分析代码后发现很容易增强~~ 代码如下: <!DOCTYPE HTML> <html> <head> <...
100. 打包jquery拖动条拖动图片缩略图及放大图片效果插件(翻版thickbox插件) 101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐...
步骤: 1.实现随鼠标移动的效果; 2.初始化一个元素及其坐标; 3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素; 4....!DOCTYPE HTML> <... body, div { margin: 0; paading: 0;