实现图片拖动的方法：
1.使用HTML5的draggable和ondragstart事件
当我们需要对某个元素实现拖拽时，我们可以使用HTML5的draggable属性。将此属性设置为true可以使元素可拖拽。同时，在ondragstart事件中我们可以将被拖拽元素存储为数据，并在ondragover事件中接收数据。
以下是一个简单的实现示例：
<p>HTML代码：</p><div id="drag" draggable="true"><img src="/post/test.jpg" ></div><p>JavaScript代码：</p>var drag = document.getElementById('drag');drag.ondragstart = function(ev) {ev.dataTransfer.setData('text', ev.target.id);};drag.ondragover = function(ev) {ev.preventDefault();};drag.ondrop = function(ev) {ev.preventDefault();var data = ev.dataTransfer.getData('text');ev.target.appendChild(document.getElementById(data));};2.使用jQuery UI库
在jQuery UI库中有一个draggable()方法，可以在拖拽某个元素时执行一些特殊的操作。
以下是一个示例：
<p>HTML代码：</p><div ><img src="/post/test.jpg" ></div><p>JavaScript代码：</p>$('.drag').draggable({containment: 'parent',});这里的containment属性指定拖拽边界，可以为某个父级元素或CSS选择器。
总结：
无论是使用HTML5的draggable或jQuery UI库的draggable()方法，在使用时都需要特别关注一些使用注意事项，如元素定位、拖拽时的状态变化等等。
因此，对于开发者而言，学习完整的拖拽操作机制，能够更加高效和精准地实现元素拖拽操作。
上一篇：css按钮控制动画
下一篇：javascript中定义常量
