色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css表格中的圖片任意拖動

孫倡高1年前8瀏覽0評論

CSS表格中的圖片隨意拖動是相當常見的一個功能,這個功能通常使用CSS3的draggable屬性來實現(xiàn)。

img{
display: inline-block;
cursor: move;
}

在上面的代碼中,我們首先將圖片的display屬性設(shè)置為inline-block,這是為了使圖片能夠被拖動。然后我們使用CSS3的cursor屬性來指定鼠標移動到圖片上時的鼠標樣式為move。

但是,僅僅這樣還不夠,我們還需要添加JavaScript的支持來實現(xiàn)圖片拖動的功能。下面是一個簡單的JavaScript代碼:

var dragItem = null; //拖動的元素
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain", (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
dragItem = event.target;
}
function drag_over(event) {
event.preventDefault();
return false;
}
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById(dragItem.getAttribute("drag-target"));
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
event.preventDefault();
return false;
}
document.addEventListener("dragstart",drag_start,false);
document.addEventListener("dragover",drag_over,false);
document.addEventListener("drop",drop,false);

上面的代碼為圖片添加了拖動事件,并且實現(xiàn)了圖片在表格中任意拖動的功能,當然,你還需要為圖片添加一個id或者class,并在代碼中做相應(yīng)的修改才能完美地運行這段代碼。