拖拽图片是网站中经常使用的交互效果之一。实现拖拽图片的方式有很多，其中一种比较常用的方式是使用JavaScript。下面我将介绍如何使用JavaScript实现拖拽图片的效果。 首先我们需要了解JavaScript的事件模型。JavaScript的事件模型分为捕获和冒泡两种方式，我们需要根据具体需求来选择使用哪种方式。如果是拖拽图片这种操作，一般情况下使用冒泡方式即可。 下面是一段简单的拖拽图片代码的实现：

var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(e) {
var e = e || window.event;
var disX = e.clientX - oDiv.offsetLeft;
var disY = e.clientY - oDiv.offsetTop;
document.onmousemove = function(e) {
var e = e || window.event;
oDiv.style.left = e.clientX - disX + 'px';
oDiv.style.top = e.clientY - disY + 'px';
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}

上面的代码中，我们先获取到要拖拽的图片元素`div1`，然后当鼠标按下时，获取到鼠标相对于图片左上角的坐标`disX`和`disY`，并绑定`onmousemove`事件，随后根据鼠标的坐标来改变图片的位置。当鼠标松开时，解绑事件。 下面我们来看一下如何拖拽多个图片，我们可以使用事件委托的方式实现。这里我们以一个图片列表为例，代码如下：

var oList = document.getElementById('list');
oList.onmousedown = function(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
// 如果是图片则进行拖拽
if(target.tagName.toLowerCase() === 'img') {
var disX = e.clientX - target.offsetLeft;
var disY = e.clientY - target.offsetTop;
document.onmousemove = function(e) {
var e = e || window.event;
target.style.left = e.clientX - disX + 'px';
target.style.top = e.clientY - disY + 'px';
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
}

上面的代码中，我们首先获取到要拖拽的图片列表元素`list`，然后绑定`onmousedown`事件，当鼠标按下时，获取到鼠标点击的元素`target`，如果`target`是图片则进行拖拽操作。 以上就是使用JavaScript来实现拖拽图片的基本方法，通过灵活运用事件模型和事件委托，我们可以轻松地实现不同场景下的拖拽效果。