当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的更多相关文章

  1. 使用JS制作一个鼠标可拖的DIV(二)——限制区域移动

    这次是要对上一篇的内容进行扩展. 由于需要对可拖动的 DIV 进行一个区域范围的限制,所以要给于一个容器,让可拖动的 DIV 元素不能逃出该容器的大小范围. 一.思路 1.在外层增加一个 DIV 容器 ...

  2. 使用JS制作一个鼠标可拖的DIV(四)——缩放

    原理与鼠标拖动 DIV 相同. 下面就先实现一个在DIV的右上角显示一个小正方形(类似). 当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小. 一.思 ...

  3. 使用JS制作一个鼠标可拖的DIV(一)——鼠标拖动

    使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件: 1.鼠标按下:DIV元素的onmousedown. 2.鼠标按住拖动:document 的 onmousemove 元素. 3.鼠标放 ...

  4. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  5. 【原创】js实现一个可随意拖拽排序的菜单导航栏

    1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...

  6. three.js 制作一个三维的推箱子游戏

    今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...

  7. JS制作一个通用的商城版历史浏览记录

    正在开发一个b2c的国外商城,昨天做了一个历史浏览记录发出来跟大家分享一下. JS: //cookie相关函数 function getCookieVal(offset) {    var endst ...

  8. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  9. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. lighttpd mod_status模块

    用过nginx的status可以查看服务器的状态,之后就想lighttpd有没有这样的模块呢 之后看下配置文件,真的有,然后就试下 第一步, "mod_auth" 把这个前面的#号 ...

  2. 转载:mac系统XAMPP配置虚拟主机

    安装完xampp后,想添加一个virsualhost,一直报错.查了半天资料,都是乱说,后来看到了一篇国外的文章,终于弄出来了,整理一下. 第一步,配置本地hosts sudo vi /etc/hos ...

  3. 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 ...

  4. es 的集群状态

    es的集群状态一共有三种 : green yellow red 状态是基于 碎片的 等级进行划分的 .

  5. java 最佳且开源的反编译工具

    1.jad:2.jode 很多gui的反编译工具(decafe,DJ,cavaJ)差不多都是基于jad和jode的.

  6. Apache Spark GraphX的使用简介

    类似 Spark 在 RDD 上提供了一组基本操作符(如 map, f ilter, reduce), GraphX 同样也有针对 Graph 的基本操作符,用户可以在这些操作符传入自定义函数和通过修 ...

  7. 使用CocoaPods管理依赖库

    本篇内容将介绍Mac和iOS开发中必备的一个依赖库管理工具CocoaPods. CocoaPods是什么 在iOS开发中势必会用到一些第三方依赖库,比如大家都熟悉的ASIHttpRequest.AFN ...

  8. .NET的Snk使用方法

    保护你Asp.Net生成的DLL和Code不被别人反编译  大家做项目开发一般都是分层的,比如UI层,业务层,数据访问层.业务层引用数据访问层的DLL(比如 dataAccess.dll),并使用da ...

  9. C# Dictionary用法总结

    转自:http://www.cnblogs.com/linlf03/archive/2011/12/09/2282574.html http://www.cnblogs.com/linzheng/ar ...

  10. ViewGroup源码部分解析

    ViewGroup的官方解析是: A <code>ViewGroup</code> is a special view that can contain other views ...