码迷,mamicode.com
首页 > 移动开发 > 详细

使用JS制作一个鼠标可拖的DIV(三)——移动带图片DIV

时间:2014-08-29 19:56:18      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   使用   io   ar   2014   

当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

标签:style   blog   http   color   os   使用   io   ar   2014   

原文地址:http://www.cnblogs.com/cjnmy36723/p/3945568.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!