使用JS制作一个鼠标可拖的DIV(三)——移动带图片DIV
当DIV元素里,存在图片元素的时候,会使拖动出现异常。
因为图片元素本身就支持拖动,所以,只要在图片标签加入:draggable='false'。
如下:
<div onmousedown="moveBind(this, event)" style="width:50px;height:50px; left:285px;top:370px; position:absolute;"><img src="http://pic.cnitblog.com/face/614265/20140725231849.png" draggable="false"></div>
增加动态增加元素:
var containerId = "innerContainer";
var showId = "idShow";
var moveElement = "div"; function addElement(obj) {
var img = "<" + obj.tagName + " src='" + obj.src + "' draggable='false' />"; var container = findPosition(document.getElementById(containerId));
var containerLeft = container[0];
var containerTop = container[1];
var containerWidth = container[4];
var containerHeight = container[5]; var left = containerLeft + containerWidth / 2 - obj.offsetWidth / 2;
var top = containerTop + containerHeight / 2 - obj.offsetHeight / 2; $("#" + containerId).append("<div onmousedown='moveBind(this, event)' style='width:" + obj.offsetWidth + "px;height:" + obj.offsetHeight + "px; left:" + left + "px;top:" + top + "px; position:absolute;'>" + img + "</div>");
}
<div>
<img src="http://pic.cnitblog.com/face/614265/20140725231849.png" style="width:50px; height: 50px;" onclick="addElement(this)" />
</div>
使用JS制作一个鼠标可拖的DIV(三)——移动带图片DIV的更多相关文章
- 使用JS制作一个鼠标可拖的DIV(二)——限制区域移动
这次是要对上一篇的内容进行扩展. 由于需要对可拖动的 DIV 进行一个区域范围的限制,所以要给于一个容器,让可拖动的 DIV 元素不能逃出该容器的大小范围. 一.思路 1.在外层增加一个 DIV 容器 ...
- 使用JS制作一个鼠标可拖的DIV(四)——缩放
原理与鼠标拖动 DIV 相同. 下面就先实现一个在DIV的右上角显示一个小正方形(类似). 当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小. 一.思 ...
- 使用JS制作一个鼠标可拖的DIV(一)——鼠标拖动
使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件: 1.鼠标按下:DIV元素的onmousedown. 2.鼠标按住拖动:document 的 onmousemove 元素. 3.鼠标放 ...
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- 【原创】js实现一个可随意拖拽排序的菜单导航栏
1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...
- three.js 制作一个三维的推箱子游戏
今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...
- JS制作一个通用的商城版历史浏览记录
正在开发一个b2c的国外商城,昨天做了一个历史浏览记录发出来跟大家分享一下. JS: //cookie相关函数 function getCookieVal(offset) { var endst ...
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
- 用js制作一个计算器
使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- lighttpd mod_status模块
用过nginx的status可以查看服务器的状态,之后就想lighttpd有没有这样的模块呢 之后看下配置文件,真的有,然后就试下 第一步, "mod_auth" 把这个前面的#号 ...
- 转载:mac系统XAMPP配置虚拟主机
安装完xampp后,想添加一个virsualhost,一直报错.查了半天资料,都是乱说,后来看到了一篇国外的文章,终于弄出来了,整理一下. 第一步,配置本地hosts sudo vi /etc/hos ...
- RabbitMQ>Erlang machine stopped instantly (distribution name conflict?). The service is not restarted as OnFail is set to ignore.-报错解决方案 原来是NNND。。。
>Erlang machine stopped instantly (distribution name conflict?). The service is not restarted as ...
- es 的集群状态
es的集群状态一共有三种 : green yellow red 状态是基于 碎片的 等级进行划分的 .
- java 最佳且开源的反编译工具
1.jad:2.jode 很多gui的反编译工具(decafe,DJ,cavaJ)差不多都是基于jad和jode的.
- Apache Spark GraphX的使用简介
类似 Spark 在 RDD 上提供了一组基本操作符(如 map, f ilter, reduce), GraphX 同样也有针对 Graph 的基本操作符,用户可以在这些操作符传入自定义函数和通过修 ...
- 使用CocoaPods管理依赖库
本篇内容将介绍Mac和iOS开发中必备的一个依赖库管理工具CocoaPods. CocoaPods是什么 在iOS开发中势必会用到一些第三方依赖库,比如大家都熟悉的ASIHttpRequest.AFN ...
- .NET的Snk使用方法
保护你Asp.Net生成的DLL和Code不被别人反编译 大家做项目开发一般都是分层的,比如UI层,业务层,数据访问层.业务层引用数据访问层的DLL(比如 dataAccess.dll),并使用da ...
- C# Dictionary用法总结
转自:http://www.cnblogs.com/linlf03/archive/2011/12/09/2282574.html http://www.cnblogs.com/linzheng/ar ...
- ViewGroup源码部分解析
ViewGroup的官方解析是: A <code>ViewGroup</code> is a special view that can contain other views ...