當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
使用JS制作一个鼠标可拖的DIV(三)——移动带图片DIV
生活随笔
收集整理的這篇文章主要介紹了
使用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 οnmοusedοwn='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>?
轉載于:https://www.cnblogs.com/cjnmy36723/p/3945568.html
總結
以上是生活随笔為你收集整理的使用JS制作一个鼠标可拖的DIV(三)——移动带图片DIV的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 《设计模式系列》---工厂方法
- 下一篇: [原]Java程序员的JavaScrip