js中如何拖动DIV中的图片？

2023-02-28 14:48:01JavaScript014

js中如何拖动DIV中的图片？,第1张

实现思路：

①鼠标按下+鼠标移动 → 拖拽

②鼠标松开 → 无拖拽

③鼠标偏移 → 拖拽距离

用JavaScript事件方法表示就是：

① onmousedown + onmousemove → startDrag()

② onmouseup → stopDrag()

drag.js代码：

var params = {

left: 0,

top: 0,

currentX: 0,

currentY: 0,

flag: false

}

//获取相关CSS属性

var getCss = function(o,key){

return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]

}

//拖拽的实现

var startDrag = function(bar, target, callback){

if(getCss(target, "left") !== "auto"){

params.left = getCss(target, "left")

}

if(getCss(target, "top") !== "auto"){

params.top = getCss(target, "top")

}

//o是移动对象

bar.onmousedown = function(event){

params.flag = true

if(!event){

event = window.event

//防止IE文字选中

bar.onselectstart = function(){

return false

}

var e = event

params.currentX = e.clientX

params.currentY = e.clientY

}

document.onmouseup = function(){

params.flag = false

if(getCss(target, "left") !== "auto"){

params.left = getCss(target, "left")

}

if(getCss(target, "top") !== "auto"){

params.top = getCss(target, "top")

}

document.onmousemove = function(event){

var e = event ? event: window.event

if(params.flag){

var nowX = e.clientX, nowY = e.clientY

var disX = nowX - params.currentX, disY = nowY - params.currentY

target.style.left = parseInt(params.left) + disX + "px"

target.style.top = parseInt(params.top) + disY + "px"

}

if (typeof callback == "function") {

callback(parseInt(params.left) + disX, parseInt(params.top) + disY)

}

HTML/CSS

#box{position:absolute left:100px top:100px padding:5px background:#f0f3f9 font-size:12px -moz-box-shadow:2px 2px 4px #666666 -webkit-box-shadow:2px 2px 4px #666666}

#main{border:1px solid #a0b3d6 background:white}

#bar{line-height:24px background:#beceeb border-bottom:1px solid #a0b3d6 padding-left:5px cursor:move}

#content{width:420px height:250px padding:10px 5px}

</style>

内容……

</div>

JS部分

var oBox = document.getElementById("box")

var oBar = document.getElementById("bar")

startDrag(oBar, oBox)

</script>

不是很简单一两句话能说清楚地，需要HTML, CSS和javascript的配合。我大概说下做法，你需要自己写写试试看

首先把你的div设置style为overflow hidden

然后在div里面再添加一个div，假设叫做imgcontainer，在里面存放所有图片，图片以float: left方式显示，每个图片的宽度你是知道的，这样图片的个数*每个图片的宽度（必要的话再加上图片之间的间隔）设置为imgcontainer的总宽度。然后把div的宽度设置为显示3个图片的宽度。这样就可以保证只显示3个图片，多余的图片看不到。

然后在点击左右2个按钮的时候添加事件，每点击一次，让imgcontainer的marginLeft增加或减少一个图片的宽度（同样必要的时候加上图片之间的间隔距离），这样就使得图片列表在左右移动了。

下面是我的一个例子，跟你的需求可能不完全一样，大概做下参考：

HTML片段

<li><figure onclick="ViewPhoto(this,'aaaaa')"><div class="samplecontainer"><img src="./img/singularity.jpg" onload="javascript:DrawSampleImage(this)" border="0" ></div><figcaption class="imagename">aaaaa</figcaption></figure></li>

<li><figure onclick="ViewPhoto(this,'bbbbb')"><div class="samplecontainer"><img src="./img/pyre.jpg" onload="DrawSampleImage(this)" border="0" ></div><figcaption class="imagename">bbbbb</figcaption></figure></li>

</ol>

</div>

</div>

CSS部分

.photolist_container {

margin: 0

/*Firefox*/

width: -moz-calc(100% - 30px)

/*chrome safari*/

width: -webkit-calc(100% - 30px)

/*Standard */

width: calc(100% - 30px)