对ckeditor已经上传的图片,进行拖拽移动
时间: 2023-12-15 12:05:36 浏览: 144
ckeditor上传图片
可以使用HTML5的拖放API来实现拖拽移动已经上传的图片。
首先,在图片元素上添加`draggable="true"`属性,使其可拖动。然后,在图片元素上添加`ondragstart`事件,用于在开始拖动时保存拖动的数据。
```html
<img src="image.jpg" draggable="true" ondragstart="drag(event)">
```
在JavaScript代码中,定义`drag(event)`函数,将需要拖动的数据保存在`event.dataTransfer`对象中。
```javascript
function drag(event) {
event.dataTransfer.setData("text/plain", event.target.src);
}
```
接下来,在需要拖动到的位置上添加`ondragover`和`ondrop`事件,用于在拖动时检测是否允许放置和实现放置操作。在`ondrop`事件中,获取拖动的数据,并将其插入到当前位置。
```html
<div ondragover="allowDrop(event)" ondrop="drop(event)">
<!-- 需要拖动到的位置 -->
</div>
```
```javascript
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
var img = document.createElement("img");
img.src = data;
event.target.appendChild(img);
}
```
这样,当用户拖动已经上传的图片时,就可以将其移动到指定位置了。
阅读全文