1、新建一个HTML文件，保存为test.html，用于编写代码实现拖放功能 。
2、在test.html添加一个div标签，并且给它一个id，用于下面编写样式。
3、通过div的id , 给div定义CSS样式，例如，把div定义为一个带边框的长方形。下面将实现将图片拖放在这个长方形中。
4、在div的下面定义一张被拖放图片，并设置该图片的属性为允许被拖放。
5、在被拖放的图片上加上一个ondragstart事件，即图片被拖动时触发这个事件。再给事件一个函数，用于拖动图片时，把图片保存在一个变量中。
6、运行代码，在浏览器中查看结果：至此，完成了使用JS实现拖放图片到div中的功能。
这种情况用CSS来控制最合适。例如你想让初始图片显示为100px*100px，则：<img src="images/pic.png" width="100" height="100" />
或者：
<img src="images/pic.png" style="width:100pxheight:100px" />
当页面中图片非常多，且要求每张图片的大小依据其父容器来固定怎么办？可以使用max-weight：
img {max-weight:100%}
这样图片会自动缩放到和其父容器等宽。
先把图片的父元素的css样式，postion设置为relative，然后图片的postion设置为absolute，然后用js来改变的图片的left 和 top数值就可以改变图片的位置了。如果不设置父元素，那就将图片的postion设置为relative，也可以改变位置，JS同样。
下面是个简单的例子，你参考下
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<style type="text/css">
*{margin: 0 padding: 0}
.wrap { position: relative }
#pic { position: absolute }
</style>
</head>
<body>
<div class="wrap">
<img id="pic" src="222.jpg">
</div>
<script type="text/javascript">
var pic = document.getElementById("pic")
pic.style.left=50+"px" //这里可以更改图片左边距
pic.style.top=30+"px" //这里可以更改图片的上边距
</script>
</body>
</html> <script type="text/javascript">
var pic = document.getElementById("pic")
pic.style.left=150+"px"
pic.style.top=130+"px"
</script>
