当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. Chapter 2 创建一个应用

    App Engine开发模式如下一般简单<1.The App Engine development model is as simple as it gets:>: 1.创建这个应用 2. ...

  2. linux 命令 之chomd

    chmod用于改变文件或目录的访问权限.用户用它控制文件或目录的访问权限.该命令有两种用法.一种是包含字母和操作符表达式的文字设定法:另一种是包含数字的数字设定法.  1. 文字设定法 语法:chmo ...

  3. Spark SQL概念学习系列之为什么使用 Spark SQL?(二)

    简单地说,Shark 的下一代技术 是Spark SQL. 由于 Shark 底层依赖于 Hive,这个架构的优势是对传统 Hive 用户可以将 Shark 无缝集成进现有系统运行查询负载. 但是也看 ...

  4. PID入门的十五个基本概念

    PID调节系统PID功能由PID调节器或DCS系统内部功能程序模块实现,了解与PID调节相关的一些基本概念,有助于PID入门新手快速熟悉调节器应用,在自动调节系统中成功整定PID参数.1.被调量被调量 ...

  5. POJ 3041 Asteroids (二分图最小点覆盖)

    题目链接:http://poj.org/problem?id=3041 在一个n*n的地图中,有m和障碍物,你每一次可以消除一行或者一列的障碍物,问你最少消除几次可以将障碍物全部清除. 用二分图将行( ...

  6. UI进阶 数据加密

    一.数据安全 在互联网发展趋势迅猛的今天,数据安全的重要性日趋凸显.也成为我们必须了解的互联网知识.在移动互联网浪潮下,用户的资金安全.企业的信息安全都是我们实际开发中必须考虑的内容.

  7. JS与Jquery的事件委托——解决了绑定相同事件的问题

    概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...

  8. Unity3D之Mecanim动画系统学习笔记(六):使用脚本控制动画

    控制人物动画播放 这里我重新弄了一个简单的场景和新的Animator Controller来作为示例. 下面先看看Animator Controller的配置: 人物在站立状态只能进入走路,走路只能进 ...

  9. transition:all 0.5s linear;进度条动画效果 制作原理

    Html: <span class="progress"><b ><i></i></b><em>50< ...

  10. 方差分析(ANOVA)(转)

    转自:http://blog.sciencenet.cn/blog-116082-218338.html 方差分析(analysis of variance,ANOVA),即变量分析,是对多个样本平均 ...