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)的修改才能完美地運行這段代碼。