拖拽圖片是網(wǎng)站中經(jīng)常使用的交互效果之一。實(shí)現(xiàn)拖拽圖片的方式有很多，其中一種比較常用的方式是使用JavaScript。下面我將介紹如何使用JavaScript實(shí)現(xiàn)拖拽圖片的效果。 首先我們需要了解JavaScript的事件模型。JavaScript的事件模型分為捕獲和冒泡兩種方式，我們需要根據(jù)具體需求來(lái)選擇使用哪種方式。如果是拖拽圖片這種操作，一般情況下使用冒泡方式即可。 下面是一段簡(jiǎn)單的拖拽圖片代碼的實(shí)現(xiàn)：

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`，然后當(dāng)鼠標(biāo)按下時(shí)，獲取到鼠標(biāo)相對(duì)于圖片左上角的坐標(biāo)`disX`和`disY`，并綁定`onmousemove`事件，隨后根據(jù)鼠標(biāo)的坐標(biāo)來(lái)改變圖片的位置。當(dāng)鼠標(biāo)松開時(shí)，解綁事件。 下面我們來(lái)看一下如何拖拽多個(gè)圖片，我們可以使用事件委托的方式實(shí)現(xiàn)。這里我們以一個(gè)圖片列表為例，代碼如下：

var oList = document.getElementById('list');
oList.onmousedown = function(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
// 如果是圖片則進(jìn)行拖拽
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`事件，當(dāng)鼠標(biāo)按下時(shí)，獲取到鼠標(biāo)點(diǎn)擊的元素`target`，如果`target`是圖片則進(jìn)行拖拽操作。 以上就是使用JavaScript來(lái)實(shí)現(xiàn)拖拽圖片的基本方法，通過靈活運(yùn)用事件模型和事件委托，我們可以輕松地實(shí)現(xiàn)不同場(chǎng)景下的拖拽效果。